jeDate日期控件 -(原生JS版)

日期控件 说明

jeDate V6.5.0 是一款原生JS开发的 不依赖任何第三方库 大众化的日期控件,她身兼多职,虽不是万能的,但是她却是功能强大多样的美少女,她除了包含 单双面板、区域选择、 多语言、日历固定、有效无效日期、日期时间戳转换、日期加减、限制时分秒、初始化日期加减N、日期标注点、设定年月(YYYY-MM)、日期范围限制、开始日期设定、自定义日期格式、当天的前后若干天返回、时分秒选择、智能响应、自动纠错、节日识别,操作等常规功能外,根据不同的日期格式,显示不同内容,还拥有更多趋近完美的解决方案。更多的是需要你与她的亲密接触与呵护!

您可以免费将她用于任何项目。但是不能去除头部信息。
jeDate群01:516754269(已满)          jeDate群02:73371254
此为PC日期控件,非手机日期控件,请勿用于手机端。

独立jeDate下载:官网下载 Github下载


当前版本:0 下载次数:0


jeDate V6.0.2日期控件 jQuery版

更新日志 更新时间:2018-05-03

1、本次jeDate控件进行了一次重构改版,把之前发现的一些问题也一起修改了,不再采用第三方库,直接用原生JS重写!jeDate是一个独立的控件!所有的 $ 不存在了,功能只增不减

2、更改 “$.timeStampDate” 为 “jeDate.timeStampDate” 日期 与 时间戳 相互转换

3、删除 “choosefun” 使用 “donefun” 来代替

4、新增 自定义主题色 “theme” 使用更灵活

5、新增 左边快捷菜单 “shortcut”

6、修复双面板与区域选择

7、修复对日期时间严格控制

8、修复因最小最大日期不全造成的问题

9、修改了一些发现的问题,修改与新增的就不都列表出来了

10、更多功能自己去体验

注意事项

1、解压后,将jedate整个文件放至您项目的任意目录
2、jedate.js 为源码版, jedate.min.js 为压缩版,选其一引入即可。
3、控件不支持选周

浏览器兼容,下面是我们的主要兼容目标
1、IE8 或者 IE8以上 (Windows), IE8以下浏览器不兼容
2、Safari (Mac) 苹果浏览器
3、Chrome (Windows, Mac, Linux) 谷歌浏览器
4、Firefox (Windows, Mac, Linux) 火狐浏览器
5、谷歌内核(webkit)浏览器,如360浏览器,搜狗浏览器,QQ浏览器等

核心方法(配置):jeDate(elem, options)

options可以是一个对象,也可以是函数
它默认是一个对象,它包含了以下key: '默认值'

使用方法

options是一个对象,它包含了以下key: '默认值'

使用对象

可以使用在文本框与非文本框上:如 input 、 DIV,建议使用 “input” 标签

支持格式类型

注意:zz 的含义 就是补全00
例如 YYYY-MM-DD hh 得到的是 2017-05-02 10
如果 YYYY-MM-DD hh:zz 得到的是 2017-05-02 10:00
日期格式 可以随意组合,下面随意列出几种格式:
1、 YYYY-MM-DD hh:mm:ss   或者   MM-DD-YYYY hh:mm:ss   或者   MM/DD/YYYY hh:mm:ss
2、 YYYY-MM-DD hh:mm   或者   MM-DD-YYYY hh:mm   或者   MM/DD/YYYY hh:mm
3、 YYYY-MM-DD hh   或者   MM-DD-YYYY hh   或者   MM/DD/YYYY hh
4、 YYYY-MM-DD   或者   MM-DD-YYYY   或者   MM/DD/YYYY
5、 YYYY-MM
6、 YYYY
7、 hh:mm:ss
8、 hh:mm
9、 hh
10、 YYYY-MM-DD hh:zz
11、 hh:zz

功能演示

当格式为 hh:mm:ss 或者 hh:mm 的时候,今天按钮就被隐藏了!
jeDate控件多实例演示:点击查看

(YYYY年MM月DD日 hh:mm:ss)格式: (YYYY年MM月DD日 hh:mm)格式:

年(YYYY): 时分秒(hh:mm:ss): 时分(hh:mm):

多语言设置 language

