关于日期控件的使用

PC选择：参考http://www.cnblogs.com/yuhanzhong/archive/2011/08/10/2133276.html 写的很详细

My97DatePicker/WdatePicker.js

示例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 });

秒客网

关于日期控件的使用

相关文章