jeDate 日期控件

寫在前面的話：

最近在做一個日期范圍的功能，研究了一個12306網站的日期范圍選擇，他用的是jcalendar.js,沒有直接在日歷插件里面做判斷開始時間小於結束時間

而是自己在代碼里面做了判斷如下：

// 初始化頁面的選擇框
    function initQueryInput(newStartDate,newEndDate) {
        $('#queryStartDate').focus(function(){
            $('#queryStartDate').jcalendar({
                startDate : newStartDate,
                endDate : newEndDate,
                onpicked:function(){
                    var startDateStr=$('#queryStartDate').val();
                    var endDateStr=$('#queryEndDate').val();
                    var startDate=new Date(Date.parse(startDateStr.replace(/-/g, "/")));
                    var endDate=new Date(Date.parse(endDateStr.replace(/-/g, "/")));
                    if(startDate.getTime()>=endDate.getTime()){ 13                         $('#queryEndDate').val(startDateStr); 14  } 15                 }
            });
        });
        
        $('#queryEndDate').focus(function(){
            $('#queryEndDate').jcalendar({
                startDate : newStartDate,
                endDate : newEndDate,
                onpicked:function(){
                    var startDateStr=$('#queryStartDate').val();
                    var endDateStr=$('#queryEndDate').val();
                    var startDate=new Date(Date.parse(startDateStr.replace(/-/g, "/")));
                    var endDate=new Date(Date.parse(endDateStr.replace(/-/g, "/")));
                    if(startDate.getTime()>=endDate.getTime()){ 29                         $('#queryStartDate').val(endDateStr); 30                     }
                }
            });
        });
    }
    
    //獲取日期
    function getYears(number){
        var data=new Date();
        var year=data.getFullYear()+number;
        var queryDate=year+"-01-"+"01";
        return queryDate;
    }

這種方式也可以！

 

后面自己又搜到了一個比較好的日歷控件jeDate.js 它是直接就在控件里面做了判斷，選擇結束日期小於開始日期的都是灰色不能選擇的，感覺不錯先整理下來：

官網：http://www.jayui.com/jedate/index.html#13

jeDate除了包含初始化日期加減N、日期標注點、輸入框可以直接輸入時間、設定年月（YYYY-MM）、日期范圍限制、開始日期設定、自定義日期格式、時間戳轉換、當天的前后若干天返回、時分秒選擇、智能響應、自動糾錯、節日識別，操作等常規功能外，根據不同的日期格式，顯示不同內容，還擁有更多趨近完美的解決方案。

注意事項

1、解壓后，將jedate整個文件放至您項目的任意目錄
2、控件不支持選周
瀏覽器兼容，下面是我們的主要兼容目標1、IE8 或者 IE8以上 (Windows), IE8以下瀏覽器不兼容
2、Safari (Mac)
3、Chrome (Windows, Mac, Linux)
4、Firefox (Windows, Mac, Linux)
5、谷歌內核(webkit)瀏覽器，如360瀏覽器，搜狗瀏覽器，QQ瀏覽器等

使用方法

普通方法調用方式

<script type="text/javascript">
$("#test").jeDate({
    format:"YYYY-MM-DD",
    isTime:false, 
    minDate:"2014-09-19 00:00:00"
})
//或者為這樣的
$.jeDate("#test",{
    format:"YYYY-MM-DD",
    isTime:false,
    minDate:"2014-09-19 00:00:00"
})
    
requirejs方法調用方式
    
requirejs.config({
    paths : {
        jquery : 'js/jquery-1.7.2',
        jedate : 'jedate/jquery.jedate'
    }
});
require([ 'jquery','jedate'],function($) {
    $("#test").jeDate({
        format:"YYYY-MM-DD",
        isTime:false, 
        minDate:"2014-09-19 00:00:00"
    })
    //或者為這樣的
    $.jeDate("#test",{
        format:"YYYY-MM-DD",
        isTime:false,
        minDate:"2014-09-19 00:00:00"
    }) 
})
</script>

核心方法（配置）：jeDate(options)

 options是一個對象，它包含了以下key: '默認值' 

