Выпадающее меню с объектами даты JavaScript?

Question

Мне бы хотелось, чтобы в раскрывающемся меню (выберите) были указаны даты (например, 21 июня). Когда пользователь выбирает дату из выпадающего списка, часы работы будут отображаться (где-то) для этого конкретного дня. В настоящее время часы работы отображаются только на текущий день; это достигается с помощью объектов дат JavaScript.

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

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

Answer 1

Вы можете сгенерировать данные на сервере, чтобы в параметрах отображалась дата «21 июня» или что-то еще, а в качестве значения были часы работы.Или значение может быть «21 июня» или аналогичным для связанного объекта, который использует значение в качестве ключа и часы в качестве значения:

var openingHours = {
    '21June' : '08:00am - 05:30pm',
    '22June' : '08:00am - 09:00pm',
    ...
}

и так далее.Затем просто используйте значение выбранного параметра, чтобы получить часы работы.Есть много других способов приблизиться к этому, это зависит от того, насколько изменчивы часы и сколько дат вы хотите охватить.

Большинство предприятий просто публикуют еженедельные часы и специальные уведомления для государственных праздников.

Answer 2

Часы работы меняются от недели к неделе? Почему бы не изменить раскрывающийся список на дни недели (понедельник, вторник и т. Д.), Изменить функцию JS, чтобы она принимала целое число, обозначающее день недели, а затем просто измените каждый элемент <option>, чтобы он имел onclick привязка к событию, вызывающая функцию JS с соответствующим целочисленным номером дня?

Пример:

<select>
  <option onclick="showHoursOfOperation(0);">Sunday</option>   
  <option onclick="showHoursOfOperation(1);">Monday</option>
  <option onclick="showHoursOfOperation(2);">Tuesday</option>
  [ ... ]
</select>

EDIT: Возможно, более изящное решение, украденное у @ibu. (не проверено, может не работать)

<select onchange="showHoursOfOperation(this.selectedIndex);">
  <option>Sunday</option>
  <option>Monday</option>
  [ ... ]
</select>