jquery-ui 插件学习--日期控件datepicker

最新推荐文章于 2022-05-19 17:03:19 发布
最新推荐文章于 2022-05-19 17:03:19 发布
阅读量2.2k 收藏 1
点赞数
分类专栏： jquery-ui 组件 web页面 文章标签： stylesheet function class button div input
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lushuaiyin/article/details/7407629
版权 
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>jQuery UI Datepicker - Format date</title>
	<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
	<script src="../../jquery-1.7.1.js"></script>
	<script src="../../ui/jquery.ui.core.js"></script>
	<script src="../../ui/jquery.ui.widget.js"></script>
	<script src="../../ui/jquery.ui.datepicker.js"></script>
	<link rel="stylesheet" href="../demos.css">
	<script>
	$(function() {

		$( "#datepicker" ).datepicker();
		
		$( "#datepicker" ).datepicker( "option", "dateFormat", $( this ).val());

		$( "#datepicker" ).datepicker( "option", "dateFormat", 'yy-mm-dd');


	});
	</script>
</head>
<body>
 
<div class="demo">
 
<p>Date: <input type="text" id="datepicker" size="30"/></p>
 
<p>Format options:<br />
	<select id="format">
		<option value="mm/dd/yy">Default - mm/dd/yy</option>
		<option value="yy-mm-dd">ISO 8601 - yy-mm-dd</option>
		<option value="d M, y">Short - d M, y</option>
		<option value="d MM, y">Medium - d MM, y</option>
		<option value="DD, d MM, yy">Full - DD, d MM, yy</option>
		<option value="'day' d 'of' MM 'in the year' yy">With text - 'day' d 'of' MM 'in the year' yy</option>
	</select>
</p>
 
</div><!-- End demo -->
 
 
 
<div class="demo-description">
<p>jquery-ui默认的日期格式一般不是我们要的，要展现正确的格式，这个插件才有实际用途。这个例子使用下拉框的值区设定日期控件的值，我们在实际中使用可以把这个参数写死。<br>
	$(function() {

		$( "#datepicker" ).datepicker();
		
		$( "#datepicker" ).datepicker( "option", "dateFormat", $( this ).val());

		$( "#datepicker" ).datepicker( "option", "dateFormat", 'yy-mm-dd');


	}); </p>这样的格式显示为：2012-03-16
</div><!-- End demo-description -->
 
</body>
</html>


 

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>jQuery UI Datepicker - Icon trigger</title>
	<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
	<script src="../../jquery-1.7.1.js"></script>
	<script src="../../ui/jquery.ui.core.js"></script>
	<script src="../../ui/jquery.ui.widget.js"></script>
	<script src="../../ui/jquery.ui.datepicker.js"></script>
	<link rel="stylesheet" href="../demos.css">
	<script>
	$(function() {

		$( "#datepicker" ).datepicker({
			showOn: "button",
			buttonImage: "images/calendar.gif",
			buttonImageOnly: true
		});

		$( "#datepicker" ).datepicker( "option", "dateFormat", 'yy-mm-dd');

	});
	</script>
</head>
<body>
 
<div class="demo">
 
<p>Date: <input type="text" id="datepicker"></p>
 
</div><!-- End demo -->
 
 
 
<div class="demo-description">
<p>这个样子是我们比较喜欢和常用的，点击右边的按钮弹出控件。</p>
	$(function() {

		$( "#datepicker" ).datepicker({
			showOn: "button",
			buttonImage: "images/calendar.gif",
			buttonImageOnly: true
		});

		$( "#datepicker" ).datepicker( "option", "dateFormat", 'yy-mm-dd');

	});
</div><!-- End demo-description -->
 
</body>
</html>


 

 

 

索隆
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
jquery插件开发之—日期选择器JqDatepicker
xiaoyinmochun的博客
07-03 1845
     插件，在多人项目开发的过程中，是个很好的工具。它能够将复用的部分，封装成一个公共的接口，只需要写一遍，就可以在多人项目中，按照一定规则进行使用。     开发一个插件需要完成以下几步：     定义在闭包中，并以一个立即执行函数进行开放。     将对象注册在window中，以开发接口供外界使用。     设置必要性的配置参数，以便根据配置参数的不同，执行不同的操作。     ...
