JavaScript Date Calculator - Calendar Picker

In this week's adventure in creating a JavaScript Date Calculator I'm delving into inserting a date picker. In my research, I discovered quite a few calendar pickers already in existence, so instead of re-inventing the wheel I used one from the YUI library.

Installing and Instantiating the YUI Calendar

The YUI Calendar files, including CSS stylesheets and skins, can be downloaded from GitHub. I added the CSS files to my project's CSS file folder and referenced the .js file by linking it as a source before the closing body tag in the HTML document. By doing so, I had to write the script to instantiate the calendars in the HTML document instead of the project's .js file.

Note: There are methods to reference an external JS file in another using AJAX, jQuery or Node.js but, that is beyond the scope of what I'm doing here.

We create the calendar by specifying in the use() method which parameters we need from the original .js file. Since YUI's JS source file includes many widgets, we need to use the 'calendar' parameter along with 'datatype-date' for when we called the Calendar constructor with the desired attributes. This calendar allows you to choose the dimensions, whether previous and future months are shown, and a start date. I'm using the Date() constructor with no arguments so that today's date is the default.

YUI().use('calendar', 'datatype-date', function(Y) { // Create a new instance of calendar, placing it in // #mycalendar1 container, setting its width to 340px, // the flags for showing previous and next month's // dates in available empty cells to true, and setting // the date to today's date. var calendar = new Y.Calendar({ contentBox: "#mycalendar1", width:'340px', showPrevMonth: true, showNextMonth: true, date: new Date()}).render(); });

Selecting a Date

This calendar allows you to call a function when a date is selected on the calendar. To verify that the calendar is working correctly, I threw the selected date into a text element.

// Get a reference to Y.DataType.Date var dtdate = Y.DataType.Date; // Listen to calendar's selectionChange event. calendar.on("selectionChange", function (ev) { // Get the date from the list of selected // dates returned with the event (since only // single selection is enabled by default, // we expect there to be only one date) var newDate = ev.newSelection[0]; // Format the date and output it to a DOM // element. Y.one("#selecteddate1").setHTML(dtdate.format(newDate)); });

Finally I needed to access the text in the HTML element to use it in my calculation method. I tested this using the Days Until function. I ended up changing the signature of that function to remove the parameter and instead accessed the innerText of the selecteddate1 element. You can see the full code in my previous post, but these are the changes I made

//removed dateString parameter function daysUntil () { let today = new Date(); //accessed the selecteddate1 element's text let inputDate = document.getElementById("selecteddate1").innerText; //used an escape sequence on the quotes to include them in the Date constructor let futureDate = new Date("\"" + inputDate + "\"");

As you can see, the selected date is being used correctly in the DaysUntil function 

Next up, I'll use the Radio Buttons to determine which inputs/controls are visible to the user.