показать другие месяцы в jquery ui datepicker - PullRequest
Новая
       9

показать другие месяцы в jquery ui datepicker

2 голосов
/ 20 января 2012

Мне нужно показывать другие месяцы как '-' в моем указателе даты jquery ui. 

$( "#datepicker" ).datepicker({
    showOtherMonths: true
});

Приведенный выше код показывает даты других месяцев.Но мне нужно указать дату в других месяцах как «-».

Например,

enter image description here

Пожалуйста, помогите кому-нибудь ..

Ответы [ 2 ]

3 голосов
/ 20 января 2012

Я не могу найти ничего, что позволяло бы вам контролировать текст, отображаемый в ячейках "другого месяца", но вы можете обходить его.

Guganeshan.T находится на правильном пути. Но сложная часть заключается в применении изменений в нужное время. События beforeShow и onChangeMonthYear запускаются до , когда отображается новый месяц, и есть после версий этих событий. Мой обычный прием для подобных ситуаций - использовать setTimeout с тайм-аутом, равным нулю, что фактически позволяет поставить в очередь функцию, которая будет вызвана после того, как браузер снова получит управление, и это после текущего фрагмента JavaScript закончил бежать. Так что-то вроде этого должно сделать свое дело: 

function ickyHyphenKludge(inst) {
    setTimeout(function() {
        inst.dpDiv.find('.ui-datepicker-other-month span.ui-state-default').html('-');
    }, 0);
}

$("#datepicker").datepicker({
    showOtherMonths: true,
    selectOtherMonths: false,
    beforeShow: function(input, inst) {
        ickyHyphenKludge(inst);
    },
    onChangeMonthYear: function(year, month, inst) {
        ickyHyphenKludge(inst);
    }
});

Демо: http://jsfiddle.net/ambiguous/YKNmV/1/

Это довольно грязно и вонючее, но оно работает, оно должно быть довольно твердым, и я не могу думать ни о каком другом.

2 голосов
/ 20 января 2012

Я проверил CSS, используемый в элементе управления DatePicker пользовательского интерфейса jQuery.Они используют класс ui-priority-secondary для дат в других месяцах.

Поэтому вы можете использовать jQuery, чтобы найти элементы, которые используют этот конкретный класс, и заменить HTML на - и центрировать его.

Я попробовал следующее, и это сработало.

$('.ui-datepicker-calendar .ui-priority-secondary').html('-').css('text-align', 'center')

Надеюсь, что поможет

ОБНОВЛЕНИЕ:

Поскольку я проверял это только с помощью консоли Firebug, я не видел сценарий, в котором он не будет применен в нужное время. @ mu слишком короткий указал на это и имеет рабочее решение.

...