开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

如何在HTML时间表单中禁用/灰显特定小时

在HTML时间表单中禁用或灰显特定小时，可以通过以下步骤实现：

使用HTML的<input>元素创建时间表单字段。设置type属性为"time"，并为该元素添加一个唯一的id属性，以便在后续的JavaScript代码中引用。

<input type="time" id="timeInput">

在JavaScript中获取对时间表单字段的引用，并定义要禁用或灰显的小时。

var timeInput = document.getElementById("timeInput");
var disabledHours = [9, 12, 15]; // 要禁用或灰显的小时

创建一个函数，用于检查用户选择的小时是否需要禁用或灰显。在该函数中，获取用户选择的小时，并与要禁用或灰显的小时进行比较。

function checkDisabledHours() {
  var selectedHour = parseInt(timeInput.value.split(":")[0]);
  
  if (disabledHours.includes(selectedHour)) {
    timeInput.setCustomValidity("该小时不可选"); // 设置自定义验证消息，禁用该小时
  } else {
    timeInput.setCustomValidity(""); // 清除自定义验证消息，启用该小时
  }
}

在时间表单字段上添加一个事件监听器，以便在用户选择小时时调用上述函数。

timeInput.addEventListener("input", checkDisabledHours);

完整的HTML代码示例：

<!DOCTYPE html>
<html>
<head>
  <title>禁用特定小时</title>
</head>
<body>
  <form>
    <label for="timeInput">选择时间：</label>
    <input type="time" id="timeInput">
  </form>

  <script>
    var timeInput = document.getElementById("timeInput");
    var disabledHours = [9, 12, 15]; // 要禁用或灰显的小时

    function checkDisabledHours() {
      var selectedHour = parseInt(timeInput.value.split(":")[0]);

      if (disabledHours.includes(selectedHour)) {
        timeInput.setCustomValidity("该小时不可选"); // 设置自定义验证消息，禁用该小时
      } else {
        timeInput.setCustomValidity(""); // 清除自定义验证消息，启用该小时
      }
    }

    timeInput.addEventListener("input", checkDisabledHours);
  </script>
</body>
</html>

这样，当用户选择被禁用或灰显的小时时，表单字段将显示一个验证错误消息，并阻止表单的提交。

相关搜索:如何在Angular2应用程序中禁用HTML5表单验证？如何在HTML表单中忽略禁用问题，以便我可以使用HTML/JS应用程序中的“下一步”按钮进入下一部分？如何在PHP纯脚本中添加html表单提交时的日期和时间？如何在回显php中的html表单中显示php变量的详细信息？如何在嵌套的for循环中使用父循环计数器来访问json中的特定行，如django模板(.html文件)中的数据如何在排除特定值的情况下获取数据帧中的最小时间值如何在特定时间段(例如5秒)禁用查看(按钮)，每次用户在kotlin的android studio中单击按钮？pixi.js+要引用那个 js 获取el表达式对象 js如何添加onfocus

相关搜索:

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

php防止表单重复提交实例讲解

说来惭愧，前几天做项目的时候，出现个低级错误。在公司后台做表单提交，一是自己员工用，二是 html 自己来写的，没有验证表单重复提交，结果出错了。写出来记录下以便提醒自己，时刻不能疏忽。

02

Chrome 86 重要更新解读

Chrome 86 在2020年10月推出了稳定版，现已全面应用于Android、Chrome OS、Linux、macOS 和 Windows等平台，我们一起来看下这次的重要更新。若要看全部更新，请移步（https://www.chromestatus.com/features#milestone=86）。

02

如何在PowerBI中同时使用日期表和时间表

首先，由于日期表和时间表不能叠加在一起（原因在前文说过了），所以肯定是两张表单独和事实表进行关联，而事实表中日期和时间是在同一列。

02

CSS 1.0~3.0选择器（下）

