0

I have a datepicker drop down

<input type="date" class="date">

I get the day of the week using jquery

function dateFunction() {
    $(".date").on('change', function () {
        var d = $('.date').val();
        var dm = new Date(d);
        var n = dm.getDay();
        alert(n);

    });
}

when I pick Tuesday the alert is 1?

Shouldn't it be 2?

Rion Williams
  • 74,820
  • 37
  • 200
  • 327
N. Sch
  • 667
  • 2
  • 5
  • 15
  • When I run that code here I do get `2`. Your time zone may be screwing you up - what do you get if you paste `new Date("7/12/2016").getDay()` into the browser console? – Yuck Jul 12 '16 at 16:01
  • Works fine here: https://jsfiddle.net/RoryMcCrossan/y174nvdv/ – Rory McCrossan Jul 12 '16 at 16:02
  • But in other places of the code like here: var today = new Date() var dayIndex = today.getDay() if (dayIndex == 2) { $(".tuesday").show(); $(".daySelector").val('tuesday'); } it gives me the right day? – N. Sch Jul 12 '16 at 16:02
  • 1
    `new Date()` may be assuming the date is in UTC, whereas `.getDay()` returns based on your local timezone. When using `type="date"`, the `.value` is usually given in an ISO-like format, which is parsed with the UTC assumption. – Jonathan Lonowski Jul 12 '16 at 16:03
  • so how do I get around that? – N. Sch Jul 12 '16 at 16:04
  • @N.Sch Don't depend on the engine's choices with parsing. Parse it yourself or with a library such as [moment.js](http://momentjs.com/) – [Why does Date.parse give incorrect results?](https://stackoverflow.com/questions/2587345/why-does-date-parse-give-incorrect-results) – Jonathan Lonowski Jul 12 '16 at 16:05

2 Answers2

1

You can create an object if expected result is 2 for Tuesday, use Date.prototype.toUTCString(), String.prototype.slice()

var days = {
  Sun: 0,
  Mon: 1,
  Tue: 2,
  Wed: 3,
  Thu: 4,
  Fri: 5,
  Sat: 6
};

function dateFunction() {
  $(".date").on("change", function() {
    var day = days[this.valueAsDate.toUTCString().slice(0,3)];
    alert(day);
  });
}

dateFunction()
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="date" class="date">
guest271314
  • 1
  • 15
  • 104
  • 177
  • Thanks it worked! It just feels like there should be an easier way? – N. Sch Jul 12 '16 at 16:31
  • @N.Sch What do you mean by "easier"? Approach utilizes one object, one call to `.toUTCString()`, one call to `.slice(0,3)` to return expected result. – guest271314 Jul 12 '16 at 16:33
0

From https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Date/getDay

The value returned by getDay() is an integer corresponding to the day of the week: 0 for Sunday, 1 for Monday, 2 for Tuesday, and so on.

From https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date

Syntax can be used as new Date(dateString);

dateString String value representing a date. The string should be in a format recognized by the Date.parse() method (IETF-compliant RFC 2822 timestamps and also a version of ISO8601). Note: parsing of date strings with the Date constructor (and Date.parse, they are equivalent) is strongly discouraged due to browser differences and inconsistencies.

This being said, it is (1) to be expected that Tuesday is represented by the number 2, and (2) disencouraged to use new Date(dateString). A better option would be parsing the date input's value into year/month/day and using the new Date(year, month[, day[, hour[, minutes[, seconds[, milliseconds]]]]]); syntax.

minitauros
  • 1,920
  • 18
  • 20