layui时间控件选择时间

介绍

layui 是一款基于领先的 Web 前端技术 HTML、CSS、JavaScript 为主要技术，由面向富客户端的前端 UI 框架，旨在优化前端界面开发流程。而其中的时间控件（datetimepicker）能够帮助我们快速地选择时间。

使用步骤

在使用时，我们需要按照以下步骤来操作：

引入相关文件和代码

首先，在我们的 HTML 文件中引入以下文件和代码：

<link rel="stylesheet" href="layui/css/layui.css">
<script src="layui/layui.all.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/moment.js/2.29.1/moment.min.js"></script>
<!-- 注意，在使用前要将代码放在 jquery 或者 zepto 后面 -->
<script src="layui/layui.datepicker.js"></script>

使用时间控件

接下来，我们需要在对应的 input 标签上设置一些属性，来使用时间控件：

<input readonly class="layui-input" name="date" id="date" value="">
<script>
    layui.use(['datepicker'], function(){
        var $ = layui.jquery,
            datepicker = layui.datepicker;
        datepicker.render({
            elem: '#date',
            type: 'date',
            format: 'yyyy-MM-dd',
            range: true
        });
    });
</script>

设置时间格式和区域范围

通过设置 format 属性，可以设置我们希望选择的时间格式。而 range 属性则可以设置我们希望选择的时间区域范围。比如：

datepicker.render({
    elem: '#date',
    type: 'date',
    format: 'yyyy年MM月dd日',
    range: true
});

可以让我们选择的时间区域限制在当前时间往后的三天：

datepicker.render({
    elem: '#date',
    type: 'date',
    format: 'yyyy年MM月dd日',
    min: moment().add(1, 'days').format('YYYY-MM-DD'),
    max: moment().add(3, 'days').format('YYYY-MM-DD')
});

常用的方法

datetimepicker 支持了多种方法，满足不同的需求：

getValue

获取当前选中日期，返回值是一个数组：[startDate, endDate]。

$("input[name='date']").on('change', function(){
    console.log(datepicker.getVal());
});

setDate

设置控件的选中值，接收的参数是一个数组：[startDate, endDate]。

$("button").on('click', function(){
    datepicker.setDate(['2021-10-10', '2021-10-15']);
});

clearDate

清除当前控件的选中值。

$("button").on('click', function(){
    datepicker.clearDate();
});

config

重新渲染控件，并设置一些新的配置。

$("button").on('click', function(){
    datepicker.config({
        max: '2021-12-31'
    });
});

总结

datetimepicker 的使用方法比较简单，但是通过设定一些属性，我们可以让它满足各种需求。而且常用的方法也很方便，使得我们能够通过 JS 控制控件的状态。