jeDate日期控件

jeDate除了包含初始化日期加减N、日期标注点、输入框可以直接输入时间、设定年月（YYYY-MM）、日期范围限制、开始日期设定、自定义日期格式、时间戳转换、当天的前后若干天返回、时分秒选择、智能响应、自动纠错、节日识别，操作等常规功能外，根据不同的日期格式，显示不同内容，还拥有更多趋近完美的解决方案。
您可以免费将她用于任何个人项目。但是不能去除头部信息。 QQ群：516754269

jeDate从3.5版本开始改为jquery版本的日期控件

非常感谢：——Gang@ 参与开发
希望大家多多参与开发！

更新日志更新时间：2017-03-10

1、字段“hmsLimit”可以限制时分秒
2、弹层比之前的变小一些了
3、为避免弹层跟随滚动条走，已修改为滚动了滚动条弹层关闭
4、修改了一些发现的问题
5、更多功能自己去体验

注意事项

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 的时候，今天按钮就被隐藏了，没有秒的话就只显示时分，没有只显示时的！

（YYYY年MM月DD日 hh:mm:ss）格式：（YYYY年MM月DD日 hh:mm）格式：

年（YYYY）：时分秒（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'
});

初始化日期加减N

initAddVal ：[0]，默认为0，实则它可以有2个参数，也可以写成[ 0, "DD" ]
参数一是我们要加减的值，参数二默认（"DD"）是时间类型 DD代表天（默认为天），hh代表小时，mm代表分钟

注意：initAddVal 必须配合 isinitVal 且 isinitVal 为 true，才有作用

初始化日期加N天：初始化日期加N小时：


$("#chus01").jeDate({
    isinitVal:true,
    initAddVal:[2],   //初始化日期加2天
    festival: true,
    format: 'YYYY年MM月DD日 hh:mm:ss'
});

$("#chus02").jeDate({
    isinitVal:true,
    initAddVal:[2,"hh"],   //初始化日期加2小时
    festival: true,
    format: 'YYYY年MM月DD日 hh:mm:ss'
});

initAddVal ：[0]，默认为0，实则它可以有2个参数，也可以写成[ 0, "DD" ]
//参数一是我们要加减的值，参数二默认（"DD"）是时间类型 DD代表天（默认为天），hh代表小时，mm代表分钟
//注意：initAddVal 必须配合 isinitVal 且 isinitVal 为 true，才有作用

日期特殊控制

以下的这种方式，时间初始化是不起作用的

第一种方式

1、添加一个

第二种方式

1、

2、


【有两种方式】

//第一种方式
<input class="workinput wicon mr25" type="text" placeholder="YYYY年MM月DD日 hh:mm"  readonly onclick="testShow(this);">
function testShow(elem){
    $.jeDate(elem,{
        insTrigger:false,
        format: 'YYYY年MM月DD日 hh:mm',
        minDate: '2014-06-16 23:59:59', //设定最小日期为当前日期
        festival: true,
        maxDate: '2099-06-16 23:59:59' //最大日期
    });
}

//第二种方式
<input type="text" id="tser01" placeholder="YYYY年MM月DD日 hh:mm:ss"  readonly
    onclick="$.jeDate('#tser01',{insTrigger:false,isTime:true,format:'YYYY-MM-DD hh:mm:ss'})">

<input type="text" id="tser02" placeholder="YYYY年MM月DD日 hh:mm:ss"  readonly
    onclick="$.jeDate('#tser02',{insTrigger:false,isTime:true,format:'YYYY-MM-DD hh:mm:ss'})">

日期加减N天

jeDate.addDate(time,num,type)
参数一（time）是我们选中后得到的值，参数二（num）是我们选中后得到值的基础上加N天(如果num为负数则为减N天)，参数三（type）是时间类型 DD代表天（默认为天），hh代表小时，mm代表分钟

以下的这种方式，时间初始化是不起作用的

获取选中时间加N天：


$.jeDate('#xuann',{
    format: 'YYYY-MM-DD hh:mmss',
    choosefun:function(elem, val) {
         elem.val($.addDate(val,3));  //在得到值的基础上加3天，(如果参数二为负数则为减N天)
    }
});

$.addDate(time, num, type);
//参数一（time）是我们选中后得到的值，参数二（num）是我们选中后得到值的基础上加想要的时间，
//参数三（type）是时间类型 "DD"代表天（默认为天），"hh"代表小时，"mm"代表分钟

自定义日期

自定义年月（YYYY-MM）格式：给日期标注点：点击图标：

