写在前面的话：
最近在做一个日期范围的功能，研究了一个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）、日期范围限制、开始日期设定、自定义日期格式、时间戳转换、当天的前后若干天返回、时分秒选择、智能响应、自动纠错、节日识别，操作等常规功能外，根据不同的日期格式，显示不同内容，还拥有更多趋近完美的解决方案。
注意事项
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>