如何设置时间选择器中的最大和最小时间？

link管理

链接快照平台

输入网页链接，自动生成快照
标签化管理网页链接

相关文章推荐

暴躁的机器猫 · 如何设置时间选择器中的最大和最小时间？ - ...· 2 天前 ·

逆袭的饭卡 · 华硕主板怎么进入bios_操作系统_小白一键 ...· 1 月前 ·

儒雅的皮带 · Ubuntu20.04 ...· 2 月前 ·

干练的馒头 · LINK : fatal error ...· 4 月前 ·

稳重的肉夹馍 · Solved: VBA Run Time ...· 6 月前 ·

苦恼的打火机 · 基于timestamp和nonce的防止重放 ...· 6 月前 ·

腾讯云

开发者社区

文档建议反馈控制台

首页 TVP

最新优惠活动

文章/答案/技术大牛

发布

<!DOCTYPE html>
<html lang="en">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Time Picker Example</title>
</head>
    <label for="datetime">Select Date and Time:</label>
    <input type="datetime-local" id="datetime">
    <script src="script.js"></script>
</body>
</html>

document.addEventListener("DOMContentLoaded", function() {
    const datetimePicker = document.getElementById('datetime');
    // 设置最小时间
    const minDate = new Date();
    minDate.setFullYear(minDate.getFullYear(), minDate.getMonth(), minDate.getDate(), 9, 0); // 2023-10-01T09:00
    datetimePicker.setAttribute('min', minDate.toISOString().slice(0, 16));
    // 设置最大时间
    const maxDate = new Date();
    maxDate.setFullYear(maxDate.getFullYear(), minDate.getMonth(), minDate.getDate(), 17, 0); // 2023-10-01T17:00
    datetimePicker.setAttribute('max', maxDate.toISOString().slice(0, 16));
});

推荐文章

暴躁的机器猫 · 如何设置时间选择器中的最大和最小时间？ - 腾讯云开发者社区 - 腾讯云

2 天前

逆袭的饭卡 · 华硕主板怎么进入bios_操作系统_小白一键重装系统-华为开发者空间

1 月前

儒雅的皮带 · Ubuntu20.04 设置静态IP_ubutnu 20.04 静态ip-CSDN博客

2 月前

干练的馒头 · LINK : fatal error LNK1000: Internal error during LIB::Search

4 月前

稳重的肉夹馍 · Solved: VBA Run Time Error "-2147417851" (80010105) Automation Error, Server Threw an Exce

6 月前

苦恼的打火机 · 基于timestamp和nonce的防止重放攻击方案_timestamp+nonce-CSDN博客

6 月前

如何设置时间选择器中的最大和最小时间？

基础概念

优势

类型

应用场景

解决方案

HTML部分

JavaScript部分（script.js）

解释

参考链接