jQuery日期选择器插件bootstrap-datepicker.js
阳光下的冷静的博客
03-27 4042
bootstrap-datepicker.js介绍 bootstrap-datepicker是一款Bootstrap日期选择器插件。该日期选择器插件支持多种语言，可通过配置参数设置日期选择器，日期范围选择器等，功能非常强大。 bootstrap-datepicker.js安装 可以通过npm、bower或yarn来安装bootstrap-datepicker日期选择器插件。 Yarn yarn...
datepicker日期选择器插件
遇见最好的自己，才能遇见最好的人！
07-26 1436
bootstrap是与jquery.js文件一起结合起来一起用的，缺少任何一个文件都不可以。     datepicker插件一般用于在文本框中选择日期，通过在表中选择日期，从而将日期显示在文本框中。因为datepicker.js默认是英文的，如果需要显示中文日期，则需要引入该插件的中文包。     例如： 日期选择器插件   Hello, wor
日期选择器| jQuery UI
cuketao5066的博客
08-05 411
Full calendar datepicker. If you are not familiar with jquery ui, and you are looking for a way to add a datepicker to your website, it would be superfluous to read this article, where we will tell ho...
jQuery UI日期选择器（Datepicker）实现添加农历
jovi_zhao的博客
08-07 3707
效果图：  最近项目中，要求使用jquery 中的datepicker来实现农历的操作，所以想到这样实现： jquery 中重写datepicker的样式和代码，为了获取当前日期来转换成所对应的农历日期，将下面代码封装成js，这个网上可以搜到类似的，但是我们在其中加入printLunarDate方法，在这里调用 $.datepicker._generateHTML = function (...
vue-datepicker-ui:Vue 的日期选择器组件
07-24
import VueDatepickerUi from 'vue-datepicker-ui' import 'vue-datepicker-ui/lib/vuedatepickerui.css' ; Vue . component ( 'Datepicker' , VueDatepickerUi ) 要么 < script > import ' vue-datepicker...
jquery-ui-1.11.2日期控件datepicker
11-05
最新jquery-ui-1.11.2日期控件,官网下载内涵图片和自己添加的中文辅助jquery-ui-timepicker-zh-CN.js,经过本人测试绝对可以用,不知道怎么用的百度上找个例子即可,需要导入的包 ${ctx}/plugins/jquery-ui-1.11.2/...
jquery-ui日期插件
10-23
**jQuery UI 日期插件详解** jQuery UI 是一个强大的 JavaScript 库，它扩展了 jQuery 的功能，提供了丰富的用户界面组件，其中包括我们今天要讨论的日期插件。这个插件允许开发者在网页上添加交互式的日期选择器，...
jQuery日期选择组件
01-17
清爽的蓝色日期选择组件，支持一个页面多个组件使用，jQuery版。
jquery-ui插件
07-10
- **Datepicker（日期选择器）**: 为输入字段提供一个日历控件，方便用户选择日期。 - **Tabs（标签页）**: 将内容分割成多个可切换的标签页。 - **Sortable（可排序）**: 可以使列表项或者表格行变得可拖拽排序。 -...
jquery-ui-1.11.4完整版
04-16
jQuery UI 是一款基于JavaScript库jQuery的用户界面插件集合，提供了丰富的交互效果和可自定义的主题。本文将深入解析jQuery UI 1.11.4这个版本，涵盖其核心功能、组件、应用场景以及使用方法。 一、jQuery UI的...
Vue移动端日期选择器（datepicker.js）
weixin_44979432的博客
04-28 5995
声明：因为帮忙用到移动端用到日期选择器，效果如图 使用方法： 第一步：在main.js中引入 import datePicker from "../static/js/datePicker.js" Vue.use(datePicker) 第二步：在.vue文件中使用 <input id="demo" type="text" placeholder="选择出生日期" readonly&gt...
前端datepicker时间范围选择框
dongyan3595的博客
05-19 931
前端datepicker时间范围选择框 已经封装测试过了, 直接下载既可以使用 datepicker前端时间范围选择-Javascript文档类资源-CSDN下载 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta http-equiv="X-UA-Compatible" content="IE=Edge"> <meta charset="UTF-8"> <link
datepicker.js文件
每天学习一点点
03-07 6947
//datePicker日期控件 v1.0 //var calendar = new datePicker(); //calendar.init({ // 'trigger': '#demo1', /*选择器，触发弹出插件*/ // 'type': 'date',/*date 调出日期选择 datetime 调出日期时间选择 time 调出时间选择 ym 调出年月选择*/ // ...
jquery日期插件jquery.datePicker详解
guorun18的专栏
11-13 4992
jQuery是一款不可多得的非常优秀的javascript脚本开发库，而基于其上的很多插件也是非常规范和卓越的，如果错过这番美景真是太可惜了，比如datepicker这个插件（使用示例）。     一般MIS系统的前端，尤其是用户注册页面，都会有诸如“出身年月”的日期输入框，最简单的做法就是使用一个标签，这样做的弊端有很多：首先是与数据库字段类型的匹配、其次是输入日期的合法性如“13月”或者
jQueryUI中Datepicker(日历)插件的介绍和使用（10级学员 郞志课堂笔记）
redarmychen的专栏
03-27 2万+
jQueryUI中Datepicker(日历)插件的介绍和使用 Datepicker插件的属性： 属性 数据类型 默认值 说明 altField String "" 使用备用的输出字段，即将选择的日期 以另一种格式，输出到另一个控件中， 值为选择符，即要输出的控件 alt
很漂亮的按钮css样式（没有用到图片，可直接拷贝代码使用）
热门推荐
10-27 8万+
对于程序员，有时候也需要对页面风格做些改动，整体的页面风格还是美工的工作。 按钮其实是程序员很常用的，如果美工没有设计好，那就自己设计吧。 在网上发现有乐于奉献的人共享了代码。效果很好，而且没有使用到图片，这个很重要。 如果你使用别人的css，里面又用到了图片，那这个样式是没法使用的，除非，你能在网上下载使用到的图片，。 这个网址;  http://www.webdesignerwall.
query-ui.js
最新发布
07-20
5. 日期选择器（Datepicker）：可以选择日期的日历控件。 6. 对话框（Dialog）：可以创建模态对话框。 7. 标签页（Tabs）：可以创建多个标签页，切换内容。 8. 自动完成（Autocomplete）：可以提供输入预测和补全...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值