0
点赞
收藏
分享

微信扫一扫

JQ插件:日期时间选择器date picker


这个控件关键是它能支持在mobile中显示。iPhone和android中显示可能略有差别。


下图是在android中的显示效果:



JQ插件:日期时间选择器date picker_javascript



再看一下用法


首先导入JQ和date picker插件:

<link rel="stylesheet" type="text/css" href="css/picker/default.css" />
<link rel="stylesheet" type="text/css" href="css/picker/default.date.css" />
<!--
<link rel="stylesheet" type="text/css" href="css/picker/default.time.css" />
-->

<script type="text/javascript" src="js/picker/picker.js"></script>
<script type="text/javascript" src="js/picker/picker.date.js"></script>
<!-- 
<script type="text/javascript" src="js/picker/picker.time.js"></script>
 -->




如果你想支持time的选择,可以把上面注释掉的代码打开。我这里只要显示date所以注释掉了。



然后在html中加入一个input text控件,比如:



<input type="text" style="padding:16px" id="birthday" placeholder="Birthday"/>




然后写JS:


$('#change_birthday_page #birthday').pickadate({
	selectMonths: true,
	selectYears: 45,
	format: 'yyyy-mm-dd',
	formatSubmit: 'yyyy-mm-dd',
	min: new Date(1970,1,1),
	max: new Date(),
        today: '',
	clear: '',
	close: 'Close'
});



这里我只是根据需要填入birthday,min和max表示日期的跨度;selectYears也可以填true和数字,如果是数字表示一共下拉显示多少个年份。



PS:


在手机中选择年份和月份的时候,只显示半个字。需要修改default.date.css,在该CSS中查询picker__select--year,将其中的padding: .5em;改成padding: .25em;即可。



详细的用法见:

http://amsul.ca/pickadate.js/


  • JQ插件:日期时间选择器date picker_javascript_02

  • 大小: 93.7 KB
  • 3.5.3.zip (1.7 MB)
  • 描述: 官方完整文档
  • 下载次数: 1
  • pickadate.js-3.5.3.zip (105.6 KB)
  • 描述: 我精简了一下
  • 下载次数: 1
  • 查看图片附件
举报

相关推荐

0 条评论