这个控件关键是它能支持在mobile中显示。iPhone和android中显示可能略有差别。
下图是在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
分享到:
相关推荐
下面小编就为大家带来一篇日期时间范围选择插件:daterangepicker使用总结(必看篇)。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
Bootstrap+daterangepicker日期范围选择器 Bootstrap+daterangepicker日期范围选择器 Bootstrap+daterangepicker日期范围选择器
时间插件 pickerDateRange 唯美时间插件 不解释 就是漂亮
bootstrap 时间插件daterangepicker 4.0+ 添加清除按钮,input获取焦点不默认当前时间,失去焦点和关闭控件不设置默认时间。轻度改版源码。
Jquery多种方式贴近用户体验的日期选择时间插件pickerDateRange
daterangepicker是一个好用的时间范围选择插件,基于jquery,本内容是daterangepicker的中文示例
bootstrap-daterangepicker- 基于 Bootstrap 框架的日期范围选择控件
daterangepicker,日期选择控件,3中选择 1.只到年月日,2.只要时分秒,3全要。 bootstrap2 和3 版本都有,看index.html 引入相应的js,css即可,再复制黏贴核心代码即可! 好用请评价哈
daterangepicker时间插件:使用两个单日历实现范围选择,不使用input,用div实现代码
基于bootstrap3的时间范围选择插件,长得还挺好看的,可以自定义左侧时间范围选择,方便使用,内有demo
这是一个具有以下主要功能的React Native Date Picker: :mobile_phone: 支持iOS和Android :two_o’clock: 3种不同的模式:时间,日期,日期时间 :globe_showing_Europe-Africa: 多种语言 :artist_palette: 可...
这是一款实用的jQuery手机移动端日期时间选择插件,手机日期选择网页特效代码。 js代码 [removed][removed] [removed][removed] [removed][removed] [removed] $(document).ready(function(){ // date ...
时间选择器,可以选择时间段内的时间,有效提高jsp代码
适合酒店住房日期选择的插件jQuery Date Range Picker
微信小程序 -- 年月日时分秒 picker 选择器 基于微信小程序封装 月日时分秒 picker 选择器 封装插件 全局引用
基于bootstrap的日期插件daterangepicker,已汉化,包含一个选择日期段的简易demo,查看更多实例到官网http://www.daterangepicker.com/
时间插件pickerDateRange,简单易懂,自己修改了点!
pickerDateRange日期范围选取 pickerDateRange日期范围选取 pickerDateRange日期范围选取 pickerDateRange日期范围选取
Flutter Cupertino日期选择器 | Flutter Cupertino日期选择器。 用法 1.依赖 将此添加到您程序包的pubspec.yaml文件中: dependencies : flutter_cupertino_date_picker : ^1.0.26+2 2.安装 运行命令: $ ...