jQuery UI: RangePicker

Сегодня у меня выдался свободный день, поэтому расскажу вам как выбрать период на стандартном jquery datepicker

UPD (22.11.2014): актульно для jQuery UI 1.11, хотя можно применить для любой версии правильно переписав _selectDate

Поскольку офицальный пример — гавно, делать все надо самим.

Сначала немного подхачим jQuery UI, вот таким образом


(function ($) {

	// forget about this
	delete $.datepicker.constructor.prototype._selectDate;

	/* Update the input field with the selected date. */
	$.datepicker.constructor.prototype._selectDate = function (id, dateStr) {
		var onSelect,
			target = $(id),
			inst = this._getInst(target[0]);

		dateStr = (dateStr != null ? dateStr : this._formatDate(inst));
		if (inst.input) {
			inst.input.val(dateStr);
		}
		this._updateAlternate(inst);

		onSelect = this._get(inst, "onSelect");
		if (onSelect) {
			onSelect.apply((inst.input ? inst.input[0] : null), [dateStr, inst]);  // trigger custom callback
		} else if (inst.input) {
			inst.input.trigger("change"); // fire the change event
		}

		var closeOnSelect = this._get(inst, "closeOnSelect");
		if (inst.inline || !closeOnSelect) {
			this._updateDatepicker(inst);
		} else {
			this._hideDatepicker();
			this._lastInput = inst.input[0];
			if (typeof(inst.input[0]) !== "object") {
				inst.input.focus(); // restore focus
			}
			this._lastInput = null;
		}
	}

})(jQuery);

Как видете я добавил новый параметр closeOnSelect, если он установлен в false то попап не закроется. Это не должно мешать обычной работе календаря.

Дальше конфигурируем сам календарь, значение настроек смотрите в мануале


jQuery(function ($) {

	var from,
		to,
		$from = $("[name='from']"),
		$to = $("[name='to']");

	$from.add($to).datepicker({
		numberOfMonths: 2,
		showButtonPanel: true,
		dateFormat: "dd/mm/yy",
		minDate: new Date("12/01/2010"),
		maxDate: new Date("01/31/2011"),
		closeOnSelect: false,
		onSelect: function (selectedDate, inst) {
			var $this = $(this),
				format = inst.settings.dateFormat || $.datepicker._defaults.dateFormat,
				date = $.datepicker.parseDate(format, selectedDate);

			if (date < from || (date - from) < to - date) {
				from = date;
			} else {
				to = date;
			}

			$from.val($.datepicker.formatDate(format, from));
			$to.val($.datepicker.formatDate(format, to));
			$this.datepicker("refresh");
		},
		beforeShowDay: function (date) {
			if (date >= from && date <= to) {
				return [true, "ui-state-highlight"];
			}

			return [true, ""];
		},
		beforeShow: function (input, inst) {
			var format = inst.settings.dateFormat || $.datepicker._defaults.dateFormat;
			from = $.datepicker.parseDate(format, $from.val());
			to = $.datepicker.parseDate(format, $to.val());
		},
		onClose: function (dateText, inst) {
			var format = inst.settings.dateFormat || $.datepicker._defaults.dateFormat;
			$from.val($.datepicker.formatDate(format, from));
			$to.val($.datepicker.formatDate(format, to));
		}
	});

});

А вот и пример

3 Комментарии “jQuery UI: RangePicker

Комментарии закрыты