幾個前端時間插件總結

幾個前端時間插件總結

總結一下幾款時間插件，分別是
- [ ] 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'})"/>

暫時這這么多。