layui时间范围选择器，一个选择框

您好，如果您想实现 layui 的时间范围选择器，一个选择框的功能，您可以按照以下步骤进行操作：

1. 引入 layui 的日期范围选择组件：

<link rel="stylesheet" href="//cdn.staticfile.org/layui/2.5.6/css/layui.css">
<script src="//cdn.staticfile.org/layui/2.5.6/layui.js"></script>

2. 创建一个固定宽度的容器用于显示日期范围选择器：

<div class="layui-inline" style="width: 300px;">
  <input type="text" name="date" class="layui-input" id="test-laydate-range" placeholder="请选择时间范围">
</div>

3. 在 JS 中初始化日期范围选择器，并设置选择框的样式：

layui.use('laydate', function(){
  var laydate = layui.laydate;
  
  //执行一个laydate实例
  laydate.render({
    elem: '#test-laydate-range', //指定元素
    range: true, //开启日期范围选择
    trigger: 'click', //设定触发事件为点击事件
    done: function(value, date){ //选择完成后的回调函数
      $('#test-laydate-range').val(value.replace(/-/g, ' 至 ')); //将选择的时间范围显示在选择框中
    }
  });
  
  //设置选择框的样式
  $('.layui-laydate').addClass('layui-laydate-single');
  $('.layui-laydate-main').css({
    left: '50%',
    marginLeft: '-150px',
    top: '40px',
    boxShadow: 'none',
    border: 'none'
  });
  $('.layui-laydate-header').css({
    backgroundColor: '#1E9FFF',
    color: '#fff'
  });
  $('.layui-laydate-content td, .layui-laydate-footer .layui-btn').css({
    backgroundColor: '#fff',
    color: '#333'
  });
});

通过以上步骤，您就可以成功实现 layui 的时间范围选择器，一个选择框的功能了。希望能对您有所帮助。