skinCell:"jedateblue",                //日期風格樣式，默認藍色
format:"YYYY-MM-DD hh:mm:ss",         //日期格式
minDate:"1900-01-01 00:00:00",        //最小日期
maxDate:"2099-12-31 23:59:59",        //最大日期
insTrigger:true,                      //是否為內部觸發事件，默認為內部觸發事件
startMin:"",                          //清除日期后返回到預設的最小日期
startMax:"",                          //清除日期后返回到預設的最大日期
isinitVal:false,                      //是否初始化時間，默認不初始化時間
initAddVal:[0],                       //初始化時間，加減 天 時 分
isTime:true,                          //是否開啟時間選擇
hmsLimit:true,                        //時分秒限制
ishmsVal:true,                        //是否限制時分秒輸入框輸入，默認可以直接輸入時間
isClear:true,                         //是否顯示清空
isToday:true,                         //是否顯示今天或本月
clearRestore:true,                    //清空輸入框，返回預設日期，輸入框非空的情況下有效
festival:false,                       //是否顯示農歷節日
fixed:true,                           //是否靜止定位，為true時定位在輸入框，為false時居中定位
zIndex:2099,                          //彈出層的層級高度
marks:null,                           //給日期做標注
choosefun:function(elem, val) {},     //選中日期后的回調, elem當前輸入框ID, val當前選擇的值
clearfun:function(elem, val) {},      //清除日期后的回調, elem當前輸入框ID, val當前選擇的值
okfun:function(elem, val) {},         //點擊確定后的回調, elem當前輸入框ID, val當前選擇的值
success:function(elem) {},            //層彈出后的成功回調方法, elem當前輸入框ID

使用對象

 可以使用在文本框與非文本框上：如 input 、 DIV，建議使用 “input” 標簽 

<input id="indate" type="text" placeholder="請選擇"  readonly>
<div id="dateinfo"><div>

支持格式類型

1、 YYYY-MM-DD hh:mm:ss
2、 YYYY-MM-DD hh:mm
3、 YYYY-MM-DD
4、 YYYY-MM
5、 YYYY
6、 hh:mm:ss
7、 hh:mm

功能演示（更多請參考官網）

 當格式為 hh:mm:ss 或者 hh:mm 的時候，今天按鈕就被隱藏了，沒有秒的話就只顯示時分，沒有只顯示時的！

【返回日期】
$.nowDate(0), //0代表今天，-1代表昨天，-2代表前天，1代表明天，2代表后天，以此類推

【時間戳轉換】
$.nowDate("1460641190")  得到 2016-04-14 21:39:50

【綁定ID】
<input class="workinput wicon" id="test1" type="text" placeholder="YYYY年MM月DD日 hh:mm:ss" readonly>
<input class="workinput wicon mr25" id="texthms" type="text" placeholder="hh:mm:ss"  readonly>

【jeDate調用】
//點擊顯示（YYYY年MM月DD日 hh:mm:ss）格式
$("#ymd01").jeDate({
    isinitVal:true,
    festival: true,
    format: 'YYYY年MM月DD日 hh:mm:ss'
});

//點擊顯示（YYYY年MM月DD日 hh:mm）格式
$.jeDate("#ymd02",{
    format:"YYYY年MM月DD日 hh:mm",
    isTime:true,
    festival: true,
    minDate:"2014-09-19 00:00:00"
})

//點擊顯示 YYYY年格式
$("#ymnian").jeDate({
    isinitVal:true,
    format:"YYYY年"
});

//點擊顯示 時分秒（hh:mm:ss）格式
$("#hm01").jeDate({
    isinitVal:true, 
    format:"hh:mm:ss"
});

//點擊顯示 時分（hh:mm）格式
$.jeDate("#hm02",{
    format:"hh:mm"
});

日期風格樣式

skinCell，風格調用，CSS中增加了3種風格（紅、綠、藍）

風格樣式（jedateblue、jedatered、jedategreen）
//藍色風格
$("#skinblue").jeDate({
    isinitVal:true,
    skinCell:"jedateblue",
    format: 'YYYY年MM月DD日 hh:mm:ss'
});
//紅色風格
$.jeDate("#skinred",{
    skinCell:"jedatered",
    format: 'YYYY年MM月DD日 hh:mm:ss'
});
//綠色風格
$("#skingreen").jeDate({
    skinCell:"jedategreen",
    format: 'YYYY年MM月DD日 hh:mm:ss'
});

開始日期與結束日期

 

【自定義日期格式】
<span class="wstxt">開始日期：</span><input type="text" class="workinput wicon mr25" id="inpstart" readonly>
<span class="wstxt">結束日期：</span><input type="text" class="workinput wicon mr25" id="inpend" readonly>
<script>
var start = {
    format: 'YYYY-MM-DD hh:mm:ss',
    minDate: $.nowDate(0), //設定最小日期為當前日期
    isinitVal:true,
    festival:true,
    ishmsVal:false,
    maxDate: '2099-06-30 23:59:59', //最大日期
    choosefun: function(elem,datas){
        end.minDate = datas; //開始日選好后，重置結束日的最小日期
    }
};
var end = {
    format: 'YYYY年MM月DD日 hh:mm:ss',
    minDate: $.nowDate(0), //設定最小日期為當前日期
    festival:true,
    maxDate: '2099-06-16 23:59:59', //最大日期
    choosefun: function(elem,datas){
        start.maxDate = datas; //將結束日的初始值設定為開始日的最大日期
    }
};
$('#inpstart').jeDate(start);
$('#inpend').jeDate(end);

//或者是
$.jeDate('#inpstart',start);
$.jeDate('#inpend',end);
</script>