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

非 Y 不嫁゛ 提交于 2019-12-04 18:02:04

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

 

  

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!