Layui 17 laydate 日期与时间选择

最新推荐文章于 2025-05-26 16:05:26 发布

fangyinggui

最新推荐文章于 2025-05-26 16:05:26 发布

阅读量2.3k

点赞数 11

CC 4.0 BY-SA版权

分类专栏： layui 文章标签： layui javascript 前端

本文链接：https://blog.csdn.net/monian187/article/details/147099112

layui 专栏收录该内容

23 篇文章

订阅专栏

该文章已被构建成可运行项目，

在这里插入图片描述

1、概述

多种选择方式：年、年月、日期、时间、日期时间选择器；

支持范围选择（即双控件）；

内置：自定义机器格式解析 & 合法校正机制；

版本：中文 & 国际版；

独立：内部采用的是零依赖的原生 JavaScript 编写，因此又可作为独立组件使用。

模块加载名称：laydate，独立版本

2、快速使用

代码

3、基础参数选项

【方式1】通过核心方法：laydate.render(options) 来设置基础参数。
【方式2】laydate.set(options) 来设定全局基础参数。

elem

【描述】绑定元素选择器或 DOM 元素。
【类型】{String/DOM}
【默认值】-

【注意】！需要渲染在一个 input 元素上。
【注意2】组件渲染的 elem 可以设置在 div 容器上见示例。

渲染一个日期时间选择

渲染：
在这里插入图片描述

type

【描述】组件面板选择类型。
【类型】{string}
【默认值】‘date’

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

【示例】渲染

渲染结果：

year
在这里插入图片描述

month
在这里插入图片描述

date
在这里插入图片描述

time
在这里插入图片描述

datetime
在这里插入图片描述

id

【描述】设定实例唯一索引，以便用于其他方法对实例进行相关操作。
【类型】{string}
【默认值】- （若该属性未设置，则默认从 elem 属性绑定的元素中的 id 属性值中获取。）
经验：就让其保持默认就行，不用另外设置，反而不方便管理。

format

【键】设置选择后，输入框内展示的 日期时间格式。
！和 type 配置项设置的显示类型也有关系。
【值】{String}
（1）默认值：yyyy-MM-dd（例如获取到 2025-04-07）
（2）支持的 格式符：

格式符	说明
yyyy	年份，至少四位数。如果不足四位，则前面补零
y	年份，不限制位数，即不管年份多少位，前面均不补零
MM	月份，至少两位数。如果不足两位，则前面补零。
M	月份，允许一位数。
dd	日期，至少两位数。如果不足两位，则前面补零。
d	日期，允许一位数。
HH	小时，至少两位数。如果不足两位，则前面补零。
H	小时，允许一位数。
mm	分钟，至少两位数。如果不足两位，则前面补零。
m	分钟，允许一位数。
ss	秒数，至少两位数。如果不足两位，则前面补零。
s	秒数，允许一位数。

（3）常用格式符组合：

格式	示例值
yyyy-MM-dd HH:mm:ss	2017-08-18 20:08:08
yyyy 年 MM 月 dd 日 HH 时 mm 分 ss 秒	2017 年 08 月 18 日 20 时 08 分 08 秒
yyyyMMdd	20170818
dd/MM/yyyy	18/08/2017
yyyy 年 M 月	2017 年 8 月
M 月 d 日	8 月 18 日
北京时间：HH 点 mm 分	北京时间：20 点 08 分
yyyy 年的 M 月某天晚上，大概 H 点	2017 年的 8 月某天晚上，大概 20 点

各种格式字符传获取
format: ‘yyyy年MM月dd日’, 渲染结果如下：
在这里插入图片描述

range

【描述】开启左右面板的范围选择，将会根据 type 类型呈现对应的范围选择面板。
【类型】{boolean|string|array}
【默认值】false

