Date Object Creation Format Differences in JavaScript

Another issue that came up in my multi-week calendar was due to how date parsing in JavaScript yields different date objects depending on the format:

• new Date('11/18/2015') creates a date object of 11/18/2015 local time zone.
• new Date('2015-11-18') creates a date object of 11/18/2015 UTC time zone. For example, if it's Eastern Standard Time (-5:00), then it will be 11/17/2015 19:00.

Try it out on your web browser's console. One good thing is Chrome, IE, and Firefox all seems to have the same behavior. Granted, I ought to be specifying date in a more specific format, but it's interesting to see how the same "date" yields different date objects based on the format. For the multi-week calendar fix, I just removed the native date creation (which I probably should've done from the beginning) and used moment.js's multiple date format creation method. Moment.js documentation has a reference to a nice table of JavaScript date parsing behavior. Hmm, maybe it's time to add some tests...

Multi-Week Calendar for Printing, using HTML and JavaScript

TL;DR: dusklight.github.io/multi-week-calendar

I made a simple HTML & JavaScript based multi-week calendar a while back, inspired by Visio's multi-week calendar shape. It serves a very specific purpose – I use it to print a calendar of the current month and the next in a single page. When I was using it locally, I just used IE every time, since I had set print background option on it (my main browser is Chrome). After I added it to Github, I figured I should try it on different browsers, and to my surprise, it failed on Chrome.

One of the main reasons it failed is because I didn't add any validations (don't need it when it was just me using it, though it's on my TODO list), but another reason for Chrome is because Chrome apparently supports date input type, and the date has to be in a specific format when setting the value programmtically – YYYY-MM-DD.

Chrome has a built-in date picker (for input type=date)

So after some researching, added Modernizr to detect support for the input date type, and set the default dates accordingly. I'll probably add jQueryUI date picker in the future so that it's consistent across all browsers, which means I'll need to replace type="date" with type="text", but since it's not for mobile use, should be fine...

Below is the code snippet after adding Modernizr:

...
<input type="date" id="startDate" />
...
var dateFormat = Modernizr.inputtypes.date ? 'YYYY-MM-DD' : 'MM/DD/YYYY';

$('#startDate').val(moment().startOf('month').format(dateFormat));
...

You can try out the calendar via github.io. It's a work-in-progress...