language 的参数是一个对象(Object)
name : "cn",      name是一种语言的名称
month : ["01", "02", "03", "04", "05", "06", "07", "08", "09", "10", "11", "12"],
weeks : [ "日", "一", "二", "三", "四", "五", "六" ],
times : ["小时","分钟","秒数"],
clear : "清空",
today : "今天",
yes : "确定",
close : "关闭"
注意: 语言设置 不为中文的情况下, 农历不生效,(name = "cn",农历才生效)
下面是语言设置示例,可做参考:

日历固定 isShow

isShow 的参数是一个布尔类型(Boolean)
例如默认值 isShow: true,为true时是点击显示,为false的时候固定显示
注意:下面是日历固定示例,可做参考:

自定义主题色 theme

theme 的参数是一个字对象(Object)
例如这组参数, 默认值 theme: { },其中 bgcolor 参数为主题背景色,color参数为文字颜色 默认为白色,pnColor参数为当前月日期上一月与下一月颜色
例如 我要定义一个主题色,theme:{ bgcolor:"#00A1CB",color:"#ffffff", pnColor:"#00CCFF"}

注意:下面是日历定义主题色示例,可做参考:
蓝色主题色
绿色主题色
红色主题色

左边快捷菜单 shortcut

shortcut 的参数是一个字数组(Array)
例如这组参数, 默认值 shortcut: [ ],其中 {name:"",val:{}} 两个字段
例如 我要定义快捷菜单,shortcut: [ {name:"一周",val:{DD:7}} ],name是展示文字,val是需要给的值
例如 val:{DD:7},这个对象里面可以有 {YYYY:"",MM:"",DD:"",hh:"",mm:"",ss:""}
注意:下面是日历左边快捷菜单示例,可做参考:
单面板左边快捷菜单
双面板左边快捷菜单

有效日期与无效日期 valiDate

valiDate 的参数是一个数组(Array), 用正则进行限制,你的基本需求都能够满足
例如这组参数, 默认值 valiDate: [ ],如果长度为0,则有效日期与无效日期不起作用
例如 ["1$,3$,6$,9$",true],参数2为 true 时,其中的"1$,3$,6$,9$"是查找日期中包含的 有效日期
例如 ["1$,3$,6$,9$",flase],参数2为 flase 时,其中的"1$,3$,6$,9$"是查找日期中包含的 无效日期

注意:下面是设置示例,可做参考:
有效日期正向限制
无效日期正向限制
指定日期正向限制
有效日期反向限制
无效日期反向限制
指定日期反向限制

设置默认日期 initDate

initDate 的参数是一个数组(Array)
参数一 是一个数组,参数二是一个布尔值
例如这组参数, 默认值 [{hh:10,mm:00,ss:00},false],如果参数二为false,则设置你要的默认值
例如 {hh:10,mm:00,ss:00},实则它包含 (年)YYYY、 (月)MM、 (日)DD、 (时)hh、 (分)mm、 (秒)ss
注意:initDate 必须配合 isinitVal 且 isinitVal 为 true,才有作用

时分秒设置为 (10:00:00): 时分秒设置为 (10:30:35):

初始化日期加减N initDate

initDate 的参数是一个数组(Array)
参数一 是一个数组,参数二是一个布尔值
例如这组参数, 默认值 [{DD:10,hh:-2},true],如果参数二为true,则默认值相加减
例如 {DD:10,hh:-2},实则它包含 (年)YYYY、 (月)MM、 (日)DD、 (时)hh、 (分)mm、 (秒)ss
例如我要月数加3个月,天数减2天,可以写成:initAddVal: {MM:"+3",DD:"-2"}

注意:initDate 必须配合 isinitVal 且 isinitVal 为 true,才有作用

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

区域选择 range

range 的参数是一个字符串(String)
range的值可以是想要的任意字符,比如(" TO "," 至 "," ~ ")等等
range的值为字符串的时候,区域选择才起作用
range的值为 false 的时候,区域选择就变成单独选择
注意:单面板 与 多面板 都可以实现区域选择
注意:下面是设置示例,可做参考:

(年月日时分秒): (年月日): (时分秒):

单双面板 multiPane

