JQ插件:日期时间选择器date picker
2017-04-10 18:59
531 查看
这个控件关键是它能支持在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/
大小: 93.7 KB
3.5.3.zip (1.7 MB)
描述: 官方完整文档
下载次数: 1
pickadate.js-3.5.3.zip (105.6 KB)
描述: 我精简了一下
下载次数: 1
查看图片附件
下图是在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/
大小: 93.7 KB
3.5.3.zip (1.7 MB)
描述: 官方完整文档
下载次数: 1
pickadate.js-3.5.3.zip (105.6 KB)
描述: 我精简了一下
下载次数: 1
查看图片附件
相关文章推荐
- jQuery插件Datepicker日期选择器实现Javascript自定义日期时间选择功能
- 各种杂项组件(3)之--CalendarView(日历视图)、DatePicker/TimePicker(日期、时间选择器)、NumberPicker(数值选择器)
- Yii 2.0 时间日期插件之yii2-date-picker-widget
- Android中实现日期时间选择器(DatePicker和TimePicker)
- yii扩展自带的时间选择器插件cjuidatepicker
- ngCordova插件(5)之DatePicker时间选择器插件的使用
- 日期时间范围选择插件-daterangepicker使用总结
- 第一好用的时间 日期插件(Adding a Timepicker to jQuery UI Datepicker)
- Android中实现日期时间选择器(DatePicker和TimePicker)
- datepicker小插件(日期时间 & 日期 & 月份)
- DatePickerDialog\TimePickerDialog日期时间选择器
- Android DatePicker日期选择器、TimePicker时间选择器的使用
- 一款贴近用户体验的jQuery日期选择插件。这是一款双日历jQuery日期选择时间插件pickerDateRange。
- Android中实现日期时间选择器(DatePicker和TimePicker)
- Android中实现日期时间选择器(DatePicker和TimePicker)
- Bootstrap-datepicker日期时间选择器的常见用法总结
- 在Android EditText中实现日期时间选择器(DatePicker和TimePicker)
- Android中实现日期时间选择器(DatePicker和TimePicker)
- Android中实现日期时间选择器(DatePicker和TimePicker)
- Bootstrap datepicker日期选择器插件使用详解