layui 时间按小时选择_layui高级(二) 时间与日期选择

模块加载名称：laydate

layui.use('laydate', function(){

var laydate = layui.laydate;

//执行一个laydate实例

laydate.render({

elem: '#test1' //指定元素

});

});

1. 基础参数选项

通过核心方法：laydate.render(options) 来设置基础参数，也可以通过方法：laydate.set(options) 来设定全局基础参数.

2. elem – 绑定元素

类型：String/DOM，默认值：无

必填项，用于绑定执行日期渲染的元素，值一般为选择器，或DOM对象

laydate.render({

elem: '#test' //或 elem: document.getElementById('test')、elem: lay('#test') 等

});

3. type – 控件选择类型

类型：String，默认值：date

用于单独提供不同的选择器类型，可选值如下：

year 年选择器 只提供年列表选择

month 年月选择器 只提供年、月选择

date 日期选择器 可选择：年、月、日。type默认值，一般可不填

time 时间选择器 只提供时、分、秒选择

datetime 日期时间选择器 可选择：年、月、日、时、分、秒

//年选择器

laydate.render({

elem: '#test'

,type: 'year'

});

//年月选择器

laydate.render({

elem: '#test'

,type: 'month'

});

//日期选择器

laydate.render({

elem: '#test'

//,type: 'date' //默认，可不填

});

//时间选择器

laydate.render({

elem: '#test'

,type: 'time'

});

//日期时间选择器

laydate.render({

elem: '#test'

,type: 'datetime'

});

4. range – 开启左右面板范围选择

类型：Boolean/String，默认值：false

如果设置 true，将默认采用 “ – ” 分割。 你也可以直接设置 分割字符。五种选择器类型均支持左右面板的范围选择。

//年范围选择

laydate.render({

elem: '#test'

,type: 'year'

,range: true //或 range: '~' 来自定义分割字符

});

//年月范围选择

laydate.render({

elem: '#test'

,type: 'month'

,range: true //或 range: '~' 来自定义分割字符

});

//日期范围选择

laydate.render({

elem: '#test'

,range: true //或 range: '~' 来自定义分割字符

});

//时间范围选择

laydate.render({

elem: '#test'

,type: 'time'

,range: true //或 range: '~' 来自定义分割字符

});

//日期时间范围选择

laydate.render({

elem: '#test'

,type: 'datetime'

,range: true //或 range: '~' 来自定义分割字符

});

5. format – 自定义格式

类型：String，默认值：yyyy-MM-dd

通过日期时间各自的格式符和长度，来设定一个你所需要的日期格式。

格式符

说明

yyyy

年份，至少四位数。如果不足四位，则前面补零

y

年份，不限制位数，即不管年份多少位，前面均不补零

MM

月份，至少两位数。如果不足两位，则前面补零。

M

月份，允许一位数。

dd

日期，至少两位数。如果不足两位，则前面补零。

d

日期，允许一位数。

HH

小时，至少两位数。如果不足两位，则前面补零。

H

小时，允许一位数。

mm

分钟，至少两位数。如果不足两位，则前面补零。

m

分钟，允许一位数。

ss

秒数，至少两位数。如果不足两位，则前面补零。

s

秒数，允许一位数。

通过上述不同的格式符组合成一段日期时间字符串，可任意排版，如下所示：

yyyy-MM-dd HH:mm:ss 2017-08-18 20:08:08

yyyy年MM月dd日 HH时mm分ss秒 2017年08月18日 20时08分08秒

yyyyMMdd 20170818

dd/MM/yyyy 18/08/2017

yyyy年M月 2017年8月

M月d日 8月18日

北京时间：HH点mm分 北京时间：20点08分

yyyy年的M月某天晚上，大概H点 2017年的8月某天晚上，大概20点

6. value – 初始值

类型：String，默认值：new Date()

支持传入符合format参数设定的日期格式字符，或者 new Date()

//传入符合format格式的字符给初始值

laydate.render({

elem: '#test'

,value: '2018-08-18' //必须遵循format参数设定的格式

});

//传入Date对象给初始值

laydate.render({

elem: '#test'

,value: new Date(1534766888000) //参数即为：2018-08-20 20:08:08 的时间戳

});

7. isInitValue – 初始值填充

类型：Boolean，默认值：true

用于控制是否自动向元素填充初始值(需配合 value 参数使用)

laydate.render({

elem: '#test'

,value: '2017-09-10'

,isInitValue: false //是否允许填充初始值，默认为 true

});

8. min/max – 最小/大范围内的日期时间值

类型：string，默认值：min: ‘1900-1-1’、max: ‘2099-12-31’

设定有限范围内的日期或时间值，不在范围内的将不可选中。这两个参数的赋值非常灵活，主要有以下几种情况：

如果值为字符类型，则：年月日必须用 -(中划线)分割、时分秒必须用 :(半角冒号)号分割。这里并非遵循 format 设定的格式

如果值为整数类型，且数字＜86400000，则数字代表天数，如：min: -7，即代表最小日期在7天前，正数代表若干天后

如果值为整数类型，且数字 ≥ 86400000，则数字代表时间戳，如：max: 4073558400000，即代表最大日期在：公元3000年1月1日

//日期有效范围只限定在：2017年

