(function ($) { var settings = { multiple: true, datePickerOptions: { format: 'm/d/yyyy', autoclose: true, } }; var methods = { init: function (options) { settings = $.extend(true, settings, options); var pickers = this.each(function () { $(this).datepicker(settings.datePickerOptions); }); return methods.setState.apply(this, [settings.multiple]); }, setState: function (multiple) { settings.multiple = multiple; return methods.refresh.apply(this); }, refresh: function () { return this.each(function () { var $this = $(this), $inputs = $this.find('input.date').toArray(), $startDate = $inputs.length > 0 ? $($inputs[0]) : null, $startAddon = $startDate ? $startDate.next('span.input-group-addon') : null, $endDate = $inputs.length > 1 ? $($inputs[1]) : null, $endAddon = $endDate ? $endDate.next('span.input-group-addon') : null, $rAddon = $this.find('div.input-group-addon'); if (!$startDate || !$endDate) { throw 'Container does not contain inputs for start/end dates' } // we should always hide calendar right after end date picker if ($endAddon) $endAddon.hide(); if (settings.multiple) { if ($startAddon) $startAddon.hide(); $endDate.show(); $rAddon.show(); } else { var picker = $endDate.datepicker('update', ''); if (picker.valid && typeof picker.valid === 'function') picker.valid(); $endDate.hide(); $rAddon.hide(); if ($startAddon) $startAddon.show(); } }); }, }; $.fn.datePickerRange = function (options) { if (typeof options === 'string' && typeof methods[options] === 'function') { return methods[options].apply(this, Array.prototype.slice.call(arguments, 1)); } else if (typeof options === 'object' || !options) { return methods.init.apply(this, arguments); } }; }(jQuery));