Layui 日期选择控件

日期和时间选择器:
layDate 中包含了大量实用的功能,其中主要以:年选择器、年月选择器、日期选择器、时间选择器、日期时间选择器 五种类型的选择方式为基本核心,并且均支持范围选择(即双控件)。

快速使用
和 layer 一样,你可以在 layui 中使用 layDate,也可直接使用 layDate 独立版,请按照你的实际需求来选择。

  1. 在 layui 模块中使用
    下载 layui 后,引入layui.css和layui.js即可。通过layui.use(‘laydate’, callback)加载模块后,再调用方法

  2. 作为独立组件使用
    去 layDate 独立版本官网下载组件包,引入 laydate.js 即可直接调用方法使用

基础参数选项
通过核心方法:laydate.render(options) 来设置基础参数,也可以通过方法:laydate.set(options) 来设定全局基础参数.
elem - 绑定元素 类型:String/DOM,默认值:无
必填项,用于绑定执行日期渲染的元素,值一般为选择器,或DOM对象
type - 控件选择类型 类型:String,默认值:date
用于单独提供不同的选择器类型,可选值如下表:
在这里插入图片描述

range - 开启左右面板范围选择 类型:Boolean/String,默认值:false
如果设置 true,将默认采用 “ - ” 分割。 你也可以直接设置 分割字符。五种选择器类型均支持左右面板的范围选择。
format - 自定义格式 类型:String,默认值:yyyy-MM-dd
通过日期时间各自的格式符和长度,来设定一个你所需要的日期格式。layDate 支持的格式如下:
在这里插入图片描述

value - 初始值 类型:String,默认值:new Date()
支持传入符合format参数设定的日期格式字符,或者 new Date()
min/max - 最小/大范围内的日期时间值
类型:string,默认值:min: ‘1900-1-1’、max: ‘2099-12-31’
设定有限范围内的日期或时间值,不在范围内的将不可选中。
trigger - 自定义弹出控件的事件
类型:String,默认值:focus,如果绑定的元素非输入框,则默认事件为:click
btns - 工具按钮 类型:Array,默认值:[‘clear’, ‘now’, ‘confirm’]
右下角显示的按钮,会按照数组顺序排列,内置可识别的值有:clear、now、confirm

©️2020 CSDN 皮肤主题: 1024 设计师:上身试试 返回首页