Перейти к содержанию

DateTimeInput#

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

Свойства#

bind#

Свойство, к которому биндится контрол.

тип значение по умолчанию допустимые значения
string -

bindingMode#

Позволяет биндить контрол на тип данных Time (значение time) или DateTimeOffset/Date (значение date).

тип значение по умолчанию допустимые значения
string - time, date

calendarButtonVisible#

Флаг отображения кнопки вызова календаря.

тип значение по умолчанию допустимые значения
bool true true/false

caption#

Заголовок контрола.

тип значение по умолчанию допустимые значения
string

captionTextAlign#

Выравнивание текста заголовка контрола (доступно с версии 3.26.0)

тип значение по умолчанию допустимые значения
string left left/right

captionWidth#

Ширина заголовка в колонках (для Bootstrap-верстки).

отнаследовано от Control

denyRoles#

Список ролей без прав на данный элемент.

отнаследовано от Control

editorWidth#

Ширина контрола в колонках (для Bootstrap-верстки).

отнаследовано от Control

enabled#

Доступность контрола для редактирования.

отнаследовано от Control

format#

Формат значения. По умолчанию значение.

тип значение по умолчанию допустимые значения
string dd.MM.yyyy HH:mm

hint#

Всплывающая подсказка, которая появляется при наведении на контрол.

отнаследовано от Control

id#

Идентификатор контрола.

отнаследовано от Control

placeholder#

Вспомогательный текст в поле ввода контрола.

тип значение по умолчанию допустимые значения
string -

readOnly#

Режим "только для чтения".

тип значение по умолчанию допустимые значения
bool false true/false

readRoles#

отнаследовано от Control

showCalendar#

Список ролей на чтение данных.

Скрыть/показать календарь.

тип значение по умолчанию допустимые значения
bool true true/false

showTimePicker#

Скрыть/показать окно с выбором времени.

тип значение по умолчанию допустимые значения
bool false true/false

tags#

Позволяет объединять контролы в группы, возвращает массив имен.

отнаследовано от Control

value#

Значение, которое устанавливается контролу в случае отсутствия биндинга.

В случае если биндинг назначен - будет установлено значение из прибинденного поля.

тип значение по умолчанию допустимые значения
datetime -

visible#

Видимость контрола.

отнаследовано от Control

width#

Ширина контрола.

отнаследовано от Control

writeRoles#

Список ролей на изменение данных.

отнаследовано от Control

clearButtonVisible#

тип значение по умолчанию допустимые значения
bool true true/false

Видимость кнопки очистки значения.

Методы#

focus#

Устанавливает фокус на контрол.

Отнаследовано от Control.

События#

valueChanged#

возникает при смене значения

параметр тип описание
s DateTimeInput экземпляр класса контрола
e object
e.args object аргументы события
e.args.date Date новое значение в контроле 
1
2
3
4
5
6
7
8
s = DateTimeInput {
    ... // экземпляр класса DateTimeInput
},
e = {
    args: {
        date: 'Mon Jan 01 2024 00:00:00 GMT+0500'
    }
}
Пример 
1
<DateTimeInput ... valueChanged='DateTimeInputExample_valueChanged' />

1
2
3
4
5
DateTimeInputExample_valueChanged(s,e) {
    console.log(s,e)
    const date = e.args.date;
    this.services.dialog.info(`Выбрана дата ${date}`);
}

Форматирование данных#

Смотри статью Форматирование данных

Поведение в гриде#

  • Если у эдитора не задано свойство format, то в качестве его значения будет использовано значение свойства cellsformat колонки
  • Если у эдитора не задано свойство format, а у колонки не задано свойство cellsformat, то в качестве значения свойства format и cellsformat будет использовано значение по умолчанию
  • Если у эдитора задано свойство format, а у колонки не задано свойство cellsformat, то для редактирования ячейки в гриде будет использоваться свойство format

Поведение при установке значения#

  • При пользовательском редактировании контрола (когда изначально значение было равно null) часы, минуты, секунды и миллисекунды будут устанавливаться в зависимости от текущего времени (для каждой компоненты времени отдельно), если контрол позволяет их редактировать (на редактирование времени влияет свойство format и showTimePicker). В остальных случаях значение будет устанавливаться в 0.
  • При программном редактировании допускается установка любого значения времени вне зависимости от настроек контрола. При дальнейшем пользовательском редактировании контрола, если какая-то из компоненты времени не доступна для редактирования, то она не изменит своего значения.

Примеры#

Применение разных форматов#

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
<Group caption="DateTimeInput">
    <DateTimeInput id="dateTimeInput" caption="Календарь" captionWidth="3" editorWidth="2"/>
    <DateTimeInput id="dateTimeFormat" caption="Настраиваемый формат" captionWidth="3" editorWidth="2"
                                    format="yyyy-MM-dd"/>
    <DateTimeInput id="dateTimeManual" caption="Отключенная кнопка" captionWidth="3" editorWidth="2"
                                    calendarButtonVisible="false" hint="Ввод с клавиатуры"/>
    <DateTimeInput id="dateTimeDisplay" caption="Выбор даты и времени" captionWidth="3" editorWidth="2"
                                    showTimePicker="true"/>
    <DateTimeInput id="timeDisplay" caption="Выбор времени" captionWidth="3" editorWidth="2" format="HH:mm"
                                    showTimePicker="true" showCalendar="false" bindingMode="time"/>
</Group>

Для ввода даты и времени используется контрол DateTimeInput. Выше в отрывке шаблона формы описаны несколько основных вариантов настройки этого контрола:

  • устанавливается формат отображения значения в контроле - свойство format;
  • настраивается доступность кнопки открытия календаря (для отключения ввода или только для ввода с клавиатуры) - свойство calendarButtonVisible;
  • включается интерфейс установки времени - свойство showTimePicker;
  • отключение календаря (для ввода только времени) - свойство showCalendar и свойство режима работы с данными в формате Time (свойство bindingMode).

Последний пример показывает комбинацию этих свойств для ввода времени.

Использование на форме#

Используется контрол, также используется событие valueChanged.

1
2
3
<DateTimeInput caption='Пример' bind='Example' id='DateTimeInputExample' format='dd.MM.yyyy HH:mm' 
        showTimePicker='true' bindingMode='date' width='100%' captionWidth='1' editorWidth='2' 
        valueChanged='DateTimeInputExample_valueChanged' />

1
2
3
4
5
6
DateTimeInputExample_valueChanged(s,e) {
        console.log(s,e)
        const date = e.args.date?.toLocaleDateString('ru-ru');
        const time = e.args.date?.toLocaleTimeString('ru-ru');
        this.services.dialog.info(`Выбрана дата ${ date } и время ${ time }`);
}

Выбор значения

Значение выбрано

См. также#