Dropdown menu with JavaScript date objects?

Question

I'd like to have a dropdown (select) menu which has dates (e.g. June 21) as options. When the user selects a date from the dropdown, hours of operation will be displayed (somewhere) for that particular day. Currently the hours of operation are displayed for the present day only; this is accomplished through JavaScript date objects.

I'm wondering if it would be possible to take a selected dropdown menu option, convert it somehow into a proper date format, and then run it through the current function I have now, which takes as its argument only the current month and day.

More importantly, if anyone has any ideas about a better way to do something like this, even a link to some relevant information, I'd greatly appreciate it. Right now, I don't really know of any examples I could try to emulate.

yeah you can use an onchange event on your dropdown, and attach a value to the options that u can access during the event — Ibu
– Ibu, Commented Jul 13, 2011 at 0:22

RobG · Accepted Answer · 2011-07-13 00:24:53Z

1

You could generate the data on the server so that the options display the date as '21 June' or whatever and have the opening hours as the value. Or the value can be "21june" or similar with a related object that uses the value as a key and hours as the value:

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

and so on. Then just use the value of the selected option to get the opening hours. There are many other ways to approach this, it depends on how variable the hours are and how many dates you want to cover.

Most businesses just publish weekly hours and special notices for public holidays.

answered Jul 13, 2011 at 0:24

RobG

148k32 gold badges180 silver badges216 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

score 1 · Accepted Answer · 2011-07-13 00:41:03Z

1

Do the hours of operation vary from week to week? Why not change the drop-down to days of the week (Monday, Tuesday, etc), modify the JS function to take an integer indicating day of the week, and then just modify each <option> element so that it has an onclick event binding, calling the JS function with the appropriate integer day number?

Example:

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

EDIT: Perhaps a more graceful solution, stolen from @ibu. (untested, might not work)

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

edited Jul 13, 2011 at 0:41

answered Jul 13, 2011 at 0:21

user836352

2 Comments

Stephen P Over a year ago

Holidays? e.g. the hours for Mon Jul 4 are zero but Mon Jul 11 are 8-5

user836352 Over a year ago

Another <option> could be added for "Holiday"? I see this as the best way to prevent redundancy.

Collectives™ on Stack Overflow

Dropdown menu with JavaScript date objects?

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related