Есть ли Javascript или некоторая библиотека, которая создала бы датупиксера для веб-страницы (аналогично JQuery UI DatePicker, которая позволяла бы только определенным датам быть кликабельными и выделенными.
Например, на стороне сервера я могу указать массив дней, чтобы можно было выбрать.
Событие Datepicker beforeShowDay() предназначено именно для этой цели. Здесь пример, когда набор допустимых дат относительно мал для целей иллюстрации. В зависимости от того, сколько дат у вас есть и как они выбраны, вы могли бы написать метод, который программно выбирал даты (например, игнорируя выходные, 1 и 15 числа каждого месяца и т.д.). Или вы можете комбинировать оба метода, например удалить выходные дни и фиксированный список праздников.
$(function() {
// this could be a static hash, generated by the server, or loaded via ajax
// if via ajax, make sure to put the remaining code in a callback instead.
var dates_allowed = {
'2009-12-01': 1,
'2009-12-25': 1,
'2010-09-28': 1,
'2011-10-13': 1
};
$('#datepicker').datepicker({
// these aren't necessary, but if you happen to know them, why not
minDate: new Date(2009, 12-1, 1),
maxDate: new Date(2010, 9-1, 28),
// called for every date before it is displayed
beforeShowDay: function(date) {
// prepend values lower than 10 with 0
function addZero(no) {
if (no < 10){
return "0" + no;
} else {
return no;
}
}
var date_str = [
addZero(date.getFullYear()),
addZero(date.getMonth() + 1),
addZero(date.getDate())
].join('-');
if (dates_allowed[date_str]) {
return [true, 'good_date', 'This date is selectable'];
} else {
return [false, 'bad_date', 'This date is NOT selectable'];
}
}
});
});
Возвращаемые значения
[0]: boolean selectable or not,
[1]: CSS class names to apply if any (make sure to return '' if none),
[2]: Tooltip text (optional)
Обратите внимание, что переменная date, указанная в обратном вызове, представляет собой экземпляр объекта Date, представляющего данный день, а не текстовую версию этой даты в указанном формате. Например, вы можете сгенерировать список допустимых дат в одном формате, указав даты в datepicker в другом формате (например, чтобы вам не пришлось преобразовывать даты из БД при создании страницы).
См. также Можно ли настроить jQuery UI Datepicker для отключения субботы и воскресенья (и праздников)?
Разрабатывая Rob Van Dam ответ, вот пример кода (с использованием jQuery UI datepicker) для выбора дат с использованием AJAX. Я использую AJAX для запроса страницы PHP, которая возвращает включенную дату из базы данных (потому что я хочу показывать даты, когда у меня есть фактические данные).
Идея состоит в том, чтобы делать запрос AJAX каждый раз, когда пользователь меняет месяц, а затем сохраняет разрешенные даты в этом месяце в глобальном массиве (allowedDates), который позже используется beforeShowDay.
Конечно, вы могли бы выполнить запрос AJAX в beforeShowDay, но это было бы довольно непростым из-за большого количества запросов AJAX (более 30 для каждого месяца).
var allowedDates = new Object();
function queryAllowedDates (year, month, id) {
$.ajax({
type: 'GET',
url: 'calendar_days.php',
dataType: 'json',
success: function(response) {
allowedDates[id] = response.allowedDates;
},
data: {year:year,month:month},
async: false
});
}
$("#datepicker1").datepicker({
dateFormat: 'dd.mm.yy',
changeMonth: true,
changeYear: true ,
beforeShow: function (input) {
var currentDate = $(input).datepicker('getDate');
var id = $(input).attr('id');
queryAllowedDates(currentDate.getFullYear(), currentDate.getMonth()+1,id);
},
onChangeMonthYear: function (year, month, inst) {
queryAllowedDates(year, month, inst.input.attr('id'));
},
beforeShowDay: function (day) {
var id = $(this).attr('id');
var date_str = [
day.getFullYear(),
day.getMonth() + 1,
day.getDate()
].join('-');
if (allowedDates[id] != undefined && allowedDates[id][date_str]) {
return [true, 'good_date', 'This date is selectable'];
} else {
return [false, 'bad_date', 'This date is NOT selectable'];
}
}
});
В этом примере страница PHP возвращает массив JSON, содержащий что-то вроде:
{"allowedDates":{"2008-12-04":1,"2008-12-11":1}}
Вы можете начать с использования jquery ui datepicker. Загрузите последнюю версию и откройте ui.datepicker.js. См. _generateHTML. Ищите переменную невыбираемую. Если ваш код на стороне сервера может генерировать несколько script - он может заполнить некоторые новые настройки, которые вы могли бы продлить для выбора даты. Затем добавьте проверку в этот список допустимых дат в этой строке, где установлен параметр unselectable. Обратите внимание, что, похоже, выбор даты позволяет вводить даты с клавиатуры за пределы допустимого диапазона.
Если вы уже используете jquery ui, я бы, вероятно, просто переопределил прототип _generateHTML после загрузки jquery UI script.
Попробуйте dijit.Calendar Существует свойство isDisabledDate, которое вы можете установить в разметке или в JavaScript для функции. См. Второй пример. Метод отключения дат вызывается для каждого дня, когда он отображается. Функция могла бы сделать что-то вроде определения, следует ли следовать шаблону (это выходные?) Или посмотреть на какую-либо статическую таблицу (Array), которую вы предоставляете с сервера, например, на занятые дни или праздники. Метод getClassForDate может быть переопределен для возврата класса CSS.
Возможно, вы могли бы продлить DatePicker, чтобы разрешить отключенные/активированные даты... Я считаю, что вы можете удалить обработчик кликов для отключенных дат, делая их незаметными. Затем просто настройте CSS для отключенных дат, и они могут быть "greyed out".
Я сделал приложение точно так же (веб-сборщик дат с разными датами запретил) с помощью YUI Calendar и кучу пользовательского кода. При этом я сделал это, прежде чем обнаружил чудесные радости jQuery (и "бог, это не так хорошо, как jQuery, но, по крайней мере, он использует методы jQuery" jQuery UI). Если бы я снова это сделал, я бы определенно использовал jQuery UI (несмотря на множество неудач) в качестве основы; библиотеки микширования более сложны, чем иметь дело с незрелостью jQuery UI.
Я использую Самый крутой календарь Javascript в течение многих лет, и у него есть возможность отключить несколько дней календаря. Просто проверьте это, я использую его во всех проектах ASP.NET.
Более подробную информацию о датах отключения можно найти здесь.