-->
The DateControl is a REALbasic control plugin to create a Date-picker. The Control is displayed according to control panel date settings, or in exclusive mm.dd.yyyy, exclusive dd.mm.yyyy. This is a demo on the kartik datecontrol DateControl widget. You can configure the various options for the widget. Not seeing the updated content on this page!
A control that the user can click or tap to specify a date.
Description
If you add a Date Picker control instead of a Text input control, you help ensure that the user specifies a date in the correct format.
Key properties
DefaultDate – The initial value of a date control unless the user changes it.
SelectedDate – The date currently selected in a date control. This date is represented in local time.
Format – The text format in which the control shows the date and the user specifies the date. You can set this property to ShortDate (default) or LongDate to format dates based on the Language property of this control. You can also set this property to an expression, such as yyyy/mm/dd if you want the same format regardless of language. For example:
- The control shows 12/31/2017 if the user clicks or taps the last day of 2017, the Format property is set to ShortDate, and the Language property is set to en-us.
- The control shows dimanche 31 decembre 2017 if the user clicks or taps the last day of 2017, the Format property is set to LongDate, and the Language property is set to fr-fr.
Language – Determines the language that's used to format dates, including names of months. If this property isn't specified, the user's device setting determines the language. Supported values include 'EN-us' and 'FR'.
Additional properties
AccessibleLabel – Label for screen readers.
BorderColor – The color of a control's border.
BorderStyle – Whether a control's border is Solid, Dashed, Dotted, or None.
BorderThickness – The thickness of a control's border.
Color – The color of text in a control.
DateTimeZone – Whether to display the date in UTC or the user's Local time.
DisplayMode – Whether the control allows user input (Edit), only displays data (View), or is disabled (Disabled).
DisabledBorderColor – The color of a control's border if the control's DisplayMode property is set to Disabled.
DisabledColor – The color of text in a control if its DisplayMode property is set to Disabled.
DisabledFill – The background color of a control if its DisplayMode property is set to Disabled.
EndYear – The latest year to which the user can set value of a date-picker control.
Fill – The background color of a control.
FocusedBorderColor – The color of a control's border when the control is focused.
FocusedBorderThickness – The thickness of a control's border when the control is focused.
Font – The name of the family of fonts in which text appears.
FontWeight – The weight of the text in a control: Bold, Semibold, Normal, or Lighter.
Height – The distance between a control's top and bottom edges.
IconFill – The foreground color of a the date picker icon.
IconBackground – The background color of a the date picker icon.
InputTextPlaceholder – Instructional text that appears if no dates are entered.
IsEditable – Whether the datepicker text can be edited. If false, the date can only be changed by using the calendar.
Italic – Whether the text in a control is italic.
OnSelect – How the app responds when the user taps or clicks a control.
OnChange – How the app responds when the user changes the value of a control.
Difference between OnChange and OnSelect: OnSelect and OnChange trigger on the same user action if the user's click causes the change. In this case, OnSelect triggers before OnChange.
PaddingBottom – The distance between text in a control and the bottom edge of that control.
PaddingLeft – The distance between text in a control and the left edge of that control.
PaddingRight – The distance between text in a control and the right edge of that control.
PaddingTop – The distance between text in a control and the top edge of that control.
Size – The font size of the text that appears on a control.
StartOfWeek – The day of the week to display in the first day column of the date-picker control.
StartYear – The earliest year to which the user can set the value of a date-picker control.
TabIndex – Keyboard navigation order in relation to other controls.
Visible – Whether a control appears or is hidden.
Width – The distance between a control's left and right edges.
X – The distance between the left edge of a control and the left edge of its parent container (screen if no parent container).
Y – The distance between the top edge of a control and the top edge of the parent container (screen if no parent container).
Related functions
Year( DateTimeValue )
Example
Add a Date Picker control, and name it Deadline.
Don't know how to add, name, and configure a control?
Add a Label control, and set its Text property to this formula:
DateDiff(Today(), Deadline.SelectedDate) & ' days to go!'Want more information about the DateDiff function or other functions?
Press F5, choose a date in Deadline, and then click or tap OK.
The Label control shows the number of days between today and the date that you chose.
To return to the default workspace, press Esc.
Date Control Excel
Accessibility guidelines
Color contrast
- Standard color contrast requirements apply.
Screen reader support
- AccessibleLabel must be present.
Keyboard support
- TabIndex must be zero or greater so that keyboard users can navigate to it.
- Focus indicators must be clearly visible. Use FocusedBorderColor and FocusedBorderThickness to achieve this.
Tip
When the calendar is open, press Page up and Page down to navigate between months and Shift+Page up and Shift+Page down to navigate between years.
Note
Can you tell us about your documentation language preferences? Take a short survey.
The survey will take about seven minutes. No personal data is collected (privacy statement).
-->A control that the user can click or tap to specify a date.
Description
If you add a Date Picker control instead of a Text input control, you help ensure that the user specifies a date in the correct format.
Key properties
DefaultDate – The initial value of a date control unless the user changes it.
SelectedDate – The date currently selected in a date control. This date is represented in local time.
Format – The text format in which the control shows the date and the user specifies the date. You can set this property to ShortDate (default) or LongDate to format dates based on the Language property of this control. You can also set this property to an expression, such as yyyy/mm/dd if you want the same format regardless of language. For example:
- The control shows 12/31/2017 if the user clicks or taps the last day of 2017, the Format property is set to ShortDate, and the Language property is set to en-us.
- The control shows dimanche 31 decembre 2017 if the user clicks or taps the last day of 2017, the Format property is set to LongDate, and the Language property is set to fr-fr.
Language – Determines the language that's used to format dates, including names of months. If this property isn't specified, the user's device setting determines the language. Supported values include 'EN-us' and 'FR'.
Additional properties
AccessibleLabel – Label for screen readers.
BorderColor – The color of a control's border.
BorderStyle – Whether a control's border is Solid, Dashed, Dotted, or None.
BorderThickness – The thickness of a control's border.
Color – The color of text in a control.
DateTimeZone – Whether to display the date in UTC or the user's Local time.
DisplayMode – Whether the control allows user input (Edit), only displays data (View), or is disabled (Disabled).
DisabledBorderColor – The color of a control's border if the control's DisplayMode property is set to Disabled.
DisabledColor – The color of text in a control if its DisplayMode property is set to Disabled.
DisabledFill – The background color of a control if its DisplayMode property is set to Disabled.
Cached
EndYear – The latest year to which the user can set value of a date-picker control.
Fill – The background color of a control.
FocusedBorderColor – The color of a control's border when the control is focused.
FocusedBorderThickness – The thickness of a control's border when the control is focused.
Font – The name of the family of fonts in which text appears.
FontWeight – The weight of the text in a control: Bold, Semibold, Normal, or Lighter.
Height – The distance between a control's top and bottom edges.
IconFill – The foreground color of a the date picker icon.
IconBackground – The background color of a the date picker icon.
InputTextPlaceholder – Instructional text that appears if no dates are entered.
IsEditable – Whether the datepicker text can be edited. If false, the date can only be changed by using the calendar.
Italic – Whether the text in a control is italic.
OnSelect – How the app responds when the user taps or clicks a control.
OnChange – How the app responds when the user changes the value of a control.
Difference between OnChange and OnSelect: OnSelect and OnChange trigger on the same user action if the user's click causes the change. In this case, OnSelect triggers before OnChange.
PaddingBottom – The distance between text in a control and the bottom edge of that control.
PaddingLeft – The distance between text in a control and the left edge of that control.
PaddingRight – The distance between text in a control and the right edge of that control.
PaddingTop – The distance between text in a control and the top edge of that control.
Size – The font size of the text that appears on a control.
StartOfWeek – The day of the week to display in the first day column of the date-picker control.
StartYear – The earliest year to which the user can set the value of a date-picker control.
TabIndex – Keyboard navigation order in relation to other controls.
Visible – Whether a control appears or is hidden.
Width – The distance between a control's left and right edges.
X – The distance between the left edge of a control and the left edge of its parent container (screen if no parent container).
Y – The distance between the top edge of a control and the top edge of the parent container (screen if no parent container).
Related functions
Year( DateTimeValue )
Example
Add a Date Picker control, and name it Deadline.
Don't know how to add, name, and configure a control?
Add a Label control, and set its Text property to this formula:
DateDiff(Today(), Deadline.SelectedDate) & ' days to go!'Want more information about the DateDiff function or other functions?
Press F5, choose a date in Deadline, and then click or tap OK.
The Label control shows the number of days between today and the date that you chose.
To return to the default workspace, press Esc.
Accessibility guidelines
Color contrast
- Standard color contrast requirements apply.
Screen reader support
- AccessibleLabel must be present.
Keyboard support
- TabIndex must be zero or greater so that keyboard users can navigate to it.
- Focus indicators must be clearly visible. Use FocusedBorderColor and FocusedBorderThickness to achieve this.
Tip
When the calendar is open, press Page up and Page down to navigate between months and Shift+Page up and Shift+Page down to navigate between years.
Note
Can you tell us about your documentation language preferences? Take a short survey.
The survey will take about seven minutes. No personal data is collected (privacy statement).