【轉】幾個前端時間插件總結

幾個前端時間插件總結

總結一下幾款時間插件，分別是 
- [ ] jeDate 下載地址 
- [ ] bootstrap-datetimepicker 下載地址 
- [ ] My97DatePicker 下載地址 
- [ ] jQuery UI 插件Datepicker 下載地址

并沒有哪款完全超越另外一款，主要還是看是否合適吧。 
首先說一下現在項目就在用的 jeDate吧。

jeDate

 
 
eDate除了包含日期范圍限制、開始日期設定、自定義日期格式、時間戳轉換、當天的前后若干天返回、時分秒選擇、智能響應、自動糾錯、節日識別，操作等常規功能外，還擁有更多趨近完美的解決方案。 
目前只適合PC端。 
因為是最近新出的，功能比較完善，支持風格切換，顯示節假日，還有很多強大的功能。 
 
如上圖所看到的，jeDate 的界面這個樣子，值得一提的是，一般時間的input 輸入框 是設置為只讀的。所以需要其時間插件內部提供清空 調用功能。而下面要說的 bootstrap-datetimepicker 就沒有提供這個功能，需要自己修改實現。 
同其他插件不同的地方在于，下方有時分秒的選項。點擊進入相應的設置界面。需要注意的是 js 中調用方法設置前面后面時間相互制約的限制 
代碼如下

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

 
設置前后時間互相制約的方法

// 初始化第三方插件 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());}); }; 

和上面圖中所看到的，一個主要的缺陷就是沒有原生的清除所選擇日期按鈕。 
我們項目原來用的就是這個插件，后來手動在原生js里面加入了清除按鈕。 
但去除這一點，這個插件也是沒什么問題的。風格是原生的bootstrap 風格，如果需要修改，需要自己個性化定制。 
但其實也給出了沒有清除按鈕的解決辦法，forceParse 方法，設置為true 會強制更改用戶輸入的值，轉變為符合規定的近似的值，也就是說這樣的話不必把輸入框設置成只讀的了。 
點到為止，其他歡迎去看官方API。這個插件總體上來說也是沒什么問題的。

jquery UI 插件Datepicker

目前就我所知，jquery UI 并不是很火的樣子，現在前端這些框架更新迭代都很快，以前一些老項目確實有很多直接基于這種框架去做的，組件規范化。使得我們這些后端人員也能做出像模像樣的前端頁面，但是到現在的互聯網確實不夠用了。這就需要專業的前端人員和設計人員了，畢竟如果只是單獨給企業做項目，更加注重功能的實現，而現在的項目更加注重體驗。

  //等待dom元素加載完畢.       $(function(){           $("#selectDate").datepicker({//添加日期選擇功能           numberOfMonths:1,//顯示幾個月           showButtonPanel:true,//是否顯示按鈕面板           dateFormat: 'yy-mm-dd',//日期格式           clearText:"清除",//清除日期的按鈕名稱           closeText:"關閉",//關閉選擇框的按鈕名稱           yearSuffix: '年', //年的后綴           showMonthAfterYear:true,//是否把月放在年的后面           defaultDate:'2011-03-10',//默認日期           minDate:'2011-03-05',//最小日期           maxDate:'2011-03-20',//最大日期           monthNames: ['一月','二月','三月','四月','五月','六月','七月','八月','九月','十月','十一月','十二月'],           dayNames: ['星期日','星期一','星期二','星期三','星期四','星期五','星期六'],           dayNamesShort: ['周日','周一','周二','周三','周四','周五','周六'],           dayNamesMin: ['日','一','二','三','四','五','六'],           onSelect: function(selectedDate) {//選擇日期后執行的操作               alert(selectedDate);           }           });       });   

如上圖所示，原生的也是沒有日期的清除和時間的限制（這個不確定了）

現在不是經常使用的插件，但如果需要還是沒有問題的，可能需要個性化定制一些。

My97DatePicker

時間比較久遠的一款插件，功能還算豐富，支持日期輸入查詢。 
這里我就不再多說。

起始日期功能 

注意:日期格式必須與 realDateFmt 和 realTimeFmt 一致而不是與 dateFmt 一致

有時在項目中需要選擇生日之類的日期,而默認點開始日期都是當前日期,導致年份選擇非常麻煩,你可以通過起始日期功能加上配置alwaysUseStartDate屬性輕松解決此類問題

日期的范圍限制也算比價靈活

靜態限制 
注意:日期格式必須與 realDateFmt 和 realTimeFmt 一致而不是與 dateFmt 一致

你可以給通過配置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

動態限制

你可以通過系統給出的動態變量,如%y(當前年),%M(當前月)等來限度日期范圍,你還可以通過{}進行表達式運算,如:{%d+1}:表示明天 
動態變量表 
格式 說明 
%y 當前年 
%M 當前月 
%d 當前日 
%ld 本月最后一天 
%H 當前時 
%m 當前分 
%s 當前秒 
{} 運算表達式,如:{%d+1}:表示明天

F{} {}之間是函數可寫自定義JS代碼

示例4-2-1 只能選擇今天以前的日期(包括今天)

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

• 1

• 1

示例4-2-2 使用了運算表達式 只能選擇今天以后的日期(不包括今天)

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

• 1

• 1

示例4-2-3 只能選擇本月的日期1號至本月最后一天

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

• 1

• 1

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

• 1

• 1

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

• 1

• 1

暫時這這么多。

posted on 2017-05-27 14:29 wen.ding 閱讀(234) 評論(0)  編輯  收藏 所屬分類: Best solution