原文链接;http://www.ido321.com/375.html

Jquery UI是一个非常丰富的Jquery插件，而且UI的各部分插件能够独自分离出来使用。这是其它非常多Jquery插件没有的优势。

近期对UI中的datepicker插件学习了一下，这款日期选择/日历显示插件非常好用。废话不多说，先来张图。看看效果：

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvdTAxMTA0Mzg0Mw==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast" alt="">

<span style="font-size:18px;"><!DOCTYPE>

<html>

<head>

<title>日历控件</title>

<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>

<script src="js/calendar.js"></script>

<link rel="stylesheet" href="css/calendar.css" />

<meta charset="utf-8"/>

</head>

<body>

<!-- height 332 width 385 -->

		<div id="datepicker">

		</div>

	<script type="text/javascript">

		$( "#datepicker" ).datepicker();

	</script>

</body>

</html></span>

也能够再文本框获取焦点时显示,稍作改动:

<!--文本框获取焦点显示日历须要导入的js文件 -->

<script src="js/custom.min.js"></script>
把div部分改动例如以下：
日期选择：<input type='text' id='datepicker'/>

其它不变，刷新浏览器，效果如图

这样的显然不太符合我们的习惯。须要改动js。让其符合我们的使用习惯

<span style="font-size:18px;"><script type="text/javascript">

		$( "#datepicker" ).datepicker(

			{

				showMonthAfterYear:true, //年在前，月在后

				yearSuffix:"年",	     //加入后缀年

				prevText:"上一月",       //鼠标放在翻月button上显示的文字

				nextText:"下一月",

				monthNames:["1月","2月","3月","4月","5月","6月","7月","8月","9月","10月","11月","12月",],      //以中文显示月份

				//以中文显示每周（必须按此顺序。否则日期出错）

				dayNamesMin:["日","一","二","三","四","五","六",],

				//在文本框中显示日期的格式

				dateFormat:"yy-mm-dd",

			});

</script></span>

改动后的效果

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvdTAxMTA0Mzg0Mw==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast" alt="">

对于文本框。默认是获取焦点时显示日期。也能够在后面加入一个button

<span style="font-size:18px;">showOn:"button",     //在文本框后加入选择按钮</span>

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvdTAxMTA0Mzg0Mw==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast" alt="">

能够为button加入一张图片或者改动文本，来美化button

<span style="font-size:18px;">buttonText:"日期",    //设置选择按钮的文本

buttonImage:"css/images/animated-overlay.gif",  //为按钮设置图片</span>

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvdTAxMTA0Mzg0Mw==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast" alt="">

假设仅仅想显示图片，能够加入下列代码

<span style="font-size:18px;">//布尔值，是否将图片显示为button形式，FALSE显示button形式，TRUE单独显示图片。默认是FALSE

buttonImageOnly:true, </span>

还能够自由选择月份和年份

<span style="font-size:18px;">changeYear:true,  //布尔值，能否够选择年份

changeMonth:true, //布尔值，能否够选择月份</span>

不喜欢英文？ok。咱们替换成数字

<span style="font-size:18px;">//changeMonth为TRUE时。月份的缩写

monthNamesShort:["01","02","03","04","05","06","07","08","09","10","11","12"],</span>

看看效果

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvdTAxMTA0Mzg0Mw==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast" alt="">

还能够设置选择的年份范围

<span style="font-size:18px;">//在changeYear为true时，设置年份范围。c表示当前年份，加减10表示当前年份推后10年和推前10年

yearRange: "c-10:c+10", </span>

当然，还能够加入面板

<span style="font-size:18px;">showButtonPanel:true,   //是否显示面板</span>

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvdTAxMTA0Mzg0Mw==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast" alt="">

对于不喜欢英文的孩子。能够换成中文

<span style="font-size:18px;">// 设置面板上返回当前日的文字，仅仅有showButtonPanel: true才会显示出来

currentText:"今天",

// 设置面板上关闭面板的文字，仅仅有showButtonPanel: true才会显示出来

closeText: "关闭", </span>

这些也是我们常常要用到的吧,假设还须要什么功能,能够自己改动js。

我已经将上述代码和从ui抽离出来的datepicker打包。能够直接应用你的项目中。假设你有须要。能够从以下给出的链接下载：

Fork Git :https://github.com/dwqs/datepicker

CSDN :http://download.csdn.net/detail/u011043843/7809973

百度云：http://pan.baidu.com/s/1bnGl07t

版权声明：本文博主原创文章。博客，未经同意不得转载。

