前端主流日期时间控件laydate介绍【推荐下这款日期组件】

Post author:xfxia
Post published:2023年9月7日
Post category:其他

laydate介绍

背景介绍

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

获得 layDate 文件包后，解压并将 laydate 整个文件夹（不要拆分结构）存放到项目的任意目录，使用时，只需引入 laydate.js 即可。

下载网址为：https://www.layui.com/

以下代码日期控件格式为中文版的yyyy-mm-dd。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>layDate基本用法</title>
</head>
<body>
<input type="text" id="test">
<script src="/laydate/laydate.js"></script> <!-- 改成对应路径导入laydate.js文件 -->
<script>
//执行一个laydate实例
laydate.render({
  elem: '#test' //指定元素
});
</script>
</body>
</html>

主要用法之英文版的yyyy-mm-dd，只需将javascript中执行的laydate实例中对应的lang属性设置为’en’，即显示的日期控件为英文格式。

<script>
laydate.render({
  elem: '#test'
  ,lang: 'en'
}); 
</script>

主要用法之年选择器，只需将javascript中laydate实例中type属性设置成’year’即可。与之同原理，年月选择器的type属性为’month’；时间选择器的type属性为’time’；日期时间选择器的type属性为’datetime’

laydate.render({
  elem: '#test'
  ,type: 'year'
});

主要用法之日期范围选择；与此同理，若为年范围，则先将type设置为’year’，再将range设置为’true’；年月范围，则先将type设置为’month’，再将range设置为’true’；时间范围，则先将type设置为’time’，再将range设置为’true’；日期时间范围，则先将type设置为’datetime’，再将range设置为’true’；

laydate.render({
  elem: '#test'
  ,range: true
});

主要用法之自定义格式yyyy年MM月dd日；若所需其他的格式，则只需将format属性设置成所需的格式。

laydate.render({
  elem: '#test'
  ,format: 'yyyy年MM月dd日'
});

主要用法之日期时间范围自定义格式

laydate.render({
  elem: '#test'
  ,type: 'datetime'
  ,range: '到'
  ,format: 'yyyy年M月d日H时m分s秒'
});

主要用法之公历重要日子

//开启公历节日
laydate.render({
  elem: '#test'
  ,calendar: true
});

主要用法之公历重要日子

//自定义重要日
laydate.render({
  elem: '#test'
  ,mark: {
    '0-10-14': '生日'
    ,'0-12-31': '跨年' //每年的日期
    ,'0-0-10': '工资' //每月某天
    ,'0-0-15': '月中'
    ,'2017-8-15': '' //如果为空字符，则默认显示数字+徽章
    ,'2099-10-14': '呵呵'
  }
  ,done: function(value, date){
    if(date.year === 2017 && date.month === 8 && date.date === 15){ //点击2017年8月15日，弹出提示语
      alert('这一天是：中国人民抗日战争胜利72周年');
    }
  }
});

主要用法之控制可选的日期和时间

//限定可选日期
var ins22 = laydate.render({
  elem: '#test-limit1'
  ,min: '2016-10-14'
  ,max: '2080-10-14'
  ,ready: function(){
    ins22.hint('日期可选值设定在 <br> 2016-10-14 到 2080-10-14');
  }
});

主要用法之前后若干天可选

//前后若干天可选，这里以7天为例
laydate.render({
  elem: '#test-limit2'
  ,min: -7
  ,max: 7
});

主要用法之限定可选时间

laydate.render({
  elem: '#test-limit3'
  ,type: 'time'
  ,min: '09:30:00'
  ,max: '17:30:00'
  ,btns: ['clear', 'confirm']
});

更多内容可链接网址https://www.layui.com/doc/modules/laydate.html

最后推荐一个公众号，一枚IT技术人成长路上关于生活和职场的思考，欢迎书友们前来交流和分享心得

在这里插入图片描述

原文链接：https://blog.csdn.net/fq_fly/article/details/103596652

laydate介绍

最后推荐一个公众号，一枚IT技术人成长路上关于生活和职场的思考，欢迎书友们前来交流和分享心得

你可能也喜欢