laydate.render({

elem: '#test'

,min: '2017-1-1'

,max: '2017-12-31'

});

//日期有效范围限定在：过去一周到未来一周

laydate.render({

elem: '#test'

,min: -7 //7天前

,max: 7 //7天后

});

//日期时间有效范围的设定:

laydate.render({

elem: '#test'

,type: 'datetime'

,min: '2017-8-11 12:30:00'

,max: '2017-8-18 12:30:00'

});

//时间有效范围设定在: 上午九点半到下午五点半

laydate.render({

elem: '#test'

,type: 'time'

,min: '09:30:00'

,max: '17:30:00'

});

9. trigger – 自定义弹出控件的事件

类型：String，默认值：focus，如果绑定的元素非输入框，则默认事件为：click

10. show – 默认显示

类型：Boolean，默认值：false

如果设置: true，则控件默认显示在绑定元素的区域。通常用于外部事件调用控件。

11. position – 定位方式

类型：String，默认值：absolute

用于设定控件的定位方式，有以下三种可选值：

abolute 绝对定位，始终吸附在绑定元素周围。默认值

fixed 固定定位，初始吸附在绑定元素周围，不随浏览器滚动条所左右。一般用于在固定定位的弹层中使用。

static 静态定位，控件将直接嵌套在指定容器中。

注意：请勿与 show 参数的概念搞混淆。show为 true 时，控件仍然是采用绝对或固定定位。而这里是直接嵌套显示

12. zIndex – 层叠顺序

类型：Number，默认值：66666666

一般用于解决与其它元素的互相被遮掩的问题。如果 position 参数设为 static 时，该参数无效。

13. showBottom – 是否显示底部栏

类型：Boolean，默认值：true

如果设置 false，将不会显示控件的底部栏区域

14. btns – 工具按钮

类型：Array，默认值：[‘clear’, ‘now’, ‘confirm’]

右下角显示的按钮，会按照数组顺序排列，内置可识别的值有：clear、now、confirm

15. lang – 语言

类型：String，默认值：cn

我们内置了两种语言版本：cn(中文版)、en(国际版，即英文版)。

16. theme – 主题

类型：String，默认值：default

我们内置了多种主题，theme的可选值有：default(默认简约)、molv(墨绿背景)、#颜色值(自定义颜色背景)、grid(格子主题)

17. calendar – 是否显示公历节日

类型：Boolean，默认值：false

我们内置了一些我国通用的公历重要节日，通过设置 true 来开启。国际版不会显示。

//允许显示公历节日

laydate.render({

elem: '#test'

,calendar: true

});

18. mark – 标注重要日子

类型：Object，默认值：无

每年的日期 {‘0-9-18’: ‘国耻’} 0 即代表每一年

每月的日期 {‘0-0-15’: ‘中旬’} 0-0 即代表每年每月(layui 2.1.1/layDate 5.0.4 新增)

特定的日期 {‘2017-8-21’: ‘发布’)

//标注重要日子

var ins1 = laydate.render({

elem: '#test'

,mark: {

'0-10-14': '生日'

,'0-12-31': '跨年' //每年12月31日

,'0-0-10': '工资' //每个月10号

,'2017-8-15': '' //具体日期

,'2017-8-20': '预发' //如果为空字符，则默认显示数字+徽章

,'2017-8-21': '发布'

}

,done: function(value, date){

if(date.year === 2017 && date.month === 8 && date.date === 15){ //点击2017年8月15日，弹出提示语

ins1.hint('中国人民抗日战争胜利72周年');

}

}

});

19. 控件初始打开的回调

控件在打开时触发，回调返回一个参数：初始的日期时间对象

laydate.render({

elem: '#test'

,ready: function(date){

console.log(date); //得到初始的日期时间对象：{year: 2017, month: 8, date: 18, hours: 0, minutes: 0, seconds: 0}

}

});

20. 日期时间被切换后的回调

年月日时间被切换时都会触发。回调返回三个参数，分别代表：生成的值、日期时间对象、结束的日期时间对象

laydate.render({

elem: '#test'

,change: function(value, date, endDate){

console.log(value); //得到日期生成的值，如：2017-08-18

console.log(date); //得到日期时间对象：{year: 2017, month: 8, date: 18, hours: 0, minutes: 0, seconds: 0}

console.log(endDate); //得结束的日期时间对象，开启范围选择(range: true)才会返回。对象成员同上。

}

});

21. 控件选择完毕后的回调

点击日期、清空、现在、确定均会触发。回调返回三个参数，分别代表：生成的值、日期时间对象、结束的日期时间对象

laydate.render({

elem: '#test'

,done: function(value, date, endDate){

console.log(value); //得到日期生成的值，如：2017-08-18

console.log(date); //得到日期时间对象：{year: 2017, month: 8, date: 18, hours: 0, minutes: 0, seconds: 0}

console.log(endDate); //得结束的日期时间对象，开启范围选择(range: true)才会返回。对象成员同上。

}

});

22. 弹出控件提示

事实上，执行核心方法 laydate.render(options) 会返回一个当前实例对象。其中包含一些成员属性和方法，比如：hint方法

var ins1 = laydate.render({

elem: '#test'

,change: function(value, date, endDate){

ins1.hint(value); //在控件上弹出value值

}

});