PC选择:参考http://www.cnblogs.com/yuhanzhong/archive/2011/08/10/2133276.html 写的很详细
My97DatePicker/WdatePicker.js
<input id="d321" class="Wdate" type="text" onfocus="WdatePicker()"/>
<input id="d322" class="Wdate" type="text" onfocus="WdatePicker({skin:'whyGreen'})"/>
示例4-1-1 限制日期的范围是 2006-09-10到2008-12-20
<input id="d411" class="Wdate" type="text" onfocus="WdatePicker({skin:'whyGreen',minDate:'2006-09-10',maxDate:'2008-12-20'})"/>
示例4-1-2 限制日期的范围是 2008-3-8 11:30:00 到 2008-3-10 20:59:30
<input type="text" class="Wdate" id="d412" onfocus="WdatePicker({skin:'whyGreen',dateFmt:'yyyy-MM-dd HH:mm:ss',minDate:'2008-03-08 11:30:00',maxDate:'2008-03-10 20:59:30'})" value="2008-03-09 11:00:00"/>
示例4-1-4 限制日期的范围是 8:00:00 到 11:30:00
<input type="text" class="Wdate" id="d414" onfocus="WdatePicker({dateFmt:'H:mm:ss',minDate:'8:00:00',maxDate:'11:30:00'})"/>
可以给通过配置minDate(最小日期),maxDate(最大日期)为静态日期值,来限定日期的范围
示例4-1-1 限制日期的范围是 2006-09-10到2008-12-20
<input id="d411" class="Wdate" type="text" onfocus="WdatePicker({skin:'whyGreen',minDate:'2006-09-10',maxDate:'2008-12-20'})"/>
示例4-2-1 只能选择今天以前的日期(包括今天)
<input id="d421" class="Wdate" type="text" onfocus="WdatePicker({skin:'whyGreen',maxDate:'%y-%M-%d'})"/>
示例4-2-2 使用了运算表达式只能选择今天以后的日期(不包括今天)
<input id="d422" class="Wdate" type="text" onfocus="WdatePicker({minDate:'%y-%M-#{%d+1}'})"/>
示例4-2-3 只能选择本月的日期1号至本月最后一天
<input id="d423" class="Wdate" type="text" onfocus="WdatePicker({minDate:'%y-%M-01',maxDate:'%y-%M-%ld'})"/>
示例4-2-4 只能选择今天7:00:00至明天21:00:00的日期
<input id="d424" class="Wdate" type="text" onfocus="WdatePicker({dateFmt:'yyyy-M-d H:mm:ss',minDate:'%y-%M-%d 7:00:00',maxDate:'%y-%M-#{%d+1} 21:00:00'})"/>
示例4-2-5 使用了运算表达式只能选择 20小时前至 30小时后的日期
<input id="d425" class="Wdate" type="text" onClick="WdatePicker({dateFmt:'yyyy-MM-dd HH:mm',minDate:'%y-%M-%d #{%H-20}:%m:%s',maxDate:'%y-%M-%d #{%H+30}:%m:%s'})"/>
WAP 选择:
具体也可以参考这个 http://www.lorna.com.cn/Articles/Index/6f4bfd76-3a1a-4d01-95e6-165f67c3a313
mobiscroll.core-2.5.2.js
mobiscroll.core-2.5.2-zh.js
mobiscroll.core-2.5.2.css
mobiscroll.animation-2.5.2.css
mobiscroll.datetime-2.5.1.js
mobiscroll.datetime-2.5.1-zh.js
mobiscroll.android-ics-2.5.2.css
mobiscroll.android-ics-2.5.2.js
新建一个js文件 dateUtils.js
1 $(function () { 2 var currYear = (new Date()).getFullYear(); 3 var _g_currentdate = new Date(); 4 var _g_year = _g_currentdate.getFullYear(); 5 var _g_month = _g_currentdate.getMonth(); 6 var _g_day = _g_currentdate.getDate(); 7 var endDateDef = new Date(_g_year, _g_month, _g_day+1); 8 var opt={}; 9 //显示今天的日期 minDate 显示的不能小于的日期 ,maxDate 显示不能大于的日期 10 opt.date = {preset : 'date', minDate: _g_currentdate, maxDate: endDateDef};//日期格式:年月日 11 //显示明天的日期 12 opt.tomDte = {preset : 'date', minDate: endDateDef}; 13 opt.datetime = {preset : 'datetime'};//日期格式 : 年月日 时分秒 14 opt.time = {preset : 'time'};//日期格式 : 时分 15 opt.default = { 16 theme: 'android-ics light', //皮肤样式 17 display: 'modal', //显示方式 18 mode: 'scroller', //日期选择模式 19 lang:'zh', 20 startYear:currYear, //开始年份 21 endYear:currYear + 10//结束年份 22 }; 23 24 $("#startDate").scroller($.extend(opt['date'], opt['default'])); 25 $("#endDate").scroller($.extend(opt['tomDte'], opt['default'])); 26 });