写在前面的话：
最近在做一个日期范围的功能，研究了一个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>
时间： 2024-10-12 21:34:12