《layui宇宙版教程》：日期和时间组件laydate

最新推荐文章于 2024-09-16 23:57:37 发布

立志做一个佳娃~

最新推荐文章于 2024-09-16 23:57:37 发布

阅读量2.1k

点赞数 2

分类专栏： Layui宇宙版教程文章标签： layui 前端

本文链接：https://blog.csdn.net/ghyghost/article/details/108115878

版权

Layui宇宙版教程专栏收录该内容

40 篇文章 16 订阅

订阅专栏

《Layui宇宙版教程》提供2000人的QQ群进行交流学习，QQ群号：1046961650，或通过手机QQ扫描二维码进入：

1.19 日期和时间组件laydate

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

模块加载名称：laydate。

独立版本官方网址：

http://www.layui.com/laydate

1.19.1 使用方式

laydate有两种使用方式，如图1-xx所示。

1.19.1.1 独立使用

当独立使用时，需要到官网：

http://www.layui.com/laydate/

下载laydate，并在项目中进行引用，官网提供了demo.html做为使用案例。

测试代码如下：

<!DOCTYPE html>

<html>

<head>

</head>

<body>

</div>

//执行一个laydate实例

laydate.render({

elem: '#test1' //指定元素

});

</script>

</body>

</html>

运行效果如图1-xx所示。

1.19.1.2 模块化使用

测试代码如下：

<!DOCTYPE html>

<html>

<head>

</head>

<body>

</div>

var laydate = layui.laydate;

//执行一个laydate实例

laydate.render({

elem: '#test1' //指定元素

});

</script>

</body>

</html>

运行效果如图1-xx所示。

1.19.2 基础参数选项

通过核心方法：

laydate.render(options);

来设置基础参数。

也可以通过方法：

laydate.set(options);

来设置全局基础参数。

1.19.3 elem绑定元素

类型：String/DOM，默认值：无

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

测试代码如下：

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<br />

</div>

var laydate = layui.laydate;

laydate.render({

elem: '#test1'

});

laydate.render({

elem: document.getElementById('test2')

});

</script>

</body>

</html>

1.19.4 type控件选择类型

类型：String，默认值date。

用于单独提供不同的选择器类型，可选值如图1-xx所示。

测试代码如下：

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<br />

<br />

<br />

<br />

</div>

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>

</body>

</html>

运行效果如图1-xx所示。

1.19.5 range开启左右面板范围选择

类型：Boolean/String，默认值false。

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

测试代码如下：

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<br />

<br />

<br />

<br />

</div>

var laydate = layui.laydate;

//年范围选择

laydate.render({

elem: '#test1',

type: 'year',

range: true //或 range: '~' 来自定义分割字符

});

//年月范围选择

laydate.render({

elem: '#test2',

type: 'month',

range: '~' //或 range: '~' 来自定义分割字符

});

//日期范围选择

laydate.render({

elem: '#test3',

range: '~' //或 range: '~' 来自定义分割字符

});

//时间范围选择

laydate.render({

elem: '#test4',

type: 'time',

range: '~' //或 range: '~' 来自定义分割字符

});

//日期时间范围选择

laydate.render({

elem: '#test5',

type: 'datetime',

range: '~' //或 range: '~' 来自定义分割字符

});

</script>

</body>

</html>

1.19.6 format自定义格式

类型：String，默认值yyyy-MM-dd。

通过日期时间各自的格式符和长度来设置一个所需要的日期格式。layDate支持的格式如图1-xx所示。

通过上述不同的格式符组合成一段日期时间字符串，可任意排版，如图1-xx所示。

测试代码如下：

<!DOCTYPE html>

<html>

<head>

</head>

<body>

</div>

var laydate = layui.laydate;

//自定义日期格式

laydate.render({

elem: '#test1',

format: 'yyyy年MM月dd日' //可任意组合

});

</script>

</body>

</html>

运行效果如图1-xx所示。

1.19.7 value初始值

类型：String，默认值new Date()。

支持传入符合format参数设置的日期格式字符，或者new Date()。

测试代码如下：

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<br />

</div>

var laydate = layui.laydate;

//传入符合format格式的字符给初始值

laydate.render({

elem: '#test1',

value: '2018-08-18' //必须遵循format参数设置的格式

});

//传入Date对象给初始值

laydate.render({

elem: '#test2',

value: new Date(1534766888000) //参数即为：2018-08-20 20:08:08 的时间戳

});

</script>

</body>

</html>

运行效果如图1-xx所示。

1.19.8 isInitValue初始值填充

