jeDate 日期控件

寫在前面的話：

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

而是本身在代碼裏面作了判斷以下：

 1 // 初始化頁面的選擇框
 2     function initQueryInput(newStartDate,newEndDate) {
 3         $('#queryStartDate').focus(function(){
 4             $('#queryStartDate').jcalendar({
 5                 startDate : newStartDate,
 6                 endDate : newEndDate,
 7                 onpicked:function(){
 8                     var startDateStr=$('#queryStartDate').val();
 9                     var endDateStr=$('#queryEndDate').val();
10                     var startDate=new Date(Date.parse(startDateStr.replace(/-/g, "/")));
11                     var endDate=new Date(Date.parse(endDateStr.replace(/-/g, "/")));
12                     if(startDate.getTime()>=endDate.getTime()){ 13                         $('#queryEndDate').val(startDateStr); 14  } 15                 }
16             });
17         });
18         
19         $('#queryEndDate').focus(function(){
20             $('#queryEndDate').jcalendar({
21                 startDate : newStartDate,
22                 endDate : newEndDate,
23                 onpicked:function(){
24                     var startDateStr=$('#queryStartDate').val();
25                     var endDateStr=$('#queryEndDate').val();
26                     var startDate=new Date(Date.parse(startDateStr.replace(/-/g, "/")));
27                     var endDate=new Date(Date.parse(endDateStr.replace(/-/g, "/")));
28                     if(startDate.getTime()>=endDate.getTime()){ 29                         $('#queryStartDate').val(endDateStr); 30                     }
31                 }
32             });
33         });
34     }
35     
36     //獲取日期
37     function getYears(number){
38         var data=new Date();
39         var year=data.getFullYear()+number;
40         var queryDate=year+"-01-"+"01";
41         return queryDate;
42     }

這種方式也能夠！

 

後面本身又搜到了一個比較好的日曆控件jeDate.js 它是直接就在控件裏面作了判斷，選擇結束日期小於開始日期的都是灰色不能選擇的，感受不錯先整理下來：

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

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

注意事項

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

使用方法

 1 普通方法調用方式
 2 
 3 <script type="text/javascript">
 4 $("#test").jeDate({
 5     format:"YYYY-MM-DD",
 6     isTime:false, 
 7     minDate:"2014-09-19 00:00:00"
 8 })
 9 //或者爲這樣的
10 $.jeDate("#test",{
11     format:"YYYY-MM-DD",
12     isTime:false,
13     minDate:"2014-09-19 00:00:00"
14 })
15     
16 requirejs方法調用方式
17     
18 requirejs.config({
19     paths : {
20         jquery : 'js/jquery-1.7.2',
21         jedate : 'jedate/jquery.jedate'
22     }
23 });
24 require([ 'jquery','jedate'],function($) {
25     $("#test").jeDate({
26         format:"YYYY-MM-DD",
27         isTime:false, 
28         minDate:"2014-09-19 00:00:00"
29     })
30     //或者爲這樣的
31     $.jeDate("#test",{
32         format:"YYYY-MM-DD",
33         isTime:false,
34         minDate:"2014-09-19 00:00:00"
35     }) 
36 })
37 </script>

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

 1 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」 標籤 

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

支持格式類型

一、 YYYY-MM-DD hh:mm:ss
二、 YYYY-MM-DD hh:mm
三、 YYYY-MM-DD
四、 YYYY-MM
五、 YYYY
六、 hh:mm:ss
七、 hh:mm

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

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

 1 【返回日期】
 2 $.nowDate(0), //0表明今天，-1表明昨天，-2表明前天，1表明明天，2表明後天，以此類推
 3 
 4 【時間戳轉換】
 5 $.nowDate("1460641190")  獲得 2016-04-14 21:39:50
 6 
 7 【綁定ID】
 8 <input class="workinput wicon" id="test1" type="text" placeholder="YYYY年MM月DD日 hh:mm:ss" readonly>
 9 <input class="workinput wicon mr25" id="texthms" type="text" placeholder="hh:mm:ss"  readonly>
10 
11 【jeDate調用】
12 //點擊顯示（YYYY年MM月DD日 hh:mm:ss）格式
13 $("#ymd01").jeDate({
14     isinitVal:true,
15     festival: true,
16     format: 'YYYY年MM月DD日 hh:mm:ss'
17 });
18 
19 //點擊顯示（YYYY年MM月DD日 hh:mm）格式
20 $.jeDate("#ymd02",{
21     format:"YYYY年MM月DD日 hh:mm",
22     isTime:true,
23     festival: true,
24     minDate:"2014-09-19 00:00:00"
25 })
26 
27 //點擊顯示 YYYY年格式
28 $("#ymnian").jeDate({
29     isinitVal:true,
30     format:"YYYY年"
31 });
32 
33 //點擊顯示 時分秒（hh:mm:ss）格式
34 $("#hm01").jeDate({
35     isinitVal:true, 
36     format:"hh:mm:ss"
37 });
38 
39 //點擊顯示 時分（hh:mm）格式
40 $.jeDate("#hm02",{
41     format:"hh:mm"
42 });

日期風格樣式

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

 1 風格樣式（jedateblue、jedatered、jedategreen）
 2 //藍色風格
 3 $("#skinblue").jeDate({
 4     isinitVal:true,
 5     skinCell:"jedateblue",
 6     format: 'YYYY年MM月DD日 hh:mm:ss'
 7 });
 8 //紅色風格
 9 $.jeDate("#skinred",{
10     skinCell:"jedatered",
11     format: 'YYYY年MM月DD日 hh:mm:ss'
12 });
13 //綠色風格
14 $("#skingreen").jeDate({
15     skinCell:"jedategreen",
16     format: 'YYYY年MM月DD日 hh:mm:ss'
17 });

開始日期與結束日期

 

 1 【自定義日期格式】
 2 <span class="wstxt">開始日期：</span><input type="text" class="workinput wicon mr25" id="inpstart" readonly>
 3 <span class="wstxt">結束日期：</span><input type="text" class="workinput wicon mr25" id="inpend" readonly>
 4 <script>
 5 var start = {
 6     format: 'YYYY-MM-DD hh:mm:ss',
 7     minDate: $.nowDate(0), //設定最小日期爲當前日期
 8     isinitVal:true,
 9     festival:true,
10     ishmsVal:false,
11     maxDate: '2099-06-30 23:59:59', //最大日期
12     choosefun: function(elem,datas){
13         end.minDate = datas; //開始日選好後，重置結束日的最小日期
14     }
15 };
16 var end = {
17     format: 'YYYY年MM月DD日 hh:mm:ss',
18     minDate: $.nowDate(0), //設定最小日期爲當前日期
19     festival:true,
20     maxDate: '2099-06-16 23:59:59', //最大日期
21     choosefun: function(elem,datas){
22         start.maxDate = datas; //將結束日的初始值設定爲開始日的最大日期
23     }
24 };
25 $('#inpstart').jeDate(start);
26 $('#inpend').jeDate(end);
27 
28 //或者是
29 $.jeDate('#inpstart',start);
30 $.jeDate('#inpend',end);
31 </script>