HTML5学堂：对于CSS选择器我们熟悉了CSS1.0~CSS2.0的使用，我们那么有些选择器还是无法简单获取某元素，对于CSS3的选择器的产生，让我们更加方便的获取元素，本文讲解了CSS3的选择器有哪些，希望整理好的CSS3选择器对大家有帮助！谢谢！ 6.CSS 3的同级元素通用选择器选择器含义示例E ~ F匹配任何在E元素之后的同级F元素p ~ ul { background:#ff0; } 7．CSS 3 属性选择器选择器含义示例E[att^=”val”]属性att的值以”val”开头的元素di

03

深入讲解 ASP+ 验证

这篇文章详细讲解了 ASP+ 验证控件的工作方式。如果要生成其中包含验证控件的复杂页面，或是要扩展验证框架，建议您阅读本文。如果要学习使用验证控件，或是要决定是否使用验证控件，请参见“ASP+ 中的用户输入验证（英文）”。

01

现实版“无间道”，4名煞星潜伏，只为拖库!

4年前，无意中跟认识的一个朋友聊天，他问我懂灰产吗？我说没听过啥是灰产，他就给我讲了个故事关于jjd的，我现在把这个故事分享给大家啊，2013年几个灰产通过线上聊天不谋而合，线下进行了见面，决定做件大

05

Bootstrap快速入门

Bootstrap学习有两个重点，一个是概念的理解，理解bootstrap是如何通过div来代替过去的table布局的；一个是常用结构的熟悉，做到需要的组件及时能找到，组合一下就可以满足需求。学习后的

06

编程世界/前端技术/BootStrap/BootStrap插件组件使用总结

官方地址:https://github.com/smalot/bootstrap-datetimepicker 演示:https://www.bootcss.com/p/bootstrap-datetimepicker/demo.htm

01

ASP.NET MVC 5 - 给数据模型添加校验器

在本节中将会给Movie模型添加验证逻辑。并且确保这些验证规则在用户创建或编辑电影时被执行。拒绝重复 DRY ASP.NET MVC 的核心设计信条之一是DRY: "不要重复自己（DRY --Don’t Repeat Yourself）"。ASP.NET MVC鼓励您指定功能或者行为，只做一次，然后将它应用到应用程序的各个地方。这可以减少您需要编写的代码量，并减少代码出错率，易于代码维护。给ASP.NET MVC 和 Entity Framework Code First 提供验证支持是 DRY 信条的

07

在 PHP 中使用和管理 Session

与 Cookie 一样，Session 技术也是用于解决 HTTP 协议无状态的问题，不过，与 Cookie 数据保存在客户端不同，Session 数据存储在服务端，然后通过分配一个全局唯一的 ID 与特定用户关联（通常在用户认证通过后分配），但 Session 又与 Cookie 紧密关联，因为这个 Session ID 通常会存储到 Cookie 中，在其生命周期内，用户发起请求时就会带上它，这样服务端通过解析存储在 Cookie 中的 Session ID 就能识别特定的客户端用户，并返回与之关联的 Session 数据，比如前面提到的电商网站中的购物车数据。

03

HTML表单的用法

1、form表单有什么作用？？有哪些常用的input 标签，分别有什么作用？ form表单的作用是把用户输入的数据提交到后台； <input name="username" type="text"> 用于输入文本信息 <input name="password" type="password"> 用于输入密码，输入的内容显示为圆点 <input name="sex" type="radio"> 单选框 <input name="hobby" type="checkbox"> 复选框 <input name=

05

Bootstrap 响应式框架第三集

<meta http-equiv="x-ua-compatible" content="IE=edge">

03

如何使用Python来计算公交发车时间

公交车每天会按照一定间隔发车,由于不同时间段经过拥堵路段的用时不-样，所以给定路线下公交车每趟(每车次)行驶时间差异也很大，现在给出某路线某天各车次公交车离开始发站和到达终点站的时间，请求出该天耗时最长车次的行驶时间。

02

PHP建议禁用的危险函数

PHP配置文件中的disable_functions选项能够在PHP中禁用指定的函数。PHP中有很多危险的内置功能函数，如果使用不当，可造成系统崩溃。禁用函数可能会为研发带来不便，但禁用的函数太少又可能增加研发人员写出不安全代码的概率，同时为黑客非法获取服务器权限提供遍历。

01

快速学习-综合案例RESTRUL_CRUD

发起请求，无法执行，因为delete请求必须通过post请求转换为delete请求，借助：HiddenHttpMethodFilter过滤器

02

Python time strptime

Python time strptime() 函数根据指定的格式把一个时间字符串解析为时间元组。

04

前端-HTML-web服务本质-HTTP协议-请求-标签-01(待完善)

我们的浏览器端（B/S架构）本质上也是一个客户端，通过socket与服务端通信，发送请求，获得返回数据，再有浏览器将服务器返回的数据渲染成页面上看到的一个一个标签元素样式。

02

iOS最新漏洞可实现“以假乱真”的iCloud密码钓鱼

近日安全研究人员发布了一份漏洞利用代码。这份代码表明，攻击者可以通过足以以假乱真的钓鱼，轻易窃取使用最新iOS版本的iCloud密码。漏洞原理这个概念验证性攻击利用了iOS系统中默认的电子邮件程序Mail.app的一个漏洞。自从4月初iOS8.3版本发布以来，该应用就未能从接收邮件消息中适当剔除含有潜在危险的HTML代码。这个POC正是利用了这一漏洞，它从远程服务器下载一个表单，该表单看起来与合法的iCloud登录提示窗口完全相同。每当用户查看包含“陷阱”的消息时，这个伪造的登录提示窗都可以自动显

08

[CodeIgniter4]-公共函数和全局常量

CodeIgniter 你可以在任何地方使用它们，并且不需要加载任何类库或辅助函数。

02

Java 后台开发面试题分享九

null 是一个表示"无"的对象，转为数值时为 0；undefined 是一个表示"无"的原始值，转为数值时为 NaN。

02

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