Date Update Client-Side on Static Web Page

Question

I am currently trying to build a booking page for a theatre website, the dates of the shows are set to specific days of the week but run indefinitely throughout the year.

My current brain-tickling task is that of creating a function that will correctly update the show dates to be the nearest relevant numerical date to todays date.

So, from todays date, I need it to show options for Friday 25th January, Saturday 26th January and Wednesday 30th January, then if accessed tomorrow (Friday 25th January 2013) it would change the date of Friday to 1st February (as that is the next friday showing).

I suppose the function would go something like this (in logical terms):

updateShowDates(function(){
var todaysdate = getDate
var todayWeekday = getDay
var showWeekday = document.getElementByName('datepicker').value
var lengthtotarget = count number of days between todayWeekday and target weekday (i.e. Wednesday)
newShowDate = todaysdate + lengthtotarget
document.getElementByName('datepicker').innerHTML=newShowDate;
});

The HTML for the element that this will function on is:

<select id="dateselect" size="3">

<option value="Wednesday" title="Wednesday" name="datepicker">

    Wednesday

</option>

<option value="Friday" title="Friday" name="datepicker">

    Friday

</option>

<option value="Saturday" title="Saturday" name="datepicker">

    Saturday

</option>

</select>

I am a bit of a noob with Javascript, I did find a resource a while ago that would be very helpful for this but of course, sod's law, I didn't bookmark it and can't find it anymore.

Any help to write a working function would be greatly appreciated. This is for university coursework and of course I am trying to score the highest possible mark.

related: http://stackoverflow.com/questions/4944750/how-to-subtract-date-time-in-javascript — Vivian River, Jan 24 '13 at 19:29

Vivian River · Answer 1 · 2013-01-24T21:20:52.377

In JavaScript, you can compute the difference between two dates with the subtraction operator, which will return the difference between the two dates in seconds. You could subsequently use the Math.abs function to get the absolute value of the difference. (Actually, in this case, that won't be necessary since the show date is always in the future.) You could also use array.sort to order dates by their difference with today's date.

I expect that the result might look something like this: I have not actually tested this code, but it's an educated guess.

function getNextShowTime(showTimes) {
    var x, now, soonest, offset;
    now = date;
    offset = Infinity;
    for(x = 0; x < showTimes.length; x++) {
        if (showTimes[x] - now < offset) {
            offset = showTimes[x] - now;
            soonest = showTimes[x];
        }
    }
    return soonest;
}

The function I've provided should provide the soonest show date. If you want to look up multiple show dates and sort them chronologically, you'll want to use array.sort. You might also want to exclude past shows, as well. As you did say that this is an exercise for a university course, I will leave these to you.

Edit: The sample code provided iterates over the different show times. At the beginning of the loop, soonest is NULL and offset is Infinity. For each iteration, the show time is compared to the current time and compared to offset. If the result is less than offset, the difference is assigned to offset and the show time is assigned to soonest. Thus, at the end of the loop, offset should be the amount of time till the next show time and soonest should be the show time.

Date Update Client-Side on Static Web Page

1 Answers1