码迷,mamicode.com
首页 > Web开发 > 详细

Jquery UI的datepicker插件使用

时间:2015-10-14 09:04:06      阅读:208      评论:0      收藏:0      [点我收藏+]

标签:

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

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

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

技术分享

<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>

改动后的效果

技术分享技术分享

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

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

技术分享

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

<span style="font-size:18px;">buttonText:"日期",    //设置选择按钮的文本
buttonImage:"css/images/animated-overlay.gif",  //为按钮设置图片</span>
技术分享技术分享

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

<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>
看看效果

技术分享

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

<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>

技术分享

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

<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插件使用

标签:

原文地址:http://www.cnblogs.com/hrhguanli/p/4876380.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!