часы и дни работы (выберите форму)

Question

Хорошо.

Я хочу создать форму, которая использует наименьшее количество кода, чтобы пользователи могли отображать свои часы работы и дни, когда их магазин открыт.

Я знаю, что мы можем использовать средство выбора времени для выбора времени и времени.

Я хочу отобразить:

Понедельник

вторник

Среда

четверг

пятница

Суббота

воскресенье

С часами открытия от и до и флажком рядом с каждым днем ​​

Но кажется, что при кодировании будут использоваться кучи 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 в итоге остаются одинаковыми.

2. Разделите ваши параметры на часы / минуты:
   http://www.jsfiddle.net/q4KcM/

Чтобы отключить функцию, когда установлен закрытый флажок, вам потребуетсясделайте это в своей обработке формы или в скрипте предварительной обработки, который снова будет JavaScript.

Answer 2

Вы также можете использовать простое поле ввода текста, где пользователь может вводить такие вещи, как «6:00 AM - 7:00 PM» и некоторый код на стороне сервера, чтобы проверить, допустим ли временной диапазон. Чтобы было проще для пользователя, используйте jQuery UI Slider с диапазоном и 48 возможными шагами.