Как показать всплывающую подсказку о отключенных датах jquery datepicker - PullRequest
Новая
       59

Как показать всплывающую подсказку о отключенных датах jquery datepicker

0 голосов
/ 13 июня 2018

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

availableDates = ["09/04/2018", "09/05/2018", "09/06/2018", "08/31/2018", "09/01/2018"];
holidays_dates = { "09/02/2018": "sgsdf", "05/27/2018": "home sick", "08/20/2018": "fcg", "05/26/2018": "i dont know", "05/25/2018": "home sick" }

function available(date) {

    var moth = String(date.getMonth() + 1);
    if (moth.length == 1) {
        moth = "0" + moth;
    }

    var dat = String(date.getDate());
    if (dat.length == 1) {
        dat = "0" + dat;
    }
    dmy = moth + "/" + dat + "/" + date.getFullYear();

    if ($.inArray(dmy, availableDates) != -1) {
        return [true, ""];
    } else if (dmy in holidays_dates) {
        console.log(dmy)
        return [false, "Highlighted", holidays_dates[dmy]];
    } else {
        return [false, ""];
    }
}


$("#datepicker").datepicker({
    beforeShowDay: function (dt) {
        return available(dt);
    },
    changeMonth: true,
    changeYear: true,
    onSelect: function (dateText) {
        getslots(dateText, selected_consultant);
    }
});

переменная holiday_dates состоит из отключенной даты и причины и прекрасно добавляет причину к заголовку элемента 

<td class=" ui-datepicker-unselectable ui-state-disabled Highlighted" title="home sick">
    <span class="ui-state-default">25</span>
</td>

, как указано выше, причина праздника добавлена ​​в атрибуте title тега, нозависание в эту дату не показывает всплывающую подсказку

1 Ответ

0 голосов
/ 11 октября 2018

Чтобы отключить дату и показать подсказку, используйте параметр beforeShowDay. 

beforeShowDay: function (date) {
    var formattedDate = $.datepicker.formatDate('mm/dd/yy', date),
        checkDisable = disabledDates.indexOf(formattedDate) == -1;

    if(checkDisable == true){
        return [checkDisable];
    }else{
    //add ui-datepicker-unselectable class to the disabled date.
      return [!checkDisable,'ui-datepicker-unselectable',holidays_dates[formattedDate]];
    }
}

и настройте CSS для отключенной даты 

function changeDisableDateColor(){
var unselectableDate = $('.ui-datepicker-unselectable a');

unselectableDate.css({
    background: 'red',
    cursor: 'context-menu',
    border: 0
});

}

, позвоните по вышеуказанномуфункция т.е. changeDisableDateColor при нажатии поля даты.$('#datepicker').click(function() { changeDisableDateColor(); });

, а также внутри onChangeMonthYear (обнаруживает изменение в месяце или году) опция 

onChangeMonthYear: function(){
  setTimeout(function(){
    changeDisableDateColor();
  });
}

setTimeout используется, поскольку пользовательский интерфейс jquery удаляет все элементы даты и добавляет их снова, поэтому мыподожди, пока у нас не будет правильного свидания.Без setTimeout var unselectableDate = $('.ui-datepicker-unselectable a'); выдаст предыдущую дату.

Вот jsfiddle: http://jsfiddle.net/Xx4GS/1225/

Надеюсь, я ответил на вопрос.

Отредактировано:

Была ошибка, когда день или месяц состояли из одной цифры, то есть 1-9, тогда дата не совпадает и не будет отключена. 

if(month.toString().length == 1){
    month = '0'+month.toString();
}

if(day.toString().length == 1){
    day = '0'+ day.toString();
}

Исправлена ​​ошибка, добавляя 0 перед днем ​​и месяцем.

Вот решенная скрипка js: http://jsfiddle.net/Lf5p3hct/2/

...