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()){

                         $('#queryEndDate').val(startDateStr);

                     }

                 }

             });

         });

         $('#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()){

                         $('#queryStartDate').val(endDateStr);

                     }

                 }

             });

         });

     }

     //获取日期

     function getYears(number){

         var data=new Date();

         var year=data.getFullYear()+number;

         var queryDate=year+"-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>

正文

注意事项

使用方法

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

使用对象

支持格式类型

功能演示（更多请参考官网）

日期风格样式

开始日期与结束日期

相关阅读

html5时间插件改格式，HTML时间控件半小时

wincc控件设计模式，wincc画面窗口控件在哪里

jquery图片控件，jquery图表插件

js调用手机底层日期控件，js时间控件年月日小时

go语言报表控件，go语言 exe

phpcms日期，php日期控件

js子控件属性赋值，js自定义控件

js判断某个控件为空，js判断数据是否为空

目录[+]

注意事项

使用方法

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

使用对象

支持格式类型

功能演示（更多请参考官网）

日期风格样式

开始日期与结束日期

相关阅读

html5时间插件改格式，HTML时间控件 半小时

wincc控件设计模式，wincc画面窗口控件在哪里

jquery图片控件，jquery图表插件

js调用手机底层日期控件，js时间控件年月日小时

go语言报表控件，go语言 exe

phpcms日期，php日期控件

js子控件属性赋值，js自定义控件

js判断某个控件为空，js判断数据是否为空

目录[+]

html5时间插件改格式，HTML时间控件半小时