[Important Notice: I’ve discovered some bug in demo of durationPicker. It runs correctly only in FF. I will fix it soon and notify you here.]

Have you ever looked at Googles’s (excellent) calendar app and wished that you had the  ‘event planing widget’ in your web form? Well, here is my own version, a reversed engineered one, which I give for free use. It was originaly developed for company I work for, and was not intended to be a completely standalone plugin, so there are still some dependencies. More on that later.

Google's original duration picker

My version of duration picker

Basic functionality is quite the same as in GCalendar thought without the ‘repeat event’ feature. If you are familiar with the original widget, then there is not much to explain how to use it, I will just name few differencies:

• The calendar widget is icon-triggered. Click icon to toggle calendar.
• All input fields use maskedinput plugin, so you can type date directly without worrying about correct format (Google doesn’t have that! 😉 ).
• Immediate validation – if you type invalid date (‘from’ is greater than ‘to’) fields will be highlighted in red.

Usage:

Configuration either via data- attributes (dateformat, timeformat) or by overriding defaults in .js

Example:

<div class="durationPicker" data-dateFormat="dd.mm.yyyy" data-timeformat="hh:MM tt">
	<input class="dateFrom"/>
	<input class="timeFrom"/>
	<input class="timeTo"/>
	<input class="dateTo"/>
	<span style="float:right;">
		<input class="wholeDayCheckbox" type="checkbox" id="1"/><label for="1">Whole day</label>
	</span>
</div>

As you can see, you have to provide the basic html structure yourself.  Script will then add its own stuff to it, but it will not generate input fields for you. But you can add any classes or styles, it should work:) If you feel like you can add labels, but I think it is intuitive enough even without them.

You can use almost  any date format just if you keep the year as yyyy.  Do not use yy for year. Time format should have two digits for both hours and minutes, tt stands for am/pm string (always in lowercase, sorry).

Initialize:

$('.durationpicker').each(function() {
	$(this).durationpicker();
});

If  input fields doesn’t have any value than current date / current time will be used.

Script dependencies:

Duration picker is not completely standalone, it relies on other scripts, so you have to include them all.

• jquery – no comment 🙂
• jquery.datepicker – no comment 🙂 I use custom build of jqueryui
• jquery.maskedinput.js – that’s what takes take of correct formatting in date & time fields
• consolecheck.js – mocks console object if not present
• dateformat.js – takes care of correct dateformat 😉
• datehelper.js – parses formatted date string and return Date() object.
• timehelper.js – similar to datehelper but for time strings only.
• stringextension.js – contains definition of StringBuilder and String.trim() function.
• jquery.dv.datepicker.js – initialises jquery.datepickers in a special way to enable <div> as a trigger instead of original <img>. It’s more flexible.

Demo:

Click here 🙂

Download:

Get zipped file here or check my Github Repository.

Known issues:

Always call durationpicker() on single element only!. Due to “specific” plugin “architecture” there is problem with scope when runned on array of multiple elements. (This is similar to outer and inner variables in a for cycle…) I am not going to fix it, because in most cases there will be only one instance of durationpicker. And if you ever need more then one you have to initialize it one by one or use this simple workaround:

$('.durationpicker').each(function() {
	$(this).durationpicker();
});