Skip to content

Instantly share code, notes, and snippets.

@wvega
Created September 17, 2014 00:19
Show Gist options
  • Save wvega/a0b458f5344f15c62ac3 to your computer and use it in GitHub Desktop.
Save wvega/a0b458f5344f15c62ac3 to your computer and use it in GitHub Desktop.
A(nother) daterange jQuery UI plugin (WIP)
$.fn.daterange = function( options ) {
$( this ).each( function() {
var element = $( this ),
settings = $.extend( {}, $.fn.daterange.defaultOptions, options ),
startDateField = $( settings.startDateField ),
endDateField = $( settings.endDateField ),
startDate = settings.startDate || null,
endDate = settings.starDate || null;
element.datepicker( $.extend( settings, {
beforeShowDay: beforeShowDatepickerDay,
onSelect: onDatepickerSelect,
} ) );
function beforeShowDatepickerDay( date ) {
var className = '', showDay = true;
if ( startDate !== null && endDate === null && date < startDate ) {
showDay = false;
}
if ( startDate !== null && endDate !== null && date >= startDate && date <= endDate ) {
className = 'ui-datepicker-selected-range';
}
return [ showDay, className, '' ];
}
function onDatepickerSelect( selected, datepicker ) {
console.log( selected );
if ( startDate !== null && endDate === null ) {
setRangeEndDate( element.datepicker( 'getDate' ), selected );
} else {
resetRangeWithStartDate( element.datepicker( 'getDate' ), selected );
}
element.datepicker( 'refresh' );
}
function setRangeEndDate( date, formattedDate ) {
endDateField.val( formattedDate );
endDate = date;
}
function resetRangeWithStartDate( date, formattedDate ) {
setRangeEndDate( null, '' );
startDateField.val( formattedDate );
startDate = date;
}
} );
};
$.fn.daterange.defaultOptions = {
// daterange options
startDate: null,
endDate: null,
startDateField: null,
endDateField: null,
// datepicker options
numberOfMonths: 3,
};
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment