Как отключить будущие даты при использовании jQuery datepicker внутри Табулятора? - PullRequest
Новая
       102

Как отключить будущие даты при использовании jQuery datepicker внутри Табулятора?

0 голосов
/ 09 мая 2020

Я пытаюсь отключить будущие даты на jQuery datepicker, используемом с Tabulator, но безрезультатно. 

var table = new Tabulator("#MyDiv", {
    height: "100%",
    layout: "fitDataFill",
    columns: [
        { title: "Date Worked", field: "DateComp", hozAlign: "center", sorter: "date", editor: dateEditor },
        { title: "Memo", field: "Memo", width: 144, hozAlign: "left", editor: "input" },
    ]
});

var dateEditor = function (cell, onRendered, success, cancel) {
    var cellValue = moment(cell.getValue(), "MM/DD/YYYY").format("YYYY-MM-DD");
    input = document.createElement("input");
    input.setAttribute("type", "date");
    input.style.padding = "4px";
    input.style.width = "100%";
    input.style.boxSizing = "border-box";
    input.value = cellValue;

    onRendered(function () {
        input.style.height = "100%";
        //$(input).datepicker({ endDate: new Date() });
        $(input).datepicker({ maxDate: 0 });
        input.focus();
    });

    function onChange() {
        if (input.value != cellValue) {
            success(moment(input.value, "YYYY-MM-DD").format("MM/DD/YYYY"));
        } else {
            cancel();
        }
    };
    //submit new value on blur or change
    input.addEventListener("blur", onChange);
    //submit new value on enter
    input.addEventListener("keydown", function (e) {
        if (e.keyCode == 13) {
            onChange();
        }
        if (e.keyCode == 27) {
            cancel();
        }
    });
    return input;
};

Я попытался исправить несколько исправлений, настроив список параметров datepicker (например, maxDate и endDate), но ничего не работает. Будущие даты на datepicker можно выбрать независимо. Это проблема Tabulator? Или проблема с jQuery?

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

Любая помощь приветствуется.

1 Ответ

1 голос
/ 10 мая 2020

Похоже, есть проблема с использованием datepicker внутри ячейки, которую я не мог понять. Выдается ошибка об отсутствии данных экземпляра.

Вот пример использования flatpickr вместо jQuery datepicker. https://jsfiddle.net/nrayburn/65t1dp23/49/

Две наиболее важные части включают валидатор, поэтому пользователи не могут вводить дату. (Я не думаю, что они когда-либо могли, но если они каким-то образом это сделают, это предотвратит недопустимые даты.). Другой - использование maxDate или эквивалентного параметра из библиотеки выбора даты при создании экземпляра средства выбора даты.

Вот настраиваемый валидатор, предотвращающий любые даты в будущем. (Он может не обрабатывать разницу во времени должным образом в этой настройке.) 

  function noFutureDate(cell, value){
    const cellValue = moment(new Date(value));
    const today = moment();
    if (cellValue.diff(today) > 0){
        return false;
    }
    return true;
  }

Вы также должны создать собственный редактор. Вот что вам конкретно нужно для экземпляра выбора даты. Вы можете получить все остальное из скрипки, но другие части на самом деле не имеют отношения к средству выбора даты. 

  const input = document.createElement("input");
  input.value = cell.getValue();
  onRendered(function(){
    flatpickr(input, {
      maxDate: moment().format('MM/DD/YYYY')
    })
    input.focus();
  });
...