Layui日期和时间组件

Layui日期和时间组件

• type控件选择类型：用于单独提供不同的选择器类型

1. 年选择器（只提供年列表选择）

laydate.renfer({

elem:”#test1”,//绑定元素

type:”year”

});

预览：

102

 

1. 年月选择器（只提供年月选择）

   laydate.render({

                elem: "#test1",//绑定元素

                type: "month"

            });

103

 

1. 更多选择器

type可选值	名称	用途
year	年选择器	只提供年列表选择
month	年月选择器	只提供年、月选择
date	日期选择器	可选择：年、月、日。type默认值，一般可不填
time	时间选择器	只提供时、分、秒选择
datetime	日期时间选择器	可选择：年、月、日、时、分、秒

（表来源：Layui）

• range左右面板范围选择

可填Boolean/Sting类型，默认：false。如果设置为true，将默认采用“-”分割，可自定义分割字符

上述五种选择器类型均支持面板的范围选择

例如：datetime

 laydate.render({

                elem: "#test1",

                type: "datetime",

                range: true//可用range:"~"来自定义分隔字符

            })

104

 

• elem绑定元素

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

• theme主题

可选值有：default(默认简约)、molv（墨绿背景）、#颜色值（自定义颜色背景）、grid（格子主题）

用法 ：例：格子主题

laydate.render({

elem: '#test',

theme: 'grid'

});

• lang语言

内置有两种语言：cn（中文版）、en（国际版/英文版）

例：国际版

laydate.render({

  elem: '#test'

  ,lang: 'en'

});

105

 

• 是否显示公历节日

注意：只在中文版显示中国通用的公历重要节日，国际版不会显示

例：允许显示公历节日

laydate.render({

  elem: '#test'

  ,calendar: true

});

106

 

• mark标注重要节日

自定义标注重要的日子，比如：生日，纪念日

标注	格式	说明
每年的日期	{'0-9-18': '国耻'}	0 即代表每一年
每月的日期	{'0-0-15': '中旬'}	0-0 即代表每年每月（layui 2.1.1/layDate 5.0.4 新增）
特定的日期	{2021-8-21': '同学会')	-