类型：Boolean，默认值true。

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

测试代码如下：

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<br />

</div>

var laydate = layui.laydate;

//传入符合format格式的字符给初始值

laydate.render({

elem: '#test1',

value: '2018-08-18', //必须遵循format参数设置的格式

isInitValue: false

});

//传入Date对象给初始值

laydate.render({

elem: '#test2',

value: new Date(1534766888000), //参数即为：2018-08-20 20:08:08 的时间戳

isInitValue: false

});

</script>

</body>

</html>

运行效果如图1-xx所示。

1.19.9 min/max最小/最大范围内的日期时间值

类型：string，默认值min: '1900-1-1'、max: '2099-12-31'。

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

测试代码如下：

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<br />

<br />

<br />

</div>

var laydate = layui.laydate;

//日期有效范围只限定在：2017年

laydate.render({

elem: '#test1',

min: '2017-1-1',

max: '2017-12-31'

});

//日期有效范围限定在：过去一周到未来一周

laydate.render({

elem: '#test2',

min: -7, //7天前

max: 7 //7天后

});

//日期时间有效范围的设置:

laydate.render({

elem: '#test3',

type: 'datetime',

min: '2017-8-11 12:30:00',

max: '2017-8-18 12:30:00'

});

//时间有效范围设置在: 上午九点半到下午五点半

laydate.render({

elem: '#test4',

type: 'time',

min: '09:30:00',

max: '17:30:00'

});

</script>

</body>

</html>

毫不保留地说，min和max参数是两个非常强大的存在，合理运用，可帮助用户在日期与时间的选择上带来更为友好的约束与体验。

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

类型：String，默认值focus。如果绑定的元素非输入框，则默认事件为：click。

测试代码如下：

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<br />

<br />

<br />

<br />

</div>

var laydate = layui.laydate;

laydate.render({

elem: '#test1',

});

laydate.render({

elem: '#test2',

trigger: 'click' //采用click弹出

});

laydate.render({

elem: '#test3',

trigger: 'click' //采用click弹出

});

</script>

</body>

</html>

1.19.11 show默认显示

类型：Boolean，默认值false。

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

测试代码如下：

<!DOCTYPE html>

<html>

<head>

</head>

<body>

</div>

var laydate = layui.laydate;

//默认显示

laydate.render({

elem: '#test1',

show: true //直接显示

});

//外部事件调用

