027-日期和时间组件

1. layDate其中主要以: 年选择器、年月选择器、日期选择器、时间选择器、日期时间选择器五种类型的选择方式为基本核心, 并且均支持范围选择(即双控件)。内置强劲的自定义日期格式解析和合法校正机制, 含中文版和国际版, 主题简约却又不失灵活多样。由于内部采用的是零依赖的原生JavaScript编写, 因此又可作为独立组件使用。

2. 模块加载名称: laydate。

3. 基础参数选项

3.1. 通过核心方法: laydate.render(options)来设置基础参数。也可以通过方法: laydate.set(options)来设定全局基础参数。

4. elem - 绑定元素

4.1. 类型: String/DOM, 默认值: 无。

4.2. 必填项, 用于绑定执行日期渲染的元素, 值一般为选择器或DOM对象。

5. 作为独立组件使用

5.1. 下载layDate独立版本组件包:

5.2. 引入laydate.js之后即可调用方法

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title>使用layDate独立版</title></head><body><input type="text" placeholder="请选择日期" id="test1"><script type="text/javascript" src="layDate-v5.0.9/laydate/laydate.js"></script><script type="text/javascript">// 执行一个laydate实例laydate.render({elem: '#test1' // 指定元素});</script></body>
</html>

5.3. 效果图

6. type - 控件选择类型

6.1. 类型: String, 默认值: date。

6.2. 用于单独提供不同的选择器类型, 可选值如下表:

6.3. 实例

