前端框架layui之日期时间组件

1.导入插件

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

<link rel="stylesheet" href="layui/css/layui.css" />
<script src="layui/layui.js"></script>

2.简单示例

<div class="layui-inline"> 
  <input type="text" class="layui-input" id="test">
</div>
 
<script>
layui.use('laydate', function(){
  var laydate = layui.laydate;
  //执行一个laydate实例
  laydate.render({
    elem: '#test' //指定元素
  });
});
</script>

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自定义格式

参考网址：https://www.layui.com/doc/modules/laydate.html

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:new Date(),
})

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，则数字代表时间戳。

前端框架layui之日期时间组件

猜你喜欢