CalendarExtender saying the wrong date is selected, possibly timezone related

Question

I have a page with a TextBox and a CalendarExtender that is supposed to allow me to detect what date is selected. However, this is reporting the date that isn't selected.

<asp:TextBox ID="tbEffectiveDate" runat="server"
    CssClass="input-small"
    MaxLength="10"
    Text='<%# Bind("NewEffectiveDate", "{0:MM/dd/yyyy}") %>'>
</asp:TextBox>
<ajaxToolkit:CalendarExtender ID="atkEffectiveDate" runat="server"
    FirstDayOfWeek="Sunday"
    TargetControlID="tbEffectiveDate"
    Format="MM/dd/yyyy"
    OnClientDateSelectionChanged="CheckForSunday">
</ajaxToolkit:CalendarExtender>

Essentially I'm making sure the user has selected a Sunday, but when I select a day on the calendar, the JavaScript says it is a day before. I'm perplexed.

function CheckForSunday(sender, args) {
    var selectedDate = new Date();
    selectedDate = sender.get_selectedDate();
    // Both of these show the date before the date was selected
    alert(sender.get_selectedDate());

    if (selectedDate.getDay() != 0) {
        // not a Sunday
        var sunday = selectedDate;
        // calculated the nearest Sunday
        sunday.setDate(selectedDate.getDate() - selectedDate.getDay());
        sender.set_selectedDate(sunday);
        // tell the user that the date wasn't a Sunday
        // and that the previous Sunday was selected.
        $("#must-be-sunday").modal("show");
    }
}

For example, if I select a Sunday, such as May 5th:

enter image description here

Then at the line alert(sender.get_selectedDate());, it displays

enter image description here

This is saying Saturday, May 4th is selected instead of May 5th. Since in my locale, we are -0700 and this is displaying 7 hours before midnight on the 5th, I'm guessing this has something to do with the timezone.

Does anyone know what may be causing this and how to fix it so it doesn't work with the time and only the date selected?

score 4 · Answer 1 · edited May 23 '17 at 10:30

As usual, after writing everything out into a question on here, I've resolved my issue. This was indeed due to timezones, but still is very awkward. If someone has a better solution, I'd love to hear it.

Using getTimezoneOffset() and the solution from How to add 30 minutes to a JavaScript Date object?, I created a calculation to fix this.

var selectedDate = sender.get_selectedDate();
// get the timezone offset in minutes
var timeOffsetMinutes = selectedDate.getTimezoneOffset();
// Convert minutes into milliseconds and create a new date based on the minutes.
var correctedDate = new Date(selectedDate.getTime() + timeOffsetMinutes * 60000);

This corrected my issue and I get the date needed.

score 2 · Accepted Answer · answered May 11 '13 at 07:42

You right that the problem due to timezones as CalendarExtender use UTC dates for each day cell value. If you want to check day of week selected you may use Date.getUTCDay() function instead of the Date.getDay() and getUTCDate() instead of getDate() in OnClientDateSelectionChanged handler.

CalendarExtender saying the wrong date is selected, possibly timezone related

2 Answers2