幾個前端時間插件總結

總結一下幾款時間插件，分別是
- [ ] jeDate 手冊http://www.jemui.com/jedate/
- [ ] bootstrap-datetimepicker 下載地址
- [ ] My97DatePicker 下載地址
- [ ] jQuery UI 插件Datepicker 下載地址

手機端的：http://blog.csdn.net/libin_1/article/details/50706030#comments

并沒有哪款完全超越另外一款，主要還是看是否合適吧。
首先說一下現在項目就在用的 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) {//選擇日期后執行的操作 ; } }); });

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

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

My97DatePicker

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

起始日期功能

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

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

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

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

你可以給通過配置minDate(最小日期),maxDate(最大日期)為靜態日期值,來限定日期的范圍

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 只能選擇今天以前的日期(包括今天)

"d421" class="Wdate" type="text" οnfοcus="WdatePicker({skin:'whyGreen',maxDate:'%y-%M-%d'})"/>

• 1

• 1

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

"d422" class="Wdate" type="text" οnfοcus="WdatePicker({minDate:'%y-%M-{%d+1}'})"/>

• 1

• 1

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

"d423" class="Wdate" type="text" οnfοcus="WdatePicker({minDate:'%y-%M-01',maxDate:'%y-%M-%ld'})"/>

• 1

• 1

示例4-2-4 只能選擇今天7:00:00至明天21:00:00的日期

"d424" class="Wdate" type="text" οnfοcus="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小時后 的日期

"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

暫時這這么多。

文章轉載地址：http://blog.csdn.net/kanxingwang/article/details/51613050

轉載于:https://www.cnblogs.com/linewman/p/9918291.html

總結

以上是生活随笔為你收集整理的几个前端时间插件总结的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。