multiPane 的参数是一个布尔类型(Boolean)
multiPane:是否为双面板,默认为true展示单面板,为false是展示双面板
注意:下面是设置示例,可做参考:

(年月日)双面板: (年月)双面板: (年)双面板:

事件触发 trigger

已经将原来的 “insTrigger” 改为 “trigger”
trigger 的参数是一个字符串(String)
例如这个参数, 默认值 trigger: "click",其值可以是 "click" 或者 "click mouseenter focus" 或者 false
trigger 的参数可绑定一个或多个事件,当参数为 false 的时候内部事件不起作用

注意:下面是事件触发设置示例,可做参考:

设置事件("click mouseenter"): 不设置内部事件(false):

最小最大日期

minDate   最小日期
maxDate   最大日期
最小日期 minDate 可以写成 minDate: "1900-01-01 00:00:00" ,或者 minDate: "1900-01-01" ,或者 minDate: "00:00:00"
最大日期 maxDate 可以写成 maxDate: "2099-12-31 23:59:59" ,或者 maxDate: "2099-12-31" ,或者 minDate: "23:59:59"

节日农历 festival

festival 的参数是一个布尔值,是否显示农历节日

例如这个参数, 默认值 festival: false,如果值为 true 表示显示农历节日
如果 语言设置里面的 name 等于 "cn", 农历节日 festival:true 才有效
如果 语言设置里面的 name 不等于 "cn", 农历节日就算 festival:true 也无效

弹层是否立即关闭 onClose

onClose 是否为选中日期后关闭弹层,
onClose 为 true 时选中日期后需要点击 确定按钮 才可以关闭弹层,
onClose 为 false 时选中日期后就关闭弹层

选中后立即关闭

选中后点确定按钮才关闭

一次绑定多个

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

第一种方式

1、 添加一个

第二种方式

1、

2、

第三种方式

自定义日期、标注点

自定义年月(YYYY-MM)格式: 给日期标注点: 点击图标:

限定在昨天到明天: 限定在今天:

限制时分秒

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

开始日期与结束日期、日期联动

点击选择开始日期后,结束日期联动可以自动弹出
开始日期: 结束日期:

获取 年 月 日 星期 jeDate.getLunar

jeDate.getLunar(val,format) 的参数有2个
val为选择后的值如:"2017-08-23" ,format为日期格式,返回以下值

nM 农历月
nD 农历日
yY 阳历年
yM 阳历月
yD 阳历日
cW 汉字星期几
nW 数字星期几
获取选择日期的星期:

日期与时间戳相互转换 jeDate.timeStampDate

jeDate.timeStampDate(date, format) 的参数有2个
date 是日期或者时间戳,format 是日期格式

日期 转 时间戳 jeDate.timeStampDate("2017-11-16 10:35:22")不用填写日期格式 得到 1513391722
时间戳 转 日期 jeDate.timeStampDate("1513391722",'YYYY年MM月DD日 hh:mm:ss')默认日期格式('YYYY-MM-DD hh:mm:ss') 得到 2017-11-16 10:35:22

回调函数 toggle

toggle(obj) 回调函数 obj是一个对象 包含是三个值 (elem,val,date)
值一:obj.elem ,elem是当前输入框(input)的ID
值二:obj.val ,val是当前选中后的值
值三:obj.date ,date是当前选中后的值,它是一个数组,例如:{YYYY:2017,MM:09,DD:02,hh:08,mm:30,ss:15}
注意:range为false的时候可用

回调函数 donefun

donefun(obj) 回调函数 obj是一个对象 包含是三个值 (elem,val,date)
值一:obj.elem ,elem是当前输入框(input)的ID
值二:obj.val ,val是当前选中后的值
值三:obj.date ,date是当前选中后的值,它是一个数组,例如:{YYYY:2017,MM:09,DD:02,hh:08,mm:30,ss:15}
如果配置range不为空处于区域选择的时候date数组为最小日期与最大日期 [ { },{ } ]
如果是单独选择的时候date为对象 { }

扩展一个对象 jeDate.extend

jeDate.extend([deep],object1, [objectN])
用一个或多个其他对象来扩展一个对象,返回被扩展的对象。可独立使用。
deep:如果设为true,则递归合并。
object1:待合并到第一个对象的对象。
objectN:待合并到第一个对象的对象。