幾個前端時間插件總結
總結一下幾款時間插件，分別是
- [ ] 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'})"/>
動態限制
你可以通過系統給出的動態變量,如%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'})"/>
示例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'})"/>
暫時這這么多。
梅花香自苦寒來