A Date Range jQuery Plugin for Generating Date Options

View the Demo | Download the Zip

Creating the specialized Request for Proposal form during the development process for Durham Convention Center's (DCC) new website was no easy task, but it was fun. This form provided some unique user-interaction opportunities. We need to capture a significant amount of date&time-centric information: event dates, catering needs, overnight rooms, etc.

Furthermore, after reviewing their previous form, I realized I needed to generate input options on-the-fly based on a submitted date range. Using jQuery and the jQuery User Interface's datepicker widget here is a simple javascript Date Range plugin based on my work from the DCC RFP form.

OVERVIEW:

The idea for the plugin is to have a user enter a date range, then generate other input options based on that date range. Taking an example from the DCC site, users would input catering requests for their event, and we would then populat a dropdown menu of event dates for the users to pick from.

REQUIREMENTS:

jQuery 1.4.0 or greater
jQuery User Interface 1.7.2 or greater
Any jQuery UI Theme

THE MARKUP:

The html for this plugin is simple. You will need two input fields and a container for output. Here I'll use the '#output' <div> for the container.

<form id="date-picker">
<fieldset>
<legend>Input</legend>
<p><label>Start Date:</label> <input id="start_date"type="text" value="" /></p>
<p><label>End Date:</label> <input id="end_date" type="text" value="" /></p>
</fieldset>
<fieldset>
<legend>Output</legend>
<div id="output">
</div>
</fieldset>
</form>

THE JAVASCRIPT:

The javascript is straight forward as well. It needs to know where the date information ('startDate' and 'endDate' options) is coming from and then what kind of output ('output' option) is desired. At the moment, There are three types of output: Dropdown List, Checkbox List and Radio Button List.

$('#output').nmcDateRanger({
startDate: '#start_date',
endDate: '#end_date',
output: 'radio'
});

CONCLUSION:

There you have it! Using some very simple javascript markup, I prevented users from entering duplicate information. While I had some specific uses for this code – including a room-reservation table, I'm interested in hearing about other output types and potential applications for the plugin.

View the Demo | Download the Zip

If you liked my post then,

Click here to Subscribe to FREE email updates from "itrickz", so that you do not miss out anything that can be valuable to you and your blog!!