原文链接;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" >
<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" >
对于文本框。默认是获取焦点时显示日期。也能够在后面加入一个button
<span style="font-size:18px;">showOn:"button", //在文本框后加入选择按钮</span>
watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvdTAxMTA0Mzg0Mw==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast" >
能够为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" >
假设仅仅想显示图片，能够加入下列代码
<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" >
还能够设置选择的年份范围
<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" >
对于不喜欢英文的孩子。能够换成中文
<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
版权声明：本文博主原创文章。博客，未经同意不得转载。