{boolean} 表示是否开启范围选择，若设为 true，则开始日期与结束日期默认采用 - 连接符；
{string} 表示开启范围选择，且自定义开始日期与结束日期的连接符。如 range: ‘~’。
{array} v2.6.6 表示开启范围选择，且开始日期和结束日期分别赋值在 2 个目标选择器中，如： range: [‘#start’, ‘#end’]。

【注意】组件渲染的 elem 可以设置在 div 容器上见示例。

语法：

laydate.render({
  elem: '#test',

  /**
   * @brief: 日期范围选择
   * @value {Boolean/String/Array}
   * {Boolean} true 开启日期范围选择
   * {String} '~' 自定义分割符
   * {Array} ['#startDate', '#endDate'] 数组格式（见 demo）
   */
   range: false: // (def)
   // range: true,
   // range: '~',
   // range: ['#start', '#end'],
})

示例1 开启日期范围选择
在这里插入图片描述
示例2 开启日期范围选择 + 自定义分割符

示例3 开启日期范围选择 + 赋值在2个选择器中
日期选择控件的显示还是一样的，只是选择后填充的位置不一样了。

isInitValue

【键】控制是否自动向元素填充初始值（需配合 value 参数使用）
【键值】
{Boolean}
true (默认）

【示例】填充初始值

value

【键】设置初始值。
【键值】{String}
（默认值）new Date()
（其它值）支持传入符合 format 参数设定的日期格式字符，或者 new Date()

语法：

//
initValue: true, // 默认 允许填充初始值
// value: '2018-08-18',
// value: new Date(),
// value: new Date(1534766888000),

【示例】填充初始值

isPreview

【键】用于控制是否显示当前结果的预览（就是面板左下角的值）。
【键值】{Boolean} 默认
【特殊】type 为 datetime 时不开启。

【示例】选择值预览
在这里插入图片描述

min/max

【键】设置允许选择的日期时间范围。（不在范围内的将不可选中）
【键值】{String}
默认值：min: ‘1900-1-1’；max: ‘2099-12-31’；

【说明】这两个参数的赋值非常灵活，主要有以下几种情况：
（1）如果值为字符类型，则：年月日必须用 -（中划线）分割、时分秒必须用 :（半角冒号）号分割。这里并非遵循 format 设定的格式。
（2）如果值为整数类型，且数字＜ 86400000，则数字代表天数，如：min: -7，即代表最小日期在 7 天前，正数代表若干天后。
（3）如果值为整数类型，且数字 ≥ 86400000，则数字代表时间戳，如：max: 4073558400000，即代表最大日期在：公元 3000。

【常用】
① 固定日期范围用字符串的格式，如：‘2017-10-23’ 、‘2017-8-11 12:30:00’、‘09:30:00’；
② 天数日期范围，如； -7, 7；表示日期在过去一周到未来一周；

【示例】设置一个日期选择的范围

trigger - 自定义弹出控件的事件

【键】自定义弹出控件的事件。
【键值】
（1）绑定的是输入框，则默认事件为 focus；
（2）绑定的非输入框，则默认事件为 click；

【示例】绑定在普通元素上—— 鼠标滑入时触发

show

【键】配置日期选择是否默认显示。
【键值】
{Boolean}
false 默认不直接显示。
true 控件默认显示在绑定元素的区域。

【场景】通常用于 外部事件调用控件，如：其他位置的 DOM 元素，调用此 DOM 绑定的控件。（理解：按钮 B 调用按钮 A 绑定的日期时间选择控件）
【示例】点击下面按钮，触发上面按钮渲染的日期选择控件
在这里插入图片描述

position

【键】用于设定控件的定位方式。
【键值】

absolute：（默认值）绝对定位，始终吸附在绑定元素周围。
fixed：固定定位，初始吸附在绑定元素周围，不随浏览器滚动条所左右。一般用于在固定定位的弹层中使用。
static：静态定位，控件将直接嵌套在指定容器中。注意：请勿与 show 参数的概念搞混淆。show 为 true 时，控件仍然是采用绝对或固定定位。而这里是直接嵌套显示。

【示例】

zIndex

【键】设置组件的层叠顺序。
【键值】{Number}
默认值 66666666 （8个6）
【场景】一般用于解决与其它元素的互相被遮掩的问题。如果 position 参数设为 static 时，该参数无效。
【示例】设置日期选择控件的层叠顺序
默认的层叠顺序：
在这里插入图片描述

showBottom

【键】设置是否显示底部栏。
【键值】{Boolean}
true 默认，显示底部栏。
false 不显示
【底部栏区域】
在这里插入图片描述
【示例】不显示底部栏

btns

【键】设置右下角按钮。
【键值】{array}
（1）默认值；
[‘clear’, ‘now’, ‘confirm’] ，显示清空、现在、确定按钮。
在这里插入图片描述
（2）可选值：在上面3个中可选，空数组则不显示按钮；

//
// btns: ['clear', 'now', 'confirm'], // 默认右下角
btns: ['now', 'confirm'], // 只显示 现在，确定按钮
btns: [], // 关闭按钮

【示例】配置按钮其它值

lang

【键】设置组件语言。
【键值】
‘cn’ 默认中文；
‘en’ 英文；

tip: 这里并没有开放自定义文字，是为了避免繁琐的配置。

【示例】英文语言
在这里插入图片描述

theme

【键】配置主题。
！组件内置了多种主题，见下面值。
【键值】{string|color}

‘default’ 默认简约（绿色）；
‘molv’ 墨绿背景；
任意颜色值（自定义颜色背景）；
‘grid’ 格子主题（简约基础上内部填充线框）；
其它字符串；

【示例1】英文语言
简约绿色：
在这里插入图片描述
墨绿：

自定义颜色：#c00 暗红

在这里插入图片描述
grid 格子主题：

注意：按钮悬浮什么的还是绿色（见自定义颜色中）。

【特殊】自定义类名
例如：
1、theme: ‘pro’,；
2、那么控件将会多出一个 class=“laydate-theme-pro” 的 CSS 类，以便于你单独定制主题。
此时样式还是默认的简约风格；
3、定义下样式覆盖默认样式；
在这里插入图片描述


#test1:focus {
  border-color: blueviolet !important;
}

.laydate-theme-pro {
}

.laydate-theme-pro.layui-laydate .layui-this,
.laydate-theme-pro.layui-laydate .layui-this > div {
  background-color: blueviolet !important;
}

.layui-laydate-footer span:hover {
  color: blueviolet;
}
.laydate-theme-pro .layui-laydate-header i:hover,
.laydate-theme-pro .layui-laydate-header span:hover {
  color: blueviolet;
}

.laydate-theme-pro .layui-laydate-footer span.layui-laydate-preview {
  color: blueviolet !important;
}

calendar

【键】是否显示公历节日。
【键值】{Boolean}
false 默认不显示公历
true 显示公历

【示例】显示公历节日
【注意】是节日标注，不是阴历日期。
在这里插入图片描述

mark

【键】标注重要日子。
【键值】{Object}
{} 默认没有。
【场景】calendar 参数所代表的公历节日更多情况下是一个摆设。因此，我们还需要自定义标注重要日子，比如结婚纪念日？日程等？它分为以下两种：

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

【示例】同时标注多个特殊日期
在这里插入图片描述

4、回调钩子配置项

ready

/**
* @brief: 控件初始打开的回调
* @param {Object} date 初始的日期时间对象
* @return {*}
*/
ready: function (date) {
 console.log(date) // 得到初始的日期时间对象 （min参数的设置）：{year: 2017, month: 8, date: 18, hours: 0, minutes: 0, seconds: 0}
},

【示例】ready 钩子配置项

change

/**
* @brief: 日期时间被切换后的回调
* @param {*} value 得到（选择后的）日期的值
* @param {*} date 得到（选择后的）日期时间对象 {year: 2017, month: 8, date: 18, hours: 0, minutes: 0, seconds: 0}
* @param {*} endDate 得结束的日期时间对象，开启范围选择（range: true）才会返回。对象成员同上。
* @return {*}
*/
change: function (value, date, endDate) {
 console.log('change - 日期时间被切换后的回调')
 console.log(value) // 得到日期生成的值，如：2017-08-18
 console.log(date) // 得到日期时间对象：{year: 2017, month: 8, date: 18, hours: 0, minutes: 0, seconds: 0}
 console.log(endDate) // 得结束的日期时间对象，
 // date, endDate开启范围选择（range: true）才会返回。对象成员同上。
 // 注意：选择日期时，不触发
},

【注意】

年月日时间被切换时都会触发；
！！选择日期时不触发；
开启 range 参数时，才会返回结束日期时间对象/endDate ;

【示例】change 钩子配置项

done

/**
* @brief: 控件选择完毕后的回调
* @param {*} value 得到（选择后的）日期的值
* @param {*} date 得到（选择后的）日期时间对象 {year: 2017, month: 8, date: 18, hours: 0, minutes: 0, seconds: 0}
* @param {*} endDate 得结束的日期时间对象，开启范围选择（range: true）才会返回。对象成员同上。
* @return {*}
*/
done: function (value, date, endDate) {
 console.log(value) // 得到日期生成的值，如：2017-08-18
 console.log(date) // 得到日期时间对象：{year: 2017, month: 8, date: 18, hours: 0, minutes: 0, seconds: 0}
 console.log(endDate) // 得结束的日期时间对象，开启范围选择（range: true）才会返回。对象成员同上。
},

【注意】区分 change & done
change 是日期被切换，控件打开一次可触发多次；
done 是日期选择被确定，控件打开一次可触发一次；

【示例】done 钩子配置项

5、实例方法

事实上，执行核心方法 laydate.render(options) 会返回一个当前实例对象。其中包含一些成员属性和方法，比如：hint 方法

var ins1 = laydate.render({
  elem: '#test',
  change: function (value, date, endDate) {
    ins1.hint(value) //在控件上弹出value值
  },
})

【示例】done 钩子配置项
经验：只适合在 chang 回调中弹出提示
在这里插入图片描述

其他方法

见文档，高版本添加的 api。

该文章已被构建成可运行项目