<script type="text/javascript">layui.use('laydate', function(){var laydate = layui.laydate;// 年选择器laydate.render({elem: '#test1',type: 'year'});// 年月选择器laydate.render({elem: '#test2',type: 'month'});              // 日期选择器laydate.render({elem: '#test3',type: 'date' // 默认, 可不填});// 时间选择器laydate.render({elem: '#test4',type: 'time'});// 日期时间选择器laydate.render({elem: '#test5',type: 'datetime'});});
</script>

7. range - 开启左右面板范围选择

7.1. 类型: Boolean/String, 默认值: false。

7.2. 如果设置true, 将默认采用"-"分割。你也可以直接设置分割字符。五种选择器类型均支持左右面板的范围选择。

<script type="text/javascript">layui.use('laydate', function(){var laydate = layui.laydate;// 年范围选择器laydate.render({elem: '#test6',type: 'year',range: true});// 年月范围选择器laydate.render({elem: '#test7',type: 'month',range: '~'});             // 日期范围选择器laydate.render({elem: '#test8',type: 'date' // 默认, 可不填,range: '~'});// 时间范围选择器laydate.render({elem: '#test9',type: 'time',range: true});// 日期时间范围选择器laydate.render({elem: '#test10',type: 'datetime',range: '~'});});
</script>

8. format - 自定义格式

8.1. 类型: String, 默认值: yyyy-MM-dd。

8.2. 通过日期时间各自的格式符和长度, 来设定一个你所需要的日期格式。layDate支持的格式如下:

8.3. 通过上述不同的格式符组合成一段日期时间字符串, 可任意排版, 如下所示:

8.4. 实例

<script type="text/javascript">layui.use('laydate', function(){var laydate = layui.laydate;// 年格式化laydate.render({elem: '#test11',type: 'year',format: 'yyyy年'});// 年月格式化laydate.render({elem: '#test12',type: 'month',format: 'yyyy年MM月'});             // 日期格式化laydate.render({elem: '#test13',type: 'date' // 默认, 可不填,format: 'yyyy年MM月dd日'});// 时间格式化laydate.render({elem: '#test14',type: 'time',format: '北京时间: HH时mm分ss秒'});// 日期时间格式化laydate.render({elem: '#test15',type: 'datetime',format: 'yyyy年MM月dd日 HH时mm分ss秒'});});
</script>

9. value - 初始值

9.1. 类型: String, 默认值: new Date()。

9.2. 支持传入符合format参数设定的日期格式字符, 或者new Date()。

10. isInitValue - 初始值填充

10.1. 类型: Boolean, 默认值: true。

10.2. 用于控制是否自动向元素填充初始值(需配合value参数使用)。

11. min/max - 最小/大范围内的日期时间值

11.1. 类型: string, 默认值: min: '1900-1-1'、max: '2099-12-31'。

11.2. 设定有限范围内的日期或时间值, 不在范围内的将不可选中。这两个参数的赋值非常灵活, 主要有以下几种情况:

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

12.1. 类型: String, 默认值: focus。

12.2. 如果绑定的元素非输入框, 则默认事件为: click。

13. show - 默认显示

13.1. 类型: Boolean, 默认值: false。

13.2. 如果设置: true, 则控件默认显示在绑定元素的区域。通常用于外部事件调用控件。

14. position - 定位方式

14.1. 类型: String, 默认值: absolute。

14.2. 用于设定控件的定位方式, 有以下三种可选值:

15. zIndex - 层叠顺序

15.1. 类型: Number, 默认值: 66666666。

15.2. 一般用于解决与其它元素的互相被遮掩的问题。如果position参数设为static时, 该参数无效。

16. showBottom - 是否显示底部栏

16.1. 类型: Boolean, 默认值: true。

16.2. 如果设置false, 将不会显示控件的底部栏区域。

17. btns - 工具按钮

17.1. 类型: Array, 默认值: ['clear', 'now', 'confirm']。

17.2. 右下角显示的按钮, 会按照数组顺序排列, 内置可识别的值有: clear、now、confirm。

18. lang - 语言

18.1. 类型: String, 默认值: cn。

18.2. 我们内置了两种语言版本: cn(中文版)、en(国际版, 即英文版)。

19. theme - 主题

19.1. 类型: String, 默认值: default。

19.2. theme的可选值有: default(默认简约)、molv(墨绿背景)、grid(格子主题)。

19.3. 另外, 你还可以传入其它字符, 如: theme: 'xxx', 那么控件将会多出一个class="laydate-theme-xxx"的CSS类, 以便于你单独定制主题。

20. calendar - 是否显示公历节日

20.1. 类型: Boolean, 默认值: false。

20.2. layui内置了一些我国通用的公历重要节日, 通过设置true来开启。国际版不会显示。

21. mark - 标注重要日子

21.1. 类型: Object, 默认值: 无。

21.2. calendar参数所代表的公历节日更多情况下是一个摆设。因此, 我们还需要自定义标注重要日子, 比如: 结婚纪念日?日程表等?它分为以下两种:

22. 控件初始打开的回调-ready

22.1. 控件在打开时触发, 回调返回一个参数: 初始的日期时间对象。

ready: function(date){console.log(date);
}

23. 日期时间被切换后的回调-change

23.1. 年月日时间被切换时都会触发。回调返回三个参数, 分别代表: 生成的值、日期时间对象、结束的日期时间对象。

change: function(value, date, endDate){console.log(value, date, endDate);
}

24. 控件选择完毕后的回调-done

24.1. 点击日期、清空、现在、确定均会触发。回调返回三个参数, 分别代表: 生成的值、日期时间对象、结束的日期时间对象。

done: function(value, date, endDate){console.log(value, date, endDate);
}

25. 弹出控件提示

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

var ins = laydate.render({elem: '#test21',type: 'datetime',change: function(value, date, endDate){ins.hint(value); // 在控件上弹出value值console.log(value, date, endDate);}
});

26. 其它方法

27. 例子

27.1. 代码

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title>日期模块 - layui</title><link rel="stylesheet" href="layui/css/layui.css"><script type="text/javascript" src="layui/layui.js"></script></head><body><big>年选择器:</big><div class="layui-inline"><input type="text" class="layui-input" id="test1"></div><big>年月选择器:</big><div class="layui-inline"><input type="text" class="layui-input" id="test2"></div><big>日期选择器:</big><div class="layui-inline"><input type="text" class="layui-input" id="test3"></div><big>时间选择器:</big><div class="layui-inline"><input type="text" class="layui-input" id="test4"></div><big>日期时间选择器:</big><div class="layui-inline"><input type="text" class="layui-input" id="test5"></div><br /><br /><big>年范围选择器:</big><div class="layui-inline"><input type="text" class="layui-input" id="test6"></div><big>年月范围选择器:</big><div class="layui-inline"><input type="text" class="layui-input" id="test7"></div><big>日期范围选择器:</big><div class="layui-inline"><input type="text" class="layui-input" id="test8"></div><big>时间范围选择器:</big><div class="layui-inline"><input type="text" class="layui-input" id="test9"></div><big>日期时间范围选择器:</big><div class="layui-inline"><input type="text" class="layui-input" id="test10"></div><br /><br /><big>年格式化:</big><div class="layui-inline"><input type="text" class="layui-input" id="test11"></div><big>年月格式化:</big><div class="layui-inline"><input type="text" class="layui-input" id="test12"></div><big>日期格式化:</big><div class="layui-inline"><input type="text" class="layui-input" id="test13"></div><big>时间格式化:</big><div class="layui-inline"><input type="text" class="layui-input" id="test14"></div><big>日期时间格式化:</big><div class="layui-inline"><input type="text" class="layui-input" id="test15"></div><br /><br /><big>墨绿主题:</big><div class="layui-inline"><input type="text" class="layui-input" id="test16"></div><big>自定义颜色背景:</big><div class="layui-inline"><input type="text" class="layui-input" id="test17"></div><big>格子主题:</big><div class="layui-inline"><input type="text" class="layui-input" id="test18"></div><br /><br /><big>定位fixed:</big><div class="layui-inline"><input type="text" class="layui-input" id="test19"></div><br /><br /><h2>直接嵌套在指定容器中:</h2><div class="layui-block" id="test20"></div><br /><br /><big>标注重要日子:</big><div class="layui-inline"><input type="text" class="layui-input" id="test21"></div><br /><br /><h2>获取某年某月的最后一天:</h2><div style="width: 300px; height: 100px; background: pink;" class="layui-inline" id="test22"></div><br /><br /><h2>获取当前年某月的最后一天:</h2><div style="width: 300px; height: 200px; background: green;" class="layui-inline" id="test23"></div><script type="text/javascript">layui.use(['laydate', 'jquery'], function(){var laydate = layui.laydate,$ = layui.jquery;// 年选择器laydate.render({elem: '#test1',type: 'year'});// 年月选择器laydate.render({elem: '#test2',type: 'month'});               // 日期选择器laydate.render({elem: '#test3',type: 'date' // 默认, 可不填,min: -7,max: 7});// 时间选择器laydate.render({elem: '#test4',type: 'time'});// 日期时间选择器laydate.render({elem: '#test5',type: 'datetime',min: '2021-1-1 00:00:00',max: '2021-12-31 23:59:59'});// 年范围选择器laydate.render({elem: '#test6',type: 'year',range: true});// 年月范围选择器laydate.render({elem: '#test7',type: 'month',range: '~'});             // 日期范围选择器laydate.render({elem: '#test8',type: 'date' // 默认, 可不填,range: '~',min: (new Date()).getTime() - 86400000 * 10,max: (new Date()).getTime() + 86400000 * 10});// 时间范围选择器laydate.render({elem: '#test9',type: 'time',range: true});// 日期时间范围选择器laydate.render({elem: '#test10',type: 'datetime',range: '~'});// 年格式化laydate.render({elem: '#test11',type: 'year',format: 'yyyy年',value: new Date(),isInitValue: true});// 年月格式化laydate.render({elem: '#test12',type: 'month',format: 'yyyy年MM月',value: new Date(),isInitValue: true});              // 日期格式化laydate.render({elem: '#test13',type: 'date' // 默认, 可不填,format: 'yyyy年MM月dd日',value: new Date(),isInitValue: true});// 时间格式化laydate.render({elem: '#test14',type: 'time',format: '北京时间: HH时mm分ss秒',value: new Date(),isInitValue: true});// 日期时间格式化laydate.render({elem: '#test15',type: 'datetime',format: 'yyyy年MM月dd日 HH时mm分ss秒',value: new Date(),isInitValue: true});// 墨绿主题laydate.render({elem: '#test16',type: 'year',theme: 'molv',lang: 'en',trigger: 'focus'});// 自定义颜色背景laydate.render({elem: '#test17',type: 'month',theme: '#393D49',lang: 'en',showBottom: false});              // 格子主题laydate.render({elem: '#test18',type: 'date' // 默认, 可不填,theme: 'grid',lang: 'en',showBottom: false});laydate.render({elem: '#test19',type: 'time',position: 'fixed'});// 直接嵌套在指定容器中laydate.render({elem: '#test20',type: 'datetime',position: 'static',calendar: true});// 标记重要日子var ins = laydate.render({elem: '#test21',type: 'datetime',mark: { '0-8-15': '中秋节' // 0即代表每一年,'0-0-28': '爬山' // 0-0即代表每年每月,'2020-1-1': '结婚'} ,ready: function(date){console.log(date);},change: function(value, date, endDate){ins.hint(value); // 在控件上弹出value值console.log(value, date, endDate);},done: function(value, date, endDate){console.log(value, date, endDate);}});$('#test22').text('今年2月有' + laydate.getEndDate(2) + '天');$('#test23').text('2020年2月有' + laydate.getEndDate(2, 2020) + '天');});</script></body>
</html>

27.2. 效果图

027-日期和时间组件相关推荐

LayUI中的基本元素之日期和时间组件文档
前言最近在准备找工作的事项,但是作为一个后台也是需要了解一些前端框架的.就目前的来说有大火的VUE,但是VUE还是存在一定的学习成本,所以决定先从对后台友好的LayUI开始入手先做一些小项目练练手, ...
layer日期和时间组件限制最大日期和 js获取昨天日期
layer日期和时间组件限制最大日期 html: <input class="layui-input" id="test" autocomplete=&q ...
《layui宇宙版教程》：日期和时间组件laydate
<Layui宇宙版教程>提供2000人的QQ群进行交流学习,QQ群号:1046961650,或通过手机QQ扫描二维码进入: 1.19 日期和时间组件laydate 主要以年选择器.年月选择 ...
Yii2 日期和时间组件
日期组件,时间组件在平时开发中是必不可少的.今天我们就来谈谈在yii2中的超好用的时间组件. 分享之前我们先预览下效果,看看到底怎么个好用法. 当然啦,好用不好用在于自我的感觉,光看上面的图片是感受不 ...
layDate 日期与时间组件
在日常的网页开发过程中,日期组件已经成为不可或缺的组件之一.同时,随着广大杰出攻城狮的不懈努力,也出现了很多优秀的日期组件,其中我个人觉得 layDate 日期组件是一个非常不错的组件,简洁易用,样式 ...
单独使用 laydate 日期时间组件
layui 日期和时间组件官方文档需要注意几点: 下载压缩包后,复制整个 laydate 文件夹放到项目中,里面的文件不要改动位置,否则会报错: 在移动端使用时,要给 input 添加 readon ...
BootStrap中的日期时间组件datetimepicker
使用BootStrap中的日期时间组件需要引入以下三个文件:  <link rel="stylesheet" th:href="@ ...
Swing 写的日期时间组件
Swing 写的日期时间组件在网上收集的swing时间组件完善了一下,日期上下按钮可以点击,闰年平年判断,月份是多少天自动更新改变.希望大家继续完善. MainApp import java.awt ...
小程序日期加时间筛选组件
小程序日期加时间筛选组件新建component->date-time-picker .wxml <picker mode="multiSelector" class= ...
设置日期和时间的设计与实现
完成日期和时间的设计界面如下: 设置日期和时间用到的是DatePicker和TimePicker组件: 其次是获得系统的时间是通过Calendar完成,方式如下: private Calendar m ...

027-日期和时间组件

027-日期和时间组件相关推荐

最新文章

热门文章