[JavaScript知识库] Layui时间选择器，Layui时间控件选择时间范围的方法

开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> JavaScript知识库 -> Layui时间选择器，Layui时间控件选择时间范围的方法 -> 正文阅读

[JavaScript知识库]Layui时间选择器，Layui时间控件选择时间范围的方法

官方文档：https://www.layui.site/doc/modules/laydate.html

通用时间渲染函数

 function renderTime(elem, type, value, range, fn) {
    layui.laydate.render({
        elem: elem, //绑定元素
        type: type, //时间类别
        value: value, //默认值
        range: range, //是否开启时间范围
        done: fn, //选择时间触发的回调函数
        trigger: 'click',
        theme: '#1890ff', //主题色
    });
}

普通时间选择器

效果
代码

//html
<div class="layui-form-item">
    <label class="layui-form-label">开始时间：</label>
    <div class="layui-input-inline">
        <input type="text" class="layui-input" name="stime_1" id="stime_1" readonly>
    </div>
</div>
// js
renderTime('#stime_1', 'date', "", false, null);

时间范围1

效果
代码

// html
  <div class="layui-form-item ">
      <label class="layui-form-label">上传时间：</label>
      <div class="layui-input-inline" style="width: 292px;">
          <input type="text" class="layui-input" name="" id="time_range_1" readonly
              placeholder="开始时间 至 结束时间">
          <input type="text" style="display: none;" name="hide_stime" id="hide_stime_1" readonly>
          <input type="text" style="display: none;" name="hide_etime" id="hide_etime_1" readonly>
      </div>
  </div>
  //js
	renderTime("#time_range_1", "date", "", true, function (value, date, endDate) {
		if (value) {
			let arr = value.split(" - ")
			$("#hide_stime_1").val(arr[0]);
			$("#hide_etime_1").val(arr[1])
		} else {
			$("#hide_stime_1").val("");
			$("#hide_etime_1").val("")
		}
});

时间范围2

效果
代码

//html
<div class="layui-form-item">
    <label class="layui-form-label">时间范围2：</label>
    <div class="layui-inline">
        <div class="layui-inline" id="timer">
            <div class="layui-input-inline">
                <input type="text" name="sTime" id="sTime" class="layui-input" placeholder="选择日期"
                    readonly>
            </div>
            <div class="layui-form-mid">-</div>
            <div class="layui-input-inline">
                <input type="text" name="eTime" id="eTime" class="layui-input" placeholder="选择日期"
                    readonly>
            </div>
        </div>
    </div>
</div>
//js
renderTime("#timer", "date", "", ["#sTime", '#eTime']);