营业时间和日期(表格选择)

时间:2011-01-14 22:58:23

标签: javascript forms

确定。

我想创建一个使用尽可能少代码的表单,以便用户显示他们的商店开放的开放时间和日期。

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

我想要显示:

  周一

     

星期二

     

星期三

     

星期四

     

星期五

     

星期六

     

星期日

打开时间来自和来,以及每天旁边的关闭复选框

但似乎编码这将使用大量的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/

2 个答案:

答案 0 :(得分:5)

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

  1. 使用JavaScript可以为您填充选项,但它将依赖于JavaScript支持。实际上,它只会使您的初始html变小,但是您添加了JavaScipt代码并且DOM元素最终是相同的。
      http://www.jsfiddle.net/urQc4/

  2. 在服务器端脚本中执行此操作。

  3. 将您的选项分成小时/分钟:
     http://www.jsfiddle.net/q4KcM/

  4. 对于选中关闭复选框时禁用,您需要在表单处理或预处理脚本中执行此操作,这将再次成为JavaScript。

答案 1 :(得分:1)

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