laydate 控制只能选小时
时间: 2023-08-02 18:26:03 浏览: 54
您可以使用 `laydate` 的 `range` 参数来实现只能选择小时的功能。具体代码如下:
```html
<input type="text" name="hour" id="hour" class="layui-input" placeholder="请选择小时" readonly>
```
```javascript
layui.use('laydate', function(){
var laydate = layui.laydate;
laydate.render({
elem: '#hour', // 绑定元素
type: 'time', // 指定时间选择器类型
range: true, // 开启范围选择
format: 'HH时', // 指定时间格式
done: function(value, date, endDate){ // 选择完成后的回调函数
// 将选中的时间赋值给 input
var hourInput = document.getElementById('hour');
hourInput.value = value;
},
ready: function(date){ // 选择器打开时的回调函数
// 隐藏“分”和“秒”选择项
var hourPicker = document.getElementsByClassName('laydate-time-list')[0];
hourPicker.removeChild(hourPicker.children[1]);
hourPicker.removeChild(hourPicker.children[1]);
}
});
});
```
在上述代码中,我们使用了 `laydate` 的 `range` 参数开启了范围选择,指定了时间格式为小时,并在 `ready` 回调函数中隐藏了“分”和“秒”选择项。这样,用户就只能选择小时了。同时,我们还使用了 `done` 回调函数在用户选择完成后将选中的时间赋值给 input。
相关推荐
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)