营业时间和天数（表格 select）

Question

行。

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

我知道我们可以不时使用时间选择器到 select。

我想显示：

周一

周二

周三

周四

星期五

周六

星期日

有从和到的开放时间，以及每天旁边的关闭复选框

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

Answer 1

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

1. 使用JavaScript可以为您填充选项，但随后将取决于JavaScript支持。 实际上，它只是使您的初始html更小，但您添加了JavaScipt代码，因此DOM元素最终是相同的。
   http://www.jsfiddle.net/urQc4/

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

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

至于禁用关闭复选框时的禁用功能，则需要在表单处理或预处理脚本（再次为JavaScript）中进行。

Answer 2

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

Answer 3

 function sa_cl() { document.getElementById("sa_service_open_time").disabled = true; document.getElementById("sa_service_close_time").disabled = true; } function sa_op() { document.getElementById("sa_service_open_time").disabled = false; document.getElementById("sa_service_close_time").disabled = false; } function su_cl() { document.getElementById("su_service_open_time").disabled = true; document.getElementById("su_service_close_time").disabled = true; } function su_op() { document.getElementById("su_service_open_time").disabled = false; document.getElementById("su_service_close_time").disabled = false; } function mo_cl() { document.getElementById("mo_service_open_time").disabled = true; document.getElementById("mo_service_close_time").disabled = true; } function mo_op() { document.getElementById("mo_service_open_time").disabled = false; document.getElementById("mo_service_close_time").disabled = false; } function tu_cl() { document.getElementById("tu_service_open_time").disabled = true; document.getElementById("tu_service_close_time").disabled = true; } function tu_op() { document.getElementById("tu_service_open_time").disabled = false; document.getElementById("tu_service_close_time").disabled = false; } function we_cl() { document.getElementById("we_service_open_time").disabled = true; document.getElementById("we_service_close_time").disabled = true; } function we_op() { document.getElementById("we_service_open_time").disabled = false; document.getElementById("we_service_close_time").disabled = false; } function th_cl() { document.getElementById("th_service_open_time").disabled = true; document.getElementById("th_service_close_time").disabled = true; } function th_op() { document.getElementById("th_service_open_time").disabled = false; document.getElementById("th_service_close_time").disabled = false; } function fr_cl() { document.getElementById("fr_service_open_time").disabled = true; document.getElementById("fr_service_close_time").disabled = true; } function fr_op() { document.getElementById("fr_service_open_time").disabled = false; document.getElementById("fr_service_close_time").disabled = false; }

 <label for="saturday">Saturday</label> <input type="radio" name="saturday" onchange="sa_cl()">Close <input type="radio" name="saturday" onchange="sa_op()">Open<br> <label for="sa_service_open_time">Opening Time</label> <input type="time" id="sa_service_open_time" name="sa_service_open_time"> <label for="sa_service_close_time">Closing Time </label> <input type="time" id="sa_service_close_time" name="sa_service_close_time"> <br><br> <label for="sunday">Sunday</label> <input type="radio" name="sunday" onchange="su_cl()">Close <input type="radio" name="sunday" onchange="su_op()">Open<br> <label for="su_service_open_time">Opening Time</label> <input type="time" id="su_service_open_time" name="su_service_open_time"> <label for="su_service_close_time">Closing Time </label> <input type="time" id="su_service_close_time" name="su_service_close_time"> <br><br><label for="monday">Monday</label> <input type="radio" name="monday" onchange="mo_cl()">Close <input type="radio" name="monday" onchange="mo_op()">Open<br> <label for="mo_service_open_time">Opening Time</label> <input type="time" id="mo_service_open_time" name="mo_service_open_time"> <label for="mo_service_close_time">Closing Time </label> <input type="time" id="mo_service_close_time" name="mo_service_close_time"> <br><br><label for="tuesday">Tuesday</label><br> <input type="radio" name="tuesday" onchange="tu_cl()">Close <input type="radio" name="tuesday" onchange="tu_op()">Open<br> <label for="tu_service_open_time">Opening Time</label> <input type="time" id="tu_service_open_time" name="tu_service_open_time"> <label for="tu_service_close_time">Closing Time </label> <input type="time" id="tu_service_close_time" name="tu_service_close_time"> <br><br><label for="wednesday">Wednesday</label><br> <input type="radio" name="wednesday" onchange="we_cl()">Close <input type="radio" name="wednesday" onchange="we_op()">Open<br> <label for="we_service_open_time">Opening Time</label> <input type="time" id="we_service_open_time" name="we_service_open_time"> <label for="we_service_close_time">Closing Time </label> <input type="time" id="we_service_close_time" name="we_service_close_time"> <br><br><label for="thursday">Thursday</label><br> <input type="radio" name="thursday" onchange="th_cl()">Close <input type="radio" name="thursday" onchange="th_op()">Open<br> <label for="th_service_open_time">Opening Time</label> <input type="time" id="th_service_open_time" name="th_service_open_time"> <label for="th_service_close_time">Closing Time </label> <input type="time" id="th_service_close_time" name="th_service_close_time"> <br><br><label for="friday">Friday</label><br> <input type="radio" name="friday" onchange="fr_cl()">Close <input type="radio" name="friday" onchange="fr_op()">Open<br> <label for="fr_service_open_time">Opening Time</label> <input type="time" id="fr_service_open_time" name="fr_service_open_time"> <label for="fr_service_close_time">Closing Time </label> <input type="time" id="fr_service_close_time" name="fr_service_close_time"> <br><br>