首页 > 代码库 > jeDate 日期控件
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=http://www.mamicode.com/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）、日期范围限制、开始日期设定、自定义日期格式、时间戳转换、当天的前后若干天返回、时分秒选择、智能响应、自动纠错、节日识别，操作等常规功能外，根据不同的日期格式，显示不同内容，还拥有更多趋近完美的解决方案。
注意事项
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浏览器等
使用方法
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>
支持格式类型
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 的时候，今天按钮就被隐藏了，没有秒的话就只显示时分，没有只显示时的！
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>
jeDate 日期控件
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。