写在前面的话:

最近在做一个日期范围的功能,研究了一个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 日期控件的更多相关文章

  1. jeDate日期控件

    http://www.jayui.com/jedate/     这是日期控件官网,可以去里面下载使用 前台 <%@ Page Language="C#" AutoEvent ...

  2. AngularJS之jeDate日期控件基本使用

    业务背景: 初学AngularJs,最近一段时间,因业务需求,要求日期选择带有快捷键.时分秒等.鉴于AngularJS组件库ui-bootstrap没有此功能,找了一款基于原生JS实现的插件-jeDa ...

  3. jeDate日期控件精确到秒

    案例下载 链接: https://pan.baidu.com/s/1m7eEW6K6Bt1t-0OjVY_Wxw 密码: xmei <script type="text/javascr ...

  4. bootstrop 日期控件 datepicker被弹出框dialog覆盖的解决办法

    筒子们在使用bootstrap的日期控件(datepicker , 现在官网提供的名称叫 datetimepicker)时可能会遇到如上图的问题这是啥原因造成的呢? 答案很简单时输出的优先级造成的(z ...

  5. my97DatePicker日期控件——日期输入框联动,使用focus使第二个输入框没展示出日期控件

    描述问题场景: 1.jquery使用的版本是jquery-1.7.2.min.js 2.代码不是写在页面上的,是通过事件后追加的 <!DOCTYPE html> <html> ...

  6. 怎样使用My97日期控件

    有网友说无法使用My97日期控件,Insus.NET测试一下,是可以正常使用了. 在ASP.NET MVC环境中测试. 去官网下载My97日期控件程序包: 下载解压之后,把程序的目录拷贝至projec ...

  7. jQuery Datepicker日期控件

    datepicker可以为bootstrap添加一个事件选择控件,适用于任何需要调用的场合,支持多种事件格式输出(比如:dd, d, mm, m, yyyy, yy等),是制作网页不可缺失的插件. R ...

  8. jQuery LayDate 日期控件

    她基于原生JavaScript精心雕琢,兼容了包括IE6在内的所有主流浏览器.她具备优雅的内部代码,良好的性能体验,和完善的皮肤体系,并且完全开源,你可以任意获取开发版源代码,一扫某些传统日期控件的封 ...

  9. JQuery datepicker 日期控件设置

    datepicker控件可通过参数设置进行语言切换,以下可实现,系统所有日期控件默认为中文,在特定页面或者特定条件下可切换成英语!~ HTML: <!DOCTYPE html> <h ...

随机推荐

  1. Struts2学习(二)———— 表单参数自动封装和参数类型自动转换

    前篇文章对struts2的一个入门,重点是对struts2的架构图有一个大概的了解即可,之后的几篇文章,就是细化struts2,将struts2中的各种功能进行梳理,其实学完之后,对struts2的使 ...

  2. #6 Python数据类型及运算

    前言 前文讲述了Python的输入输出以及变量的相关知识点,本节将探讨Python的数据类型以及数据之间的运算方式! 一.Python数据类型 上一节弄清了变量,其实变量所指向的值是有自己独特的数据类 ...

  3. Python 判断文件/目录是否存在

    使用 os 模块 判断文件是否存在 os.path.isfile(path) 判断目录是否存在 os.path.isdir(path) 判断路径是否存在 # 使用 path 模块 os.path.ex ...

  4. ZooKeeper 分布式锁

    在Redis分布式锁一文中, 作者介绍了如何使用Redis开发分布式锁. Redis分布式锁具有轻量高吞吐量的特点,但是一致性保证较弱.我们可以使用Zookeeper开发分布式锁,来满足对高一致性的要 ...

  5. Linux tar 命令用法

    tar 命令可以为linux的文件和目录创建档案.利用 tar,可以为某一特定文件创建档案(备份文件),也可以在档案中改变文件,或者向档案中加入新的文件.tar 最初被用来在磁带上创建档案,现在,用户 ...

  6. python中的函数对象的内存地址是多少

    今天和同学讨论一个问题,发现了函数的内存地址和我想象的不一样. 我以为同一个函数,假如给的参数不一样,那么这两个函数的id就不一样. 然后经过实验,发现python为了便于管理函数,所有的函数都放在同 ...

  7. JavaSE 常用类与其方法

    1.基本数据类型比较用:== 2.引用数据类型比较用:equals方法 如果引用数据类型使用==比较的话,比较的是地址值 toString类 对象调用toString()需要重写本方法: 在封装类中, ...

  8. linux shell脚本之-变量极速入门与进阶(2)

    1,$$:显示当前的进程id号 ghostwu@dev:~/linux/shell/how_to_use_var$ cat show_pid.sh #!/bin/bash echo $$ ghostw ...

  9. 小结:ES7——async和await初识

    一.async async其实是ES7才有有的关键字,async的意思是异步,顾名思义是有关异步的操作 async用于声明一个函数是异步的. 通常情况下async.await都是跟随promise一起 ...

  10. 【读书笔记】iOS-设计模式

    一个可复用的解决方案,用于处理特定场景下的常见问题.一种设计模式并不是一个可以直接转化为代码的已完工设计.它是对于如何解决问题的一种描述或者模板,可以用在许多不同的场合. 参考资料:<iOS W ...