layui-laydate时间日历控件使用方法详解

简介

layui-laydate是layui前端框架中的一种日期时间选择控件，它具有丰富的功能，例如选择日期时间范围、自定义格式、快速选择等，还支持各种主题风格样式。

安装

在使用layui-laydate之前，需要先引入layui框架和layui-laydate控件，可以通过以下两种方式安装：

方式一：使用CDN链接

在网页的头部，加入以下两行代码：

<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/layui/2.6.8/css/layui.css" integrity="sha384-AmxAGBupiLKTGjt/jwYcbnTzs92oA/UpnqzqE2/fAMp9unFJLeMfo5ppaYw2gjmS" crossorigin="anonymous">
<script src="https://cdn.bootcdn.net/ajax/libs/layui/2.6.8/layui.js" integrity="sha384-Ej0Qz1s8oF7C9K9z3tA6P0nQWbtVIu2ayY87MmtdUicLGSzwsAUwLZV6v5c7aZSs" crossorigin="anonymous"></script>

方式二：通过npm安装

在终端中输入以下命令进行安装：

npm install layui-laydate

安装完成后，通过以下代码引入：

<link rel="stylesheet" href="node_modules/layui-laydate/src/theme/default/laydate.css">
<script src="node_modules/layui-laydate/src/laydate.js"></script>

基本用法

添加一个日期选择输入框，例如：

<input type="text" name="date" id="date" autocomplete="off" class="layui-input">

然后在js中进行初始化：

layui.use('laydate', function(){
  var laydate = layui.laydate;

  laydate.render({
    elem: '#date'
  });
});

上述语句的含义是：通过layui.use方法加载laydate模块，然后根据需要进行初始化。在laydate.render方法中，将需要进行日期选择控件绑定的元素id传入，完成控件的渲染。

进阶用法

layui-laydate控件除了基本的日期选择功能外，还有一些进阶用法，下面通过示例进行介绍。

选择范围

通过range: true参数可以实现日期范围选择功能。

<input type="text" name="daterange" id="daterange" autocomplete="off" class="layui-input">

然后在js中进行初始化：

layui.use('laydate', function(){
  var laydate = layui.laydate;

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

自定义格式

通过format参数可以实现日期时间的自定义格式。默认格式为：yyyy-MM-dd。

<input type="text" name="datetime" id="datetime" autocomplete="off" class="layui-input">

然后在js中进行初始化：

layui.use('laydate', function(){
  var laydate = layui.laydate;

  laydate.render({
    elem: '#datetime',
    type: 'datetime',
    format: 'yyyy年MM月dd日 HH:mm:ss'
  });
});

上述代码实现了以汉字格式显示日期时间。