æ€È»“一下几‹Æ¾æ—¶é—´æ’ä»Óž¼Œåˆ†åˆ«æ˜?nbsp;
- [ ] jeDate ä¸‹è²åœ°å€ 
- [ ] bootstrap-datetimepicker ä¸‹è²åœ°å€ 
- [ ] My97DatePicker ä¸‹è²åœ°å€ 
- [ ] jQuery UI 插äšgDatepicker ä¸‹è²åœ°å€

òq¶æ²¡æœ‰å“ª‹Æ‘Ö®Œå…¨è¶…­‘Šå¦å¤–一‹Æ¾ï¼Œä¸»è¦˜q˜æ˜¯çœ‹æ˜¯å¦åˆé€‚吧ã€?nbsp;
首先说一下现在项目就在用�nbsp;jeDate吧�/p>

jeDate

 
 
eDate除了包含日期范围限制、开始日期设定、自定义日期格式、时间戳转换、当天的前后若干天返回、时分秒选择、智能响应、自动纠错、节日识别，操作½{‰å¸¸è§„功能外åQŒè¿˜æ‹¥æœ‰æ›´å¤š­‘‹è¿‘完美的解å†Ïx–¹æ¡ˆã€?nbsp;
目前只适合PC端�nbsp;
å› äؓ是最˜q‘新出的åQŒåŠŸèƒ½æ¯”较完善，支持风格切换åQŒæ˜¾½Cø™Š‚假日åQŒè¿˜æœ‰å¾ˆå¤šå¼ºå¤§çš„功能ã€?nbsp;
 
如上图所看到的，jeDate 的界面这个样子，值得一提的是，一般时间的input 输入æ¡?是设¾|®äؓ只读的。所以需要其旉™—´æ’äšg内部提供清空 è°ƒç”¨åŠŸèƒ½ã€‚而下面要说的 bootstrap-datetimepicker ž®±æ²¡æœ‰æä¾›è¿™ä¸ªåŠŸèƒ½ï¼Œéœ€è¦è‡ªå·×ƒ¿®æ”¹å®žçŽ°ã€?nbsp;
同其他插件不同的地方在于åQŒä¸‹æ–ÒŽœ‰æ—¶åˆ†¿U’的选项。点击进入相应的讄¡½®ç•Œé¢ã€‚需要注意的æ˜?js 中调用方法设¾|®å‰é¢åŽé¢æ—¶é—´ç›¸äº’制¾U¦çš„限制 
代码如下

var startDate = jeDate({     dateCell:"#start-date",     format:"YYYY-MM-DD hh:mm:ss",     isTime:true,     isinitVal:true,     minDate:jeDate.now(0),     choosefun:function(val) {         endDate.config.minDate = val;         requireDate.config.minDate = val;         $("#start-date").blur();     },     okfun:function(val) {         endDate.config.minDate = val;         requireDate.config.minDate = val;         $("#start-date").blur();     } }); var endDate = jeDate({     dateCell:"#end-date",     format:"YYYY-MM-DD hh:mm:ss",     isTime:true,     minDate:jeDate.now(0),     choosefun:function(val) {         startDate.config.maxDate = val;         $("#end-date").blur();     },     okfun:function(val) {         startDate.config.maxDate = val;         $("#end-date").blur();     } });  var requireDate = jeDate({     dateCell:"#require-date",     format:"YYYY-MM-DD",     isTime:false,     minDate:jeDate.now(0) }); 

具体参考相关的API

bootstrap-datetimepicker

 
讄¡½®å‰åŽæ—‰™—´äº’相制约的方æ³?/p>

// 初始化第三方插äšg ArticleManager.prototype.initVendorComponent = function() {     // 初始化时间插ä»?    // 讄¡½®åªèƒ½é€‰ä»Šå¤©ä»¥å‰çš„æ—‰™—´     $('#createBeginDate').datetimepicker(datetimePickerOptions).on('show',function(e) {             $('#createBeginDate').datetimepicker('setEndDate',new Date());});     $('#createBeginDate').datetimepicker(datetimePickerOptions).on('changeDate',function(e) {             $('#createBeginDate').datetimepicker('setEndDate',new Date());             $('#createEndDate').datetimepicker('setStartDate',$(this).val());});     // 讄¡½®åªèƒ½é€‰ä»Šå¤©ä»¥å‰çš„æ—‰™—´     $('#createEndDate').datetimepicker(datetimePickerOptions).on('show',function(e) {                 $('#createEndDate').datetimepicker('setEndDate', new Date());             });     $('#createEndDate').datetimepicker(datetimePickerOptions).on('changeDate',function(e) {                 $('#createEndDate').datetimepicker('setEndDate', new Date());                 $('#createBeginDate').datetimepicker('setStartDate',$(this).val());}); }; 

和上面图中所看到的，一个主要的¾~ºé™·ž®±æ˜¯æ²¡æœ‰åŽŸç”Ÿçš„清除所选择日期按钮ã€?nbsp;
我们™å¹ç›®åŽŸæ¥ç”¨çš„ž®±æ˜¯˜q™ä¸ªæ’äšgåQŒåŽæ¥æ‰‹åŠ¨åœ¨åŽŸç”Ÿjs里面加入了清除按钮ã€?nbsp;
但去除这一点，˜q™ä¸ªæ’äšg也是没什么问题的。风格是原生的bootstrap 风格åQŒå¦‚果需要修改，需要自å·×ƒ¸ªæ€§åŒ–定制ã€?nbsp;
但其实也¾l™å‡ºäº†æ²¡æœ‰æ¸…除按钮的解决办法åQ?strong style="margin: 0px; padding: 0px;">forceParse æ–ÒŽ³•åQŒè®¾¾|®äØ“true 会强制更改用戯‚¾“入的å€û|¼Œè½¬å˜ä¸ºç¬¦åˆè§„定的˜q‘似的å€û|¼Œä¹Ÿå°±æ˜¯è¯´˜q™æ ·çš„话不必把输入框讄¡½®æˆåªè¯Èš„了ã€?nbsp;
点到为止åQŒå…¶ä»–欢˜qŽåŽ»çœ‹å®˜æ–¹API。这个插件æ€ÖM½“上来说也是没什么问题的ã€?/p>

jquery UI 插äšgDatepicker

目前ž®±æˆ‘所知，jquery UI òq¶ä¸æ˜¯å¾ˆç«çš„样子åQŒçŽ°åœ¨å‰ç«¯è¿™äº›æ¡†æž¶æ›´æ–°è„P代都很快åQŒä»¥å‰ä¸€äº›è€é¡¹ç›®ç¡®å®žæœ‰å¾ˆå¤šç›´æŽ¥åŸÞZºŽ˜q™ç§æ¡†æž¶åŽÕdšçš„，¾l„äšg规范化。ä‹É得我们这些后端äh员也能做出像模像æ ïLš„前端™åµé¢åQŒä½†æ˜¯åˆ°çŽ°åœ¨çš„互联网¼‹®å®žä¸å¤Ÿç”¨äº†ã€‚è¿™ž®±éœ€è¦ä¸“业的前端人员和设计äh员了åQŒæ¯•ç«Ÿå¦‚果只是单独给企业做项目，更加注重功能的实玎ͼŒè€ŒçŽ°åœ¨çš„™å¹ç›®æ›´åŠ æ³¨é‡ä½“验ã€?/p>

  //½{‰å¾…dom元素加蝲完毕.       $(function(){           $("#selectDate").datepicker({//æ·ÕdŠ æ—¥æœŸé€‰æ‹©åŠŸèƒ½           numberOfMonths:1,//昄¡¤ºå‡ ä¸ªæœ?          showButtonPanel:true,//是否昄¡¤ºæŒ‰é’®é¢æ¿           dateFormat: 'yy-mm-dd',//日期格式           clearText:"清除",//清除日期的按钮名¿U?          closeText:"关闭",//关闭选择框的按钮名称           yearSuffix: 'òq?, //òq´çš„后缀           showMonthAfterYear:true,//是否把月攑֜¨òq´çš„后面           defaultDate:'2011-03-10',//默认日期           minDate:'2011-03-05',//最ž®æ—¥æœ?          maxDate:'2011-03-20',//最大日æœ?          monthNames: ['一æœ?,'二月','三月','四月','五月','六月','七月','八月','九月','十月','十一æœ?,'十二æœ?],           dayNames: ['星期æ—?,'星期一','星期äº?,'星期ä¸?,'星期å›?,'星期äº?,'星期å…?],           dayNamesShort: ['周日','周一','周二','周三','周四','周五','周六'],           dayNamesMin: ['æ—?,'一','äº?,'ä¸?,'å›?,'äº?,'å…?],           onSelect: function(selectedDate) {//选择日期后执行的操作               alert(selectedDate);           }           });       });   

如上图所½Cºï¼ŒåŽŸç”Ÿçš„也是没有日期的清除和时间的限制åQˆè¿™ä¸ªä¸¼‹®å®šäº†ï¼‰

现在不是¾lå¸¸ä½¿ç”¨çš„插ä»Óž¼Œä½†å¦‚果需要还是没有问题的åQŒå¯èƒ½éœ€è¦ä¸ªæ€§åŒ–定制一些ã€?/p>

My97DatePicker

æ—‰™—´æ¯”较久远的一‹Æ¾æ’ä»Óž¼ŒåŠŸèƒ½˜q˜ç®—丰富åQŒæ”¯æŒæ—¥æœŸè¾“入查询ã€?nbsp;
˜q™é‡Œæˆ‘就不再多说ã€?/p>

起始日期功能 

注意:日期格式必须�realDateFmt �realTimeFmt 一致而不是与 dateFmt 一�/p>

有时在项目中需要选择生日之类的日æœ?而默认点开始日期都是当前日æœ?å¯ÆD‡´òq´ä†¾é€‰æ‹©éžå¸¸éºÈƒ¦,你可以通过起始日期功能加上配置alwaysUseStartDate属性轻松解å†Ïx­¤¾c»é—®é¢?/p>

日期的范围限制也½Ž—比ä»ïLµ‹z?/p>

静态限�nbsp;
注意:日期格式必须�realDateFmt �realTimeFmt 一致而不是与 dateFmt 一�/p>

你可以给通过配置minDate(最ž®æ—¥æœ?,maxDate(最大日æœ?为静态日期å€?来限定日期的范围

<input type="text" class="Wdate" id="d414" onfocus="WdatePicker({dateFmt:'H:mm:ss',minDate:'8:00:00',maxDate:'11:30:00'})"/>

• 1

• 1

动态限�/p>

你可以通过¾pȝ»Ÿ¾l™å‡ºçš„动态变é‡?å¦?y(当前òq?,%M(当前æœ?½{‰æ¥é™åº¦æ—¥æœŸèŒƒå›´,你还可以通过{}˜q›è¡Œè¡¨è¾¾å¼è¿½Ž?å¦?{%d+1}:表示明天 
动态变量表 
格式 说明 
%y 当前òq?nbsp;
%M 当前�nbsp;
%d 当前�nbsp;
%ld 本月最后一�nbsp;
%H 当前�nbsp;
%m 当前�nbsp;
%s 当前¿U?nbsp;
{} ˜qç®—表达å¼?å¦?{%d+1}:表示明天

F{} {}之间是函数可写自定义JS代码

½CÞZ¾‹4-2-1 只能选择今天以前的日æœ?包括今天)

<input id="d421" class="Wdate" type="text" onfocus="WdatePicker({skin:'whyGreen',maxDate:'%y-%M-%d'})"/>

• 1

• 1

½CÞZ¾‹4-2-2 使用了运½Ž—表辑ּ 只能选择今天以后的日æœ?不包括今å¤?

<input id="d422" class="Wdate" type="text" onfocus="WdatePicker({minDate:'%y-%M-{%d+1}'})"/>

• 1

• 1

½CÞZ¾‹4-2-3 只能选择本月的日æœ?可‚‡³æœ¬æœˆæœ€åŽä¸€å¤?/p>

<input id="d423" class="Wdate" type="text" onfocus="WdatePicker({minDate:'%y-%M-01',maxDate:'%y-%M-%ld'})"/>

• 1

• 1

½CÞZ¾‹4-2-4 只能选择今天7:00:00è‡Ïx˜Žå¤?1:00:00çš„æ—¥æœ?/p>

<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'})"/>

• 1

• 1

½CÞZ¾‹4-2-5 使用了运½Ž—表辑ּ 只能选择 20ž®æ—¶å‰?è‡?30ž®æ—¶å?çš„æ—¥æœ?/p>

<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'})"/>

• 1

• 1

æš‚æ—¶˜q™è¿™ä¹ˆå¤šã€?/p>