Jquery UI的datepicker插件使用的更多相关文章

  1. jQuery ui 利用 datepicker插件实现开始日期(minDate)和结束日期(maxDate)

    这篇文章主要介绍了jQuery ui 利用 datepicker插件实现开始日期(minDate)和结束日期(maxDate),需要的朋友可以参考下 使用jQuery ui首先需要引入jQuery类库 ...

  2. Jquery UI的datepicker插件使用方法

    原文链接;http://www.ido321.com/375.html Jquery UI是一个非常丰富的Jquery插件,并且UI的各部分插件可以独自分离出来使用,这是其他很多Jquery插件没有的 ...

  3. 浅析jquery ui的datepicker组件

    今天计划在博客上添加一个日历,方便用户查看日期.Google了一圈,最终决定使用jquery ui的datepicker部件实现.原因有三:Datepicker使用配置比较简洁,几行代码就可以得到一个 ...

  4. 5-15 bootcss 之 modal 以及 jquery ui 之datepicker 小记

    最近公司在用bootstrap和Jquery UI做项目,类似与OA的东西前两天碰到点问题,记录一下.希望读者不要在遇到和我一样的问题. 1 datepicker.不知道怎么自己下载的bootcss里 ...

  5. day15—jQuery UI之widgets插件

    转行学开发,代码100天——2018-03-31 今天学习了jQuery UI的widgets插件,主要包括accordion插件 accordion插件 该插件表示折叠面板效果,点击头部展开/折叠被 ...

  6. jquery ui bootstrap日期插件

    http://blog.csdn.net/php_897721669/article/details/7404527 搜索“jquery ui日期插件怎么显示年份”? $("#datepic ...

  7. jQuery UI的datepicker日期控件如何让他显示中文

    首先是引入UI的JS文件和模板文件,如下: <link rel=”stylesheet” href=”./ui/themes/le-frog/jquery.ui.all.css”> < ...

  8. 基于jQuery UI的调色板插件推荐colorpicker

    1.下载地址 点击网页最下端Download,即可下载 2.使用方法 本插件是基于jQuery UI,所以应该先行下载jQuery UI,当然jQuery也必不可少 引入和初始化   引入js文件 & ...

  9. jQuery UI的datepicker()与变更格式

    继续MVC应用程序的练习,刚刚练习了jQuery的UI中的datepicker()的方法,它是为了让用户能在文本框中快捷输入日期. 代码简洁与简单. 打开以前练习的一个视图Views\Home\Ind ...

随机推荐

  1. SQL Server 2008中数据压缩

    SQL Server 2008中引入了数据压缩的功能,允许在表.索引和分区中执行数据压缩.这样不仅可以大大节省磁盘的占用空间,还允许将更多数据页装入内存中,从而降低磁盘IO,提升查询的性能.当然,凡事 ...

  2. 模拟vector

    实现了vector的模板,insert, erase, push_back, iterator #include<iostream> #include<string.h> #i ...

  3. 你好，C++（38）从问题描述中发现对象的属性和行为 6.4 工资程序成长记：类与对象（上）

    6.4  工资程序成长记:类与对象 “夜半三更哟,盼天明:寒冬腊月哟,盼春风.若要盼得哟,涨工资,岭上……”自从上次老板许诺给小陈涨工资以后,一转眼又过去几个月了,可是涨工资的事一点动静都没有.小陈只 ...

  4. Linux安装Ｍonaco字体

    Linux安装字体的方式其实很简单,就是调用 fc-cache -f -v 命令,其实我们可以什么都不添加直接调用这个命令可以看到它会去/usr/share/fonts/truetype等目录以及你自 ...

  5. 关于委托：异常{ 无法将 匿名方法 转换为类型“System.Delegate”，因为它不是委托类型 }

    转自:http://www.cnblogs.com/xiaofei59/archive/2010/11/25/1887285.html 异常{ 无法将 匿名方法 转换为类型“System.Delega ...

  6. oracle行转列和列转行

    目录[-] 一.行转列 1.1.初始测试数据 1.2. 如果需要实现如下的查询效果图: 1.3.延伸 二.列转行 1.1.初始测试数据 1.2. 如果需要实现如下的查询效果图: 一.行转列 1.1.初 ...

  7. c#中方法out参数的使用

    一个很普通的例题,求出一个整型数组的最小值.最大值.总和.平均值,利用调用函数的方法来ut参数实现 using System; using System.Collections.Generic; us ...

  8. python ATM购物程序

    需求: 模拟实现一个ATM + 购物商城程序 额度 15000或自定义 实现购物商城,买东西加入 购物车,调用信用卡接口结账 可以提现,手续费5% 每月22号出账单,每月10号为还款日,过期未还,按欠 ...

  9. iOS 开发工程师

    iOS 开发工程师 工作职责: 负责下厨房 iPhone 客户端的产品开发.维护.优化以及扩展. 任职要求: 对技术有热情,热爱新的挑战 熟悉 CocoaTouch, ASIHttpRequest, ...

  10. xcode导出ipa的几种方式-by

    1,编译: Product -> Archive 2,导出: Window -> Organizer (Command + Shift +2) -> Archives ->Di ...