Блог

Главная - Вопросы по программированию - Как установить максимальное количество секунд в ионном компоненте datetime

Как установить максимальное количество секунд в ионном компоненте datetime

#angular #ionic-framework #ionic5

#angular #ionic-framework #ionic5

Вопрос:

Я использую ionic 5 и имею средство выбора даты и времени ionic, которое позволяет пользователям выбирать часы, минуты и секунды. Однако мне нужно иметь возможность устанавливать максимальное время, чтобы пользователь не мог выбрать время, которое больше. Я установил свойство max компонента datetime, и, похоже, оно работает часами и минутами, но игнорирует секунды. У кого-нибудь есть подсказка?

Пример кода в Stackblitz

Ответ №1:

Боюсь, что это ошибка в исходном коде Ionic: (

При взгляде на эту строку кода видно, что validateColumns() метод проверяет год, месяц, день, час и минуту, но не секунды:

   private validateColumns(columns: PickerColumn[]) {
    const today = new Date();
    const minCompareVal = dateDataSortValue(this.datetimeMin);
    const maxCompareVal = dateDataSortValue(this.datetimeMax);
    const yearCol = columns.find(c => c.name === 'year');

    let selectedYear: number = today.getFullYear();
    if (yearCol) {
      // default to the first value if the current year doesn't exist in the options
      if (!yearCol.options.find(col => col.value === today.getFullYear())) {
        selectedYear = yearCol.options[0].value;
      }

      const selectedIndex = yearCol.selectedIndex;
      if (selectedIndex !== undefined) {
        const yearOpt = yearCol.options[selectedIndex] as PickerColumnOption | undefined;
        if (yearOpt) {
          // they have a selected year value
          selectedYear = yearOpt.value;
        }
      }
    }

    const selectedMonth = this.validateColumn(columns,
      'month', 1,
      minCompareVal, maxCompareVal,
      [selectedYear, 0, 0, 0, 0],
      [selectedYear, 12, 31, 23, 59]
    );

    const numDaysInMonth = daysInMonth(selectedMonth, selectedYear);
    const selectedDay = this.validateColumn(columns,
      'day', 2,
      minCompareVal, maxCompareVal,
      [selectedYear, selectedMonth, 0, 0, 0],
      [selectedYear, selectedMonth, numDaysInMonth, 23, 59]
    );

    const selectedHour = this.validateColumn(columns,
      'hour', 3,
      minCompareVal, maxCompareVal,
      [selectedYear, selectedMonth, selectedDay, 0, 0],
      [selectedYear, selectedMonth, selectedDay, 23, 59]
    );

    this.validateColumn(columns,
      'minute', 4,
      minCompareVal, maxCompareVal,
      [selectedYear, selectedMonth, selectedDay, selectedHour, 0],
      [selectedYear, selectedMonth, selectedDay, selectedHour, 59]
    );

    return columns;
  }

Возможно, проблема где-то в другом месте, а не в этой конкретной строке, но в любом случае есть проблема с Github со списком множества ошибок, связанных с ion-datetime компонентом (https://github.com/ionic-team/ionic-framework/issues/16630 ) поэтому я бы рекомендовал вам создать новую проблему с вашей демонстрационной версией stackblitz и добавить комментарий, чтобы включить эту ошибку в этот список.

Вы также можете отправить PR, если хотите 🙂

Я не смог найти никаких обходных путей, поскольку мы пока не можем прослушивать изменение столбцов, поэтому я думаю, что единственным решением, пока эта проблема не будет устранена, будет проверка секунд после того, как пользователь нажмет «Готово» и покажет сообщение об ошибке, если оно больше максимального (я знаю, это далекок сожалению, от идеального).

Метки: