По результатам сегодняшнего труда решил написать небольшую обучаловку, которая я надеюсь станет первой из цикла статей про jQuery UI. Начнем я думаю с того, что констатируем, что все примеры в мануале немного недостаточны для создания полнофункционального работающего приложения, поэтому нужны такие вот обучаловки.

Давайте обрисуем наши потребности: нам нужен сдвоенный календарик выбора периода, чтобы дата начала периода не была больше даты конца периода и меньше какой-то границы, соответственно дата конца периода не должна быть меньше даты начала и больше сегодняшней. Для этого я набросал вот такой лаконичный код.

jQuery().ready(function($){
	// двум полям ввода
	$(":input[name='fromDate'], :input[name='toDate']")
		// устанавливаем начальное значение (текущую дату)
		.val($.datepicker.formatDate('dd/mm/yy', new Date()))
		// и добавляем календарик, которому в виде опций передаем 
		// русскую локализацию объединенную с массивом настроек
		.datepicker($.extend({}, {
 			// в call-back функции перед показом задаем доступный для выбора период
			beforeShow: function (input) { 
				return {
					// формируем верхнюю границу
					minDate: (input.name == "toDate" 
						// если не выбрана дата на втором календаре
						? $(":input[name='fromDate']").datepicker("getDate")
 						// берем нижнюю границу
						: $.datepicker.parseDate("dd/mm/yy", "01/01/2009") ), 
					// формируем нижнюю границу
					maxDate: (input.name == "fromDate" 
						// если не выбрана дата на первом календаре
						? $(":input[name='toDate']").datepicker("getDate") 
 						// берем сегодняшнюю дату
						: new Date())
				}; 
			}, 
			// задаем формат даты
			dateFormat: "dd/mm/yy", 
			// указываем путь к картинке
			buttonImage: "themes/smoothness/images/calendar.gif", 
			// показываем картинку возле обоих input'ов
			showOn: "both",
			// убираем кнопку из под картинки
			buttonImageOnly: true 
		})
	);
});

Добавлено: 23 Апреля 2018 12:30:41 Добавил: Андрей Ковальчук Нравится 0

Добавить