layui 时间按小时选择_Layui 时间选择框

你可以使用 Layui 的时间选择框组件进行按小时选择时间。以下是一个简单的示例：

<input type="text" class="layui-input" id="timepicker" placeholder="请选择时间" autocomplete="off">

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

  //执行一个laydate实例
  laydate.render({
    elem: '#timepicker',
    type: 'time',
    format: 'H时',
    range: '到',
    done: function(value, date){
      console.log(value); //得到日期生成的值，如：2017-08-18
      console.log(date); //得到日期时间对象：{year: 2017, month: 8, date: 18, hours: 0, minutes: 0, seconds: 0}
    }
  });
});
</script>

在上面的示例中，我们使用 `laydate` 组件创建了一个时间选择框，并设置了 `type` 属性为 `'time'`，表示选择的是时间。同时，我们设置了 `format` 属性为 `'H时'`，表示显示的时间格式为小时。最后，我们通过 `done` 回调函数获取用户选择的时间信息。

相关问题

Layui 一个时间选择框 选择多个时间

Layui的时间选择框只能选择单个时间，无法选择多个时间。如果需要选择多个时间，可以自己写一个自定义组件或者使用其他第三方组件。以下是一个示例：

HTML代码：

<div class="layui-form-item">
  <label class="layui-form-label">选择多个时间</label>
  <div class="layui-input-block">
    <div id="timepicker"></div>
  </div>
</div>

JS代码：

layui.use(['laydate', 'jquery'], function(){
  var laydate = layui.laydate;
  var $ = layui.jquery;
  
  // 初始化时间选择器
  laydate.render({
    elem: '#timepicker',
    type: 'time',
    range: true,
    done: function(value, date, endDate){
      console.log(value); // 打印选中的时间范围
    }
  });
});

这里使用了Layui的laydate组件来实现时间选择器，传入了type:'time'参数来指定只选择时间，同时设置了range:true参数来允许选择时间范围。done回调函数会在选择完成后触发，可以在里面获取到选中的时间范围。

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 的时间范围选择器，一个选择框的功能了。希望能对您有所帮助。