(function ($) { function compareDates(start, end, format) { var temp, dateStart, dateEnd; try { dateStart = $.datepicker.parseDate(format, start); dateEnd = $.datepicker.parseDate(format, end); if (dateEnd < dateStart) { temp = start; start = end; end = temp; } } catch (ex) {} return { start: start, end: end }; } $.fn.daterange = function (opts) { // defaults opts = $.extend({ "changeMonth": false, "changeYear": false, "numberOfMonths": 3 }, opts || {}); var onSelect = opts.onSelect || $.noop; var onClose = opts.onClose || $.noop; var beforeShow = opts.beforeShow || $.noop; var beforeShowDay = opts.beforeShowDay; var lastDateRange; function checkDate(strDate){ if(!strDate.match(/^\d{4}\/\d{1,2}\/\d{1,2}$/)){ return false; } var dateArr = strDate.split("/"); if(dateArr.length < 3){ return false; } var year = Number(dateArr[0]); var month = Number(dateArr[1] - 1); var day = Number(dateArr[2]); if(year >= 0 && month >= 0 && month <= 11 && day >= 1 && day <= 31){ var date = new Date(year, month, day); if(isNaN(date)){ return false; }else if(date.getFullYear() == year && date.getMonth() == month && date.getDate() == day){ return true; } } return false; } function storeLastDateRange(fromdateText, todateText, dateFormat) { var start, end; if ( fromdateText != "" && todateText != "" ){ start = $.datepicker.parseDate(dateFormat, fromdateText); end = $.datepicker.parseDate(dateFormat, todateText); lastDateRange = {start: start, end: end}; } else { lastDateRange = null; } } opts.beforeShow = function (input, inst) { var elemntDatepicker = document.getElementById("datepicker_from"); var fromdatevalue = elemntDatepicker.value; if ( !checkDate(fromdatevalue) ){ fromdatevalue = ""; } var elemntDatepicker = document.getElementById("datepicker_to"); var todatevalue = elemntDatepicker.value; if ( !checkDate(todatevalue) ){ todatevalue = ""; } $(this).datepicker('setDate' , fromdatevalue); var dateFormat = $(this).datepicker("option", "dateFormat"); storeLastDateRange(fromdatevalue, todatevalue, dateFormat); beforeShow.apply(this, arguments); }; opts.beforeShowDay = function (date) { var out = [true, ""], extraOut; if (lastDateRange && lastDateRange.start <= date) { if (lastDateRange.end && date <= lastDateRange.end) { out[1] = "ui-datepicker-range"; } } if (beforeShowDay) { extraOut = beforeShowDay.apply(this, arguments); out[0] = out[0] && extraOut[0]; out[1] = out[1] + " " + extraOut[1]; out[2] = extraOut[2]; } return out; }; // datepicker's select date event handler opts.onSelect = function (dateText, inst) { var textStart; if (!inst.rangeStart) { inst.inline = true; inst.rangeStart = dateText; var elemntFrom = document.getElementById("datepicker_from"); elemntFrom.value = dateText; SelectChangeDatepicker('datepicker_from', 'srch_syear', 'srch_smonth', 'srch_sday'); var elemntTo = document.getElementById("datepicker_to"); elemntTo.value = dateText; SelectChangeDatepicker('datepicker_to', 'srch_eyear', 'srch_emonth', 'srch_eday'); } else { inst.inline = false; textStart = inst.rangeStart; if (textStart !== dateText) { var dateFormat = $(this).datepicker("option", "dateFormat"); var dateRange = compareDates(textStart, dateText, dateFormat); $(this).val(dateRange.end); //$(this).val(dateRange.start + opts.rangeSeparator + dateRange.end); inst.rangeStart = null; var elemntFrom = document.getElementById("datepicker_from"); elemntFrom.value = dateRange.start; SelectChangeDatepicker('datepicker_from', 'srch_syear', 'srch_smonth', 'srch_sday'); var elemntTo = document.getElementById("datepicker_to"); elemntTo.value = dateRange.end; SelectChangeDatepicker('datepicker_to', 'srch_eyear', 'srch_emonth', 'srch_eday'); } } // call original callback for select event onSelect.apply(this, arguments); }; opts.onClose = function (dateText, inst) { // reset state inst.rangeStart = null; inst.inline = false; // call original callback for close event onClose.apply(this, arguments); }; return this.each(function () { var input = $(this); if (input.is("input")) { input.datepicker(opts); } }); }; }(jQuery));