lay('#test2').on('click', function(e) { //假设test2是一个按钮

laydate.render({

elem: '#test3',

show: true, //直接显示

closeStop: '#test2',

//这里代表的意思是：点击test2所在元素阻止关闭事件冒泡。

//如果不设置，则无法弹出控件

});

</script>

</body>

</html>

1.19.12 position定位方式

类型：String，默认值absolute。

用于设置控件的定位方式，有如图1-xx所示的三种可选值。

测试代码如下：

<!DOCTYPE html>

<html>

<head>

</head>

<body>

</div>

<br />

</div>

var laydate = layui.laydate;

//abolute绝对定位，始终吸附在绑定元素周围，是默认值。

laydate.render({

elem: '#test1',

position: 'abolute',

change: function(value, date) { //监听日期被切换

$('#testView').html(value);

}

});

//fixed固定定位，初始吸附在绑定元素周围，

//不随浏览器滚动条所左右。一般用于在固定定位的弹层中使用。

laydate.render({

elem: '#test2',

position: 'fixed',

change: function(value, date) { //监听日期被切换

$('#testView').html(value);

}

});

//static嵌套在指定容器中。

laydate.render({

elem: '#test3',

position: 'static',

change: function(value, date) { //监听日期被切换

$('#testView').html(value);

}

});

</script>

</body>

</html>

1.19.13 zIndex层叠顺序

类型：Number，默认值66666666。

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

测试代码如下：

<!DOCTYPE html>

<html>

<head>

</head>

<body>

</div>

</div>

var laydate = layui.laydate;

//设置控件的层叠顺序

laydate.render({

elem: '#test1',

zIndex: 66666666

});

</script>

</body>

</html>

被覆盖了。

<!DOCTYPE html>

<html>

<head>

</head>

<body>

</div>

</div>

var laydate = layui.laydate;

//设置控件的层叠顺序

laydate.render({

elem: '#test1',

zIndex: 66666668

});

</script>

</body>

</html>

正确显示日期弹出框。

1.19.14 showBottom是否显示底部栏

类型：Boolean，默认值true。

如果设置false，将不会显示控件的底部栏区域，底部栏区域如图1-xx所示。

测试代码如下：

<!DOCTYPE html>

<html>

<head>

</head>

<body>

</div>

var laydate = layui.laydate;

//不显示底部栏

laydate.render({

elem: '#test1',

showBottom: false

});

</script>

</body>

</html>

运行效果如图1-xx所示。

1.19.15 btns工具按钮

类型：Array，默认值['clear', 'now', 'confirm']。

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

测试代码如下：

<!DOCTYPE html>

<html>

<head>

</head>

<body>

</div>

var laydate = layui.laydate;

//只显示清空和确认

laydate.render({

elem: '#test1',

btns: ['clear', 'confirm']

});

</script>

</body>

</html>

运行效果如图1-xx所示。

1.19.16 lang语言

类型：String，默认值cn。

内置了两种语言版本：cn（中文版）、en（国际版，即英文版）。没有开放自定义语言，是为了避免繁琐的配置。

测试代码如下：

<!DOCTYPE html>

<html>

<head>

</head>

<body>

</div>

var laydate = layui.laydate;

//国际版

laydate.render({

elem: '#test1',

lang: 'en'

});

</script>

</body>

</html>

运行效果如图1-xx所示。

1.19.17 theme主题

类型：String，默认值：default

内置了多种主题，theme的可选值有：default（默认简约）、molv（墨绿背景）、#颜色值（自定义颜色背景）、grid（格子主题）

测试代码如下：

<!DOCTYPE html>

<html>

<head>

</head>

<body>

</div>

var laydate = layui.laydate;

//墨绿背景主题

laydate.render({

elem: '#test1',

theme: 'molv'

});

//自定义背景色主题 - 非常实用

laydate.render({

elem: '#test2',

theme: '#393D49'

});

//格子主题

laydate.render({

elem: '#test3',

theme: 'grid'

});

</script>

</body>

</html>

另外，还可以传入其它字符，比如：

theme: 'xxx'

那么控件将会多出一个class="laydate-theme-xxx"的CSS类，以便单独定制主题。

1.19.18 calendar是否显示公历节日

类型：Boolean，默认值false。

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

测试代码如下：

<!DOCTYPE html>

<html>

<head>

</head>

<body>

</div>

var laydate = layui.laydate;

//允许显示公历节日

laydate.render({

elem: '#test1',

calendar: true

});

</script>

</body>

</html>

运行效果如图1-xx所示。

1.19.19 mark标注重要日子

类型：Object，默认值无。

可以自定义标注重要日子，比如结婚纪念日，日程等等。它分为以下三种：

测试代码如下：

<!DOCTYPE html>

<html>

<head>

</head>

<body>

</div>

var laydate = layui.laydate;

//标注重要日子

var ins1 = laydate.render({

elem: '#test1',

mark: {

'0-03-06': '生日',

'0-12-31': '跨年', //每年12月31日

'0-0-10': '工资', //每个月10号

'2017-8-15': '', //具体日期

'2020-8-3': '学习', //如果为空字符，则默认显示数字+徽章

'2020-8-21': '完毕'

done: function(value, date) {

if (date.year === 2017 && date.month === 8 && date.date === 15) { //点击2017年8月15日，弹出提示语

ins1.hint('中国人民抗日战争胜利72周年');

}

});

</script>

</body>

</html>

1.19.20 ready控件初始打开的回调

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

测试代码如下：

<!DOCTYPE html>

<html>

<head>

</head>

<body>

</div>

var laydate = layui.laydate;

laydate.render({

elem: '#test1',

ready: function(date) {

console.log(date); //得到初始的日期时间对象：{year: 2017, month: 8, date: 18, hours: 0, minutes: 0, seconds: 0}

}

});

</script>

</body>

</html>

运行效果如图1-xx所示。

1.19.21 done控件选择完毕后的回调

点击”日期”、”清空”、”现在”、”确定”均会触发。回调返回三个参数：生成的值、日期时间对象、结束的日期时间对象

测试代码如下：

<!DOCTYPE html>

<html>

<head>

</head>

<body>

</div>

var laydate = layui.laydate;

laydate.render({

elem: '#test1',

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）才会返回。对象成员同上。

}

});

</script>

</body>

</html>

运行效果如图1-xx所示。

1.19.22 其它方法

其它方法如图1-xx所示。

测试代码如下：

<!DOCTYPE html>

<html>

<head>

</head>

<body>

</div>

var laydate = layui.laydate;

alert(laydate.getEndDate(2, 2020));

</script>

</body>

</html>

运行效果如图1-xx所示。

立志做一个佳娃~

关注

2
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录