JQ插件:日期时间选择器date picker
来源:互联网 发布:购物中心数据分析 编辑:程序博客网 时间:2024/04/19 11:43
这个控件关键是它能支持在mobile中显示。iPhone和android中显示可能略有差别。
下图是在android中的显示效果:
再看一下用法
首先导入JQ和date picker插件:
如果你想支持time的选择,可以把上面注释掉的代码打开。我这里只要显示date所以注释掉了。
然后在html中加入一个input text控件,比如:
然后写JS:
这里我只是根据需要填入birthday,min和max表示日期的跨度;selectYears也可以填true和数字,如果是数字表示一共下拉显示多少个年份。
PS:
在手机中选择年份和月份的时候,只显示半个字。需要修改default.date.css,在该CSS中查询picker__select--year,将其中的padding: .5em;改成padding: .25em;即可。
详细的用法见:http://amsul.ca/pickadate.js/
下图是在android中的显示效果:
再看一下用法
首先导入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/