Мне нужно выделить даты между датой начала и датой окончания, которые я должен указать. Может кто-нибудь помочь мне?
Выделите даты в определенном диапазоне с помощью средства выбора даты jQuery
Ответы (7)
Вы можете использовать событие beforeShowDay. Он будет вызываться для каждой даты, которая должна отображаться в календаре. Он передает дату и возвращает массив с [0]= isSelectable, 1= cssClass, [2] = Некоторый текст всплывающей подсказки
$('#whatever').datepicker({
beforeShowDay: function(date) {
if (date == myDate) {
return [true, 'css-class-to-highlight', 'tooltipText'];
}
}
});
Вот рабочий пример! Вам нужно будет создать пакет отсюда с http://jqueryui.com/download с ядром, виджетом и средством выбора даты. .
Часть javascript для размещения перед:
<script>
$(document).ready(function() {
var dates = ['22/01/2012', '23/01/2012']; //
//tips are optional but good to have
var tips = ['some description','some other description'];
$('#datepicker').datepicker({
dateFormat: 'dd/mm/yy',
beforeShowDay: highlightDays,
showOtherMonths: true,
numberOfMonths: 3,
});
function highlightDays(date) {
for (var i = 0; i < dates.length; i++) {
if (new Date(dates[i]).toString() == date.toString()) {
return [true, 'highlight', tips[i]];
}
}
return [true, ''];
}
});
</script>
HTML-часть:
<div id="datepicker"></div>
Добавьте где-нибудь этот CSS:
td.highlight {border: none !important;padding: 1px 0 1px 1px !important;background: none !important;overflow:hidden;}
td.highlight a {background: #99dd73 url(bg.png) 50% 50% repeat-x !important; border: 1px #88a276 solid !important;}
И вам нужно будет сделать небольшое изображение с именем bg.png, чтобы оно заработало.
.highlight a { background: red; }
Теперь оба будут красными :)
- person Mike; 27.01.2012
Подумал, что добавлю свои пять копеек, так как он кажется быстрее и легче, чем другие:
jQuery(function($) {
var dates = {
'2012/6/4': 'some description',
'2012/6/6': 'some other description'
};
$('#datepicker').datepicker({
beforeShowDay: function(date) {
var search = date.getFullYear() + '/' + (date.getMonth() + 1) + '/' + date.getDate();
if (search in dates) {
return [true, 'highlight', (dates[search] || '')];
}
return [false, '', ''];
}
});
});
Не уверен, что это все еще будет полезно, но поскольку это было полезно для меня, я хочу поделиться тем, что я сделал:
В моем JavaScript:
var holidays= ["2016/09/18", "2016/09/19", "2016/01/01", "2016/05/01", "2016/06/27", "2016/08/15"];
$("#SomeID").datepicker({ beforeShowDay: highLight });
function highLight(date) {
for (var i = 0; i < holidays.length; i++) {
if (new Date(holidays[i]).toString() == date.toString()) {
return [true, 'ui-state-holiday'];
}
}
return [true];
}
И в jquery-ui-theme.css я добавил
.ui-state-holiday .ui-state-default {
color: red;
}
Если вы хотите также выделить выходные, вам нужно использовать этот CSS вместо этого.
.ui-state-holiday .ui-state-default, .ui-datepicker-week-end .ui-state-default {
color: red;
}
И вот результат:
(Обратите внимание, что я настроил свой язык на испанский, но это не важно для этого кода)
Поздно на вечеринку, но вот JSFiddle, который я тестировал:
https://jsfiddle.net/gq6kdoc9/
HTML:
<div id="datepicker"></div>
JavaScript:
var dates = ['11/13/2017', '11/14/2017'];
//tips are optional but good to have
var tips = ['some description', 'some other description'];
$('#datepicker').datepicker({
dateFormat: 'dd/mm/yy',
beforeShowDay: highlightDays,
showOtherMonths: true,
numberOfMonths: 3,
});
function highlightDays(date) {
for (var i = 0; i < dates.length; i++) {
if (new Date(dates[i]).toString() == date.toString()) {
return [true, 'highlight', tips[i]];
}
}
return [true, ''];
}
И CSS:
td.highlight {
border: none !important;
padding: 1px 0 1px 1px !important;
background: none !important;
overflow: hidden;
}
td.highlight a {
background: #ad3f29 url(bg.png) 50% 50% repeat-x !important;
border: 1px #88a276 solid !important;
}
Построен на рабочем примере Майка выше!
mugur, ваш код не совсем работал у меня в Firefox или Safari, для этого требовалось отформатировать переменную date
(которую я получил от здесь). Здесь
function highlightDays(date) {
for (var i = 0; i < dates.length; i++) {
var d = date.getDate();
var m = date.getMonth();
m += 1; // JavaScript months are 0-11
var y = date.getFullYear();
var dateToCheck = (d + "/" + m + "/" + y);
if (dates[i] == dateToCheck) {
return [true, 'highlight', tips[i]];
}
}
return [true, ''];
}
И, конечно же, в приведенной выше функции не учитывается заполнение ведущими нулями, поэтому массив dates
необходимо изменить на:
var dates = ['22/1/2014', '23/1/2014'];