layui时间怎么设置年月日时分秒_前端框架layui之日期时间组件

1.导入插件

layui使用需要导入layui的js和css:

2.简单示例

laydate.render({

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

});

});

3.详细介绍

需要依赖laydate模块：

layui.use('laydate', function(){var laydate =layui.laydate;

)}

3.1 设置基础参数

laydate.render(options)

3.2 绑定元素

elem，类型：String/DOM，默认值：无。是必填项，用于绑定执行日期渲染的元素，值一般为选择器，或DOM对象。

laydate.render({

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

});

3.3控件选择类型

type，类型：String，默认值：date，可选择日期类型：年、月、日。用于单独提供不同的选择器类型，可选值如下表：

type类型

名称

说明

type类型

名称

说明

year

年选择器

只提供年列表选择

month

年月选择器

只提供年、月选择

time

时间选择器

只提供时、分、秒选择

datatime

日期选择器

可选择：年、月、日、时、分、秒

laydate.render({

elem:'#test1',

type:'month',//年月选择器

})

laydate.render({

elem:'#test1',

type:'datetime',//日期选择器

})

3.4左右面板范围选择

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

若开启，则会在一个输入框中显示时间范围。

//日期范围选择

laydate.render({

elem:'#test1',

range:'至',//设置自己的分隔符

})

//日期范围选择

laydate.render({

elem:'#test1',

range:true,//使用默认的分隔符

})

3.5自定义格式

format，类型：String，默认值：yyyy-MM-dd。通过日期时间各自的格式符和长度，来设定一个你所需要的日期格式。常用格式如下：

yyyy-MM-dd HH:mm:ss

yyyy年MM月dd日 HH时mm分ss秒

dd/MM/yyyy

laydate.render({

elem:'#test1',

type:'datetime',

format:'yyyy-MM-dd HH:mm:ss',

})

3.6初始值

value，

类型：String，默认值：new Date()。支持传入符合format参数设定的日期格式字符，或者 new Date()。

传入字符串：

laydate.render({

elem:'#test1',

value:'2019-05-20',

})

传入new Date()，那么日期就是当前日期：

laydate.render({

elem:'#test1',

value:newDate(),

})

3.7初始值填充

isInitValue，类型：Boolean，默认值：true。是否自动向元素填充初始值，有value 参数时才有效。

laydate.render({

elem:'#test1',

value:'2019-05-20',

isInitValue:false,//不适用初始值

})

3.8最小/大范围内的日期时间值

min/max，类型：string，默认值：min: '1900-1-1'、max: '2099-12-31'。设定有限范围内的日期或时间值，不在范围内的将不可选中。这两个参数的赋值非常灵活，主要有以下几种情况：

1)如果值为字符类型，则年月日必须用 -分割、时分秒必须用 :号分割；

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

3)如果值为整数类型，且数字 ≥ 86400000，则数字代表时间戳。