用layui写一个动态的时间范围搜索框

下面是一个基于layui的动态时间范围搜索框的示例代码：

HTML代码：

<div class="layui-form-item">
  <div class="layui-inline">
    <label class="layui-form-label">时间范围</label>
    <div class="layui-input-inline">
      <input type="text" name="start_time" id="start_time" placeholder="开始时间" class="layui-input">
    </div>
    <div class="layui-form-mid">-</div>
    <div class="layui-input-inline">
      <input type="text" name="end_time" id="end_time" placeholder="结束时间" class="layui-input">
    </div>
  </div>
</div>

JavaScript代码：

// 初始化日期选择器
layui.use(['laydate', 'form'], function() {
  var laydate = layui.laydate;
  var form = layui.form;
  
  // 监听时间范围输入框的值变化，如果有值则重新渲染日期选择器
  form.on('select(timeRange)', function(data) {
    if (data.value === 'custom') {
      // 显示自定义时间范围输入框
      $('#custom_time_range').show();

      // 监听自定义时间范围输入框的值变化，如果有值则重新渲染日期选择器
      $('#custom_time_range input.layui-input').on('change', function() {
        var start_time = $('#start_time').val();
        var end_time = $('#end_time').val();
        if (start_time && end_time) {
          laydate.render({
            elem: '#start_time',
            type: 'datetime',
            value: start_time
          });
          laydate.render({
            elem: '#end_time',
            type: 'datetime',
            value: end_time
          });
        }
      });
    } else {
      // 隐藏自定义时间范围输入框
      $('#custom_time_range').hide();

      // 根据选择的时间范围渲染日期选择器
      var date = new Date();
      var end_time = date.getFullYear() + '-' + (date.getMonth() + 1) + '-' + date.getDate() + ' ' + date.getHours() + ':' + date.getMinutes() + ':' + date.getSeconds();
      var start_time;
      switch (data.value) {
        case 'today':
          start_time = end_time.substring(0, 10) + ' 00:00:00';
          break;
        case 'yesterday':
          date.setTime(date.getTime() - 24 * 60 * 60 * 1000);
          start_time = date.getFullYear() + '-' + (date.getMonth() + 1) + '-' + date.getDate() + ' 00:00:00';
          end_time = date.getFullYear() + '-' + (date.getMonth() + 1) + '-' + date.getDate() + ' 23:59:59';
          break;
        case 'this_week':
          var first_day_of_week = date.getDay() === 0 ? 7 : date.getDay();
          var days_to_monday = first_day_of_week - 1;
          var days_to_sunday = 7 - first_day_of_week;
          var monday = new Date(date.getTime() - days_to_monday * 24 * 60 * 60 * 1000);
          var sunday = new Date(date.getTime() + days_to_sunday * 24 * 60 * 60 * 1000);
          start_time = monday.getFullYear() + '-' + (monday.getMonth() + 1) + '-' + monday.getDate() + ' 00:00:00';
          end_time = sunday.getFullYear() + '-' + (sunday.getMonth() + 1) + '-' + sunday.getDate() + ' 23:59:59';
          break;
        case 'this_month':
          start_time = date.getFullYear() + '-' + (date.getMonth() + 1) + '-01 00:00:00';
          break;
        case 'last_month':
          var last_month = new Date(date.getFullYear(), date.getMonth() - 1, 1);
          var last_month_days = new Date(last_month.getFullYear(), last_month.getMonth() + 1, 0).getDate();
          start_time = last_month.getFullYear() + '-' + (last_month.getMonth() + 1) + '-01 00:00:00';
          end_time = last_month.getFullYear() + '-' + (last_month.getMonth() + 1) + '-' + last_month_days + ' 23:59:59';
          break;
      }
      laydate.render({
        elem: '#start_time',
        type: 'datetime',
        value: start_time
      });
      laydate.render({
        elem: '#end_time',
        type: 'datetime',
        value: end_time
      });
    }
  });
});

需要注意的是，上述代码中的时间范围选择框是一个下拉列表，其中包括了“今天”、“昨天”、“本周”、“本月”、“上月”以及“自定义”等选项。如果选择“自定义”选项，则会显示一个自定义时间范围输入框，允许用户手动输入起始时间和结束时间。无论是哪种情况，都会根据用户的选择以及输入的值来动态渲染日期选择器。