限定在昨天到明天：限定在今天：日期（YYYYMMDD）：

 
【自定义日期格式】
<div class="workinput wicon" id="custom1"></div>
<script>
$('#custom1').jeDate({
    isinitVal:true,
    format: 'YYYY/MM' // 分隔符可以任意定义，该例子表示只显示年月
});


【给日期标注点】
<div class="workinput wicon" id="custom3"></div>
$('#custom3').jeDate({
    format: 'YYYY-MM-DD', // 分隔符可以任意定义，该例子表示只显示年月
    marks:['2015-01-03','2016-01-01','2016-01-10','2016-01-15','2016-02-15','2016-03-10','2016-04-18'], 
    //marks给日期做标注，特别说明（日期不足2位的必须加0，如：'2015-1-3' 要写成 '2015-01-03' 否则标注不成功）
});

【图标触发日期】
<input class="workinput" id="test2" type="text" placeholder="请选择"  readonly>
<span class="wicon" onClick="$.jeDate('#test2'{insTrigger:false,isTime:true,format:'YYYY-MM-DD hh:mm:ss'})"></span>

【日期范围限定在昨天到明天】
<input class="workinput wicon" id="custom2" type="text" placeholder="请选择" readonly>
$('#custom2').jeDate({
    format:"YYYY-MM-DD",
    minDate: $.nowDate(-1), //0代表今天，-1代表昨天，-2代表前天，以此类推
    maxDate: $.nowDate(1) //1代表明天，2代表后天，以此类推
});

【日期范围限定在今天】
$('#customToday').jeDate({
	format:"YYYY-MM-DD",
    minDate: $.nowDate(0), //0代表今天，-1代表昨天，-2代表前天，以此类推
    maxDate: $.nowDate(0) //1代表明天，2代表后天，以此类推
});

【日期 YYYYMMDD 】
$('#customymd').jeDate({
    isinitVal:true,
    format:"YYYY-MM-DD"
});
</script>

获取年月日星期

$.getLunar(time) 返回以下值
nMonth      //农历月
nDays      //农历日
yYear      //阳历年
yMonth      //阳历月
yDays      //阳历日
cWeek      //汉字星期几
nWeek      //数字星期几

获取选择日期的星期：


$.jeDate('#goweeks',{
    festival: true,
    format: 'YYYY年MM月DD日 hh:mm:ss'，
    choosefun: function(elem,datas){
        alert($.getLunar(datas).cWeek);
    }
});

清空输入框，返回预设日期

startMin:"", 清除日期后返回到预设的最小日期
startMax:"", 清除日期后返回到预设的最大日期
返回到预设的日期，需要clearRestore为true,且输入框非空的情况下有效
配合开始日期与结束日期，效果最好

返回预设日期：


$.jeDate('#restore',{
    minDate:jeDate.nowDate(0),          //设定最小日期为当前日期,
    maxDate:'2019-06-16 23:59:59',  //最大日期
    startMin:$.nowDate(-3),        //设定返回预设最小日期为当前日期的前3天，（或者直接设置为最小日期jeDate.nowDate(0)），这里随自己设置
    startMax:'2019-06-16 23:59:59', //设定返回预设最大日期与（最大日期）相同
    format: 'YYYY年MM月DD日 hh:mm:ss'
});

限制时分秒

hmsLimit，为true时表示正常状态，为false时限制时分秒起作用
请注意时间限制范围
minDate:'2012-06-16 08:05:05'，
maxDate:'2020-06-16 20:50:50'，
例如其中 08:05:05 -- 20:50:50 是时间限制范围
灰色部分为不可选状态

YYYY-MM-DD hh:mm:ss 限制时分秒： hh:mm:ss 限制时分秒：


$.jeDate('#ymdlimthms',{
    festival: true,
    hmsLimit:false,
    format: 'YYYY-MM-DD hh:mm:ss',
    minDate:"2012-06-16 08:05:05", //最小日期
    maxDate:"2020-06-16 20:50:50" //最大日期
});
$.jeDate('#limthms',{
    festival: true,
    hmsLimit:false,
    format: 'hh:mm:ss',
    minDate:"2012-06-16 08:05:05", //最小日期
    maxDate:"2020-06-16 20:50:50" //最大日期    
});

开始日期与结束日期

开始日期：结束日期：

 
【自定义日期格式】
<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>

快捷到达

更新日志 更新时间：2017-03-10

使用对象

第一种方式

第二种方式

更新日志更新时间：2017-03-10