营业时间和工作日（表格选择）答案

【问题标题】：hours and days of business ( form select )营业时间和工作日（表格选择）
【发布时间】：2011-01-14 22:58:22
【问题描述】：

好的。

我想创建一个使用尽可能少的代码的表单，以便用户显示他们的营业时间和商店营业的天数。

我知道我们可以使用时间选择器来选择时间。

我要显示：

星期一

星期二

星期三

星期四

星期五

星期六

星期天

每天都有营业时间和关闭复选框

但似乎编码这将使用大量 html，这是他们编码它的一种更清洁的方式。也不确定如何对关闭复选框进行编码以折扣一天的条目，以便不提交其值。

代码如下：周一

<label>Monday: </label><select name="from"  id="from">
  <option value="06:00">6:00 AM</option> <option value="06:30">6:30 AM</option> <option value="07:00">7:00 AM</option> <option value="07:30">7:30 AM</option> <option value="08:00">8:00 AM</option> <option value="08:30">8:30 AM</option> <option value="09:00"  selected>9:00 AM</option> <option value="09:30">9:30 AM</option> <option value="10:00">10:00 AM</option> <option value="10:30">10:30 AM</option> <option value="11:00">11:00 AM</option> <option value="11:30">11:30 AM</option> <option value="12:00">12:00 PM</option> <option value="12:30">12:30 PM</option> <option value="13:00">1:00 PM</option> <option value="13:30">1:30 PM</option> <option value="14:00">2:00 PM</option> <option value="14:30">2:30 PM</option> <option value="15:00">3:00 PM</option> <option value="15:30">3:30 PM</option> <option value="16:00">4:00 PM</option> <option value="16:30">4:30 PM</option> <option value="17:00">5:00 PM</option> <option value="17:30">5:30 PM</option> <option value="18:00">6:00 PM</option> <option value="18:30">6:30 PM</option> <option value="19:00">7:00 PM</option> <option value="19:30">7:30 PM</option> <option value="20:00">8:00 PM</option> <option value="20:30">8:30 PM</option> <option value="21:00">9:00 PM</option> <option value="21:30">9:30 PM</option> <option value="22:00">10:00 PM</option>
  </select>
  <label>to</label>
  <select name="to"  id="to">
  <option value="06:00">6:00 AM</option> <option value="06:30">6:30 AM</option> <option value="07:00">7:00 AM</option> <option value="07:30">7:30 AM</option> <option value="08:00">8:00 AM</option> <option value="08:30">8:30 AM</option> <option value="09:00">9:00 AM</option> <option value="09:30">9:30 AM</option> <option value="10:00">10:00 AM</option> <option value="10:30">10:30 AM</option> <option value="11:00">11:00 AM</option> <option value="11:30">11:30 AM</option> <option value="12:00">12:00 PM</option> <option value="12:30">12:30 PM</option> <option value="13:00">1:00 PM</option> <option value="13:30">1:30 PM</option> <option value="14:00">2:00 PM</option> <option value="14:30">2:30 PM</option> <option value="15:00">3:00 PM</option> <option value="15:30">3:30 PM</option> <option value="16:00">4:00 PM</option> <option value="16:30">4:30 PM</option> <option value="17:00" selected>5:00 PM</option> <option value="17:30">5:30 PM</option> <option value="18:00">6:00 PM</option> <option value="18:30">6:30 PM</option> <option value="19:00">7:00 PM</option> <option value="19:30">7:30 PM</option> <option value="20:00">8:00 PM</option> <option value="20:30">8:30 PM</option> <option value="21:00">9:00 PM</option> <option value="21:30">9:30 PM</option> <option value="22:00">10:00 PM</option>
  </select>
  <input type="checkbox" name="closed" value="closed">
<font size="-1"><span>Closed</span>

小提琴：http://www.jsfiddle.net/mf2PB/

【问题讨论】：

您使用什么服务器端语言？为什么不在服务器端生成 HTML？
如果你不介意使用 JS UI 库，那里有很多不同的日期/时间选择器。 RightJS 之类的呢？查看calendar-with-time demo。
我们可以使用php，但我不是php专家。
我们目前确实对网站上的其他元素使用时间选择器。但是代码又是冗长的，我想知道我们是否可以动态生成时间，并为每个元素附加一个 id。

标签： javascript forms

【解决方案1】：

我可以想到几件事，尽管这完全取决于使用情况。实际上，所有这些都在 HTML 中，所以最后是一些大多数人看不到的文本。

使用 JavaScript 可以为您填充选项，但它会依赖于 JavaScript 支持。实际上，它只是使您的初始 html 更小，但您添加 JavaScipt 代码和 DOM 元素最终是相同的。
http://www.jsfiddle.net/urQc4/
在服务器端脚本中执行此操作。
将您的选项分成小时/分钟：
http://www.jsfiddle.net/q4KcM/

至于在选中关闭的复选框时禁用，您需要在表单处理或预处理脚本中执行此操作，这将再次是 JavaScript。

【讨论】：

其实，这是一种非常直观的做事方式，看起来也很整洁。谢谢，我将使用此代码。非常感谢您的时间和精力
我唯一的问题是在表单中提交这些值。将在此工作:) 干杯

【解决方案2】：

您还可以使用简单的文本输入字段，用户可以在其中输入“6:00 AM - 7:00 PM”之类的内容和一些服务器端代码来检查时间范围是否有效。为了方便用户，请使用jQuery UI Slider，其中包含一个范围和 48 个可能的步骤。

【讨论】：