Как работать с компонентами TDatePicker и TTimePicker в Delphi?

Компоненты TDatePicker и TTimePiker в VCL появились относительно недавно — в Delphi 10.2 Tokyo и располагаются на странице компонентов Windows 10. Эти компоненты позволяют сделать в вашем приложении красивый выбор даты и времени, наподобие того как это делается в Android и iOS.

Основная информация по компоненту
Вкладка палитры компонентов		Windows 10
Исходник официального примера и документация		DocWiki

На форме демонстрационного приложения расположены сами компоненты TDatePicker и TTimePicker, а также дополнительные элементы управления, позволяющие изменять отдельные свойства новый компонентов Delphi 10.2 Tokyo.

Внешний вид демонстрационного приложения представлен на рисунке ниже:

Использование компонента TTimePicker

TTimePicker позволяет пользователю выбрать значение времени из выпадающего списка. Также компонент позволяет менять значения часов, минут, секунд и значений AM/PM по отдельности. Пользователь может менять выбор с помощью клавиш со стрелками на клавиатуре или же с помощью мыши. Кроме этого TTimePicker можно настроить, изменив формат времени, раскрывающийся список выбора, значение приращения минут и отображение кнопок «ОК» и «Отмена».

Свойства компонента TTimePicker

TTimePicker позволяет настроить следующие основные свойства:

• Свойства Color, HighlightColor, PopupColor, SelectionColor и SelectionFontColor позволяют вам установить собственную цветовую схему.
• Свойство Font позволяет вам настроить параметры шрифта.
• Свойство DropDownCount позволяет вам установить ряд параметров для отображения в раскрывающемся списке.
• Свойство MinuteIncrement позволяет настраивать пользовательские приращения минут для параметров, отображаемых в раскрывающемся списке.
• Свойство Time позволяет вам установить начальное время, которое вы хотите отобразить в элементе управления.
• Свойство TimeFormat позволяет вам установить формат, в котором вы хотите отображать время. Вы можете включить секунды (формат — «чч:мм:сс») или исключить часы (формат — «мм:сс»). Вы можете использовать отдельные буквы для часов и минут, если вы не хотите показывать начальный 0 для однозначных элементов. Добавьте AMPM в формат времени, чтобы использовать 12-часовой формат и включить селектор AM/PM в раскрывающийся список.

Использование компонента TDatePicker

TDatePicker работает аналогично компоненту TTimePicker, но позволяет выбрать из раскрывающегося списка дату (число, месяц, год).

Свойства компонента TDatePicker

TDatePicker позволяет настроить следующие основные свойства:

• Свойство Date позволяет вам установить начальную дату, которую вы хотите отобразить в элементе управления.
• Свойство DateFormat позволяет вам установить формат отображения даты. Вы можете настроить последовательность, в которой CalendarPicker будет отображать элементы (месяц/день/год).
• Свойство DropDownCount позволяет вам установить ряд параметров для отображения в раскрывающемся списке.
• Свойство MaxYear позволяет вам установить последний год.
• Свойство MinYear позволяет вам установить начальный год.
• Свойства Color, HighlightColor, PopupColor, SelectionColor и SelectionFontColor позволяют вам установить собственную цветовую схему.
• Свойство Font позволяет вам настроить параметры шрифта.

Демонстрационный пример

Демонстрационный пример показывает как изменять основные свойства компонентов TTimePicker и TDatePicker и результаты изменения этих свойств.

Исходный код демонстрационного примера представлен ниже:

procedure TDateTimePickersForm.spnDropDownCountClick(Sender: TObject; Button: TUDBtnType);
begin
  DatePicker1.DropDownCount := spnDropDownCount.Position;
  TimePicker1.DropDownCount := spnDropDownCount.Position;
end;
 
procedure TDateTimePickersForm.chkShowOkCancelClick(Sender: TObject);
begin
  DatePicker1.ShowOkCancel := chkShowOkCancel.Checked;
  TimePicker1.ShowOkCancel := chkShowOkCancel.Checked;
end;
 
procedure TDateTimePickersForm.cbxDateFormatsChange(Sender: TObject);
begin
  DatePicker1.DateFormat := cbxDateFormats.Text;
end;
 
procedure TDateTimePickersForm.cbxTimeFormatsChange(Sender: TObject);
begin
  TimePicker1.TimeFormat := cbxTimeFormats.Text;
end;
 
procedure TDateTimePickersForm.cbxMinuteIncrementsChange(Sender: TObject);
begin
  TimePicker1.MinuteIncrement := StrToIntDef(cbxMinuteIncrements.Text, 1);
end;
 
procedure TDateTimePickersForm.cbxColorChange(Sender: TObject);
begin
  DatePicker1.Color := cbxColor.Selected;
  TimePicker1.Color := cbxColor.Selected;
end;
 
procedure TDateTimePickersForm.cbxFontColorChange(Sender: TObject);
begin
  DatePicker1.Font.Color := cbxFontColor.Selected;
  TimePicker1.Font.Color := cbxFontColor.Selected;
end;
 
procedure TDateTimePickersForm.cbxHotColorChange(Sender: TObject);
begin
  DatePicker1.HotColor := cbxHotColor.Selected;
  TimePicker1.HotColor := cbxHotColor.Selected;
end;
 
procedure TDateTimePickersForm.cbxHighlightColorChange(Sender: TObject);
begin
  DatePicker1.HighlightColor := cbxHighlightColor.Selected;
  TimePicker1.HighlightColor := cbxHighlightColor.Selected;
end;
 
procedure TDateTimePickersForm.cbxPopupColorChange(Sender: TObject);
begin
  DatePicker1.PopupColor := cbxPopupColor.Selected;
  TimePicker1.PopupColor := cbxPopupColor.Selected;
end;
 
procedure TDateTimePickersForm.cbxSelectionColorChange(Sender: TObject);
begin
  DatePicker1.SelectionColor := cbxSelectionColor.Selected;
  TimePicker1.SelectionColor := cbxSelectionColor.Selected;
end;
 
procedure TDateTimePickersForm.cbxSelectionFontColorChange(Sender: TObject);
begin
  DatePicker1.SelectionFontColor := cbxSelectionFontColor.Selected;
  TimePicker1.SelectionFontColor := cbxSelectionFontColor.Selected;
end;

На рисунке ниже представлен пример работающего демонстрационного приложения с измененными свойствами компонентов TTimePicker и TDatePicker:

При подготовке статьи использовалась информация со следующих ресурсов:

1. Официальный репозиторий демонстрационных примеров Delphi на SourceForge
2. Документация по компоненту TTimePicker на сайте Embarcadero
3. Документация по компоненту TDatePicker на сайте Embarcadero
4. Информация по работе с компонентом TTimePicker на сайте Embarcadero
5. Информация по работе с компонентом TDatePicker на сайте Embarcadero