Enumerations

Name Values
This class exposes no enumerations.

Constants

Name Type Value
MinViewDays Integer 0
MinViewMonth Integer 1
MinViewYears Integer 2
PositionBottomLeft String “top left”
PositionBottomRight String “top right”
PositionTopLeft String “bottom left”
PositionTopRight String “bottom right”
ViewMonth Integer 0
ViewYear Integer 1
ViewDecade Integer 2

Events

Definition Description
MonthChange( theMonth as Integer ) Fired when the user navigates to a different month in the display.
PickerCleared() Fired when the user clears the selection.
PickerHidden() Fired when the picker is hidden, either by user selection or cancellation.
PickerShown() Fired when the picker is shown by user interaction.
TextChanged( newText as String ) Fired when datepicker field loses focus. If ForceParse = False, newText will contain the invalid text the user attempted to enter as a date value. At that point, it is up to the developer to properly handle this text as you see fit and update the Value property.
ValueChange() Fired when the user either makes a new selection from the popup or enters a valid date in the field.
YearChange( theYear as Integer ) Fired when the user navigates to a different Year in the display.

Methods

Definition Description
ClearValue() Resets the date value to null in the picker.
DisableDate( theDate as Date ) Disables selection of the specified date.
EnableDate( theDate as Date ) Enabled selection of a previously disabled date.
HidePicker() Hides the picker popup.
SetDayEnabled( theDay as Integer, theValue as Boolean ) Allows for the enabling or disabling of a specific day of the week. theDay is a zero-based index of the day of the weekday, with 0 representing Sunday.
SetDayHighlighted( theValue as Boolean, ParamArray theDays as Integer ) Highlights the days specified by theDays, which should be a list of Integers with 0 representing Sunday.
ShowPicker() Shows the picker.

Properties

Name Type Default Value Description
AutoClose Boolean True If True, when the user makes a selection the picker is hidden.
AvailableLanguages() Array of String Null An array containing the locale IDs of the languages supported by the picker.
CalendarWeeks Boolean False When True, will display the week number to the left of the calendar rows.
Day0Enabled Boolean True When False, users will be unable to select days occurring on a Sunday.
Day0Highlighted Boolean False When True, this day of the week will be highlighted.
Day1Enabled Boolean True When False, users will be unable to select days occurring on a Monday.
Day1Highlighted Boolean False When True, this day of the week will be highlighted.
Day2Enabled Boolean True When False, users will be unable to select days occurring on a Tuesday.
Day2Highlighted Boolean False When True, this day of the week will be highlighted.
Day3Enabled Boolean True When False, users will be unable to select days occurring on a Wednesday.
Day3Highlighted Boolean False When True, this day of the week will be highlighted.
Day4Enabled Boolean True When False, users will be unable to select days occurring on a Thursday.
Day4Highlighted Boolean False When True, this day of the week will be highlighted.
Day5Enabled Boolean True When False, users will be unable to select days occurring on a Friday.
Day5Highlighted Boolean False When True, this day of the week will be highlighted.
Day6Enabled Boolean True When False, users will be unable to select days occurring on a Saturday.
Day6Highlighted Boolean False When True, this day of the week will be highlighted.
DefaultViewDate Date Today Date to view when initially opening the calendar. The internal value of the date remains today as default, but when the datepicker is first opened the calendar will open to defaultViewDate rather than today. If this option is not used, “today” remains the default view date.
DisableKeyboard Boolean False If True, no keyboard will show on mobile devices.
EndDate Date End of Time The latest date that may be selected; all later dates will be disabled.
ForceParse Boolean True Forces the user to conform to the expected date format. If False, the TextChanged event will fire with their text entry, and the field will not be cleared.
Format String DD, MM dd, yyyy Determines how dates are shown and parsed when the user selects or enters a date in the field.
d, dd: Numeric date, no leading zero and leading zero, respectively. Eg, 5, 05.
D, DD: Abbreviated and full weekday names, respectively. Eg, Mon, Monday.
m, mm: Numeric month, no leading zero and leading zero, respectively. Eg, 7, 07.
M, MM: Abbreviated and full month names, respectively. Eg, Jan, January
yy, yyyy: 2- and 4-digit years, respectively. Eg, 12, 2012.
KeyboardNavigation Boolean True Allows the user to navigate the picker using the arrow keys on their keyboard.
Language String “en” The IETF code (eg “en” for English, “pt-BR” for Brazilian Portuguese) of the language to use for month and day names. See AvailableLanguages() Property, or scripts/datepicker/langs directory.
MinView Integer MinViewDays The minimum view allowed for display in the selection picker. See MinView constants.
Orientation String “auto” A space-separated string consisting of one or two of “left” or “right”, “top” or “bottom”, and “auto” (may be omitted); for example, “top left”, “bottom” (horizontal orientation will default to “auto”), “right” (vertical orientation will default to “auto”), “auto top”. Allows for fixed placement of the picker popup.

“orientation” refers to the location of the picker popup’s “anchor”; you can also think of it as the location of the trigger element (input, component, etc) relative to the picker.

“auto” triggers “smart orientation” of the picker. Horizontal orientation will default to “left” and left offset will be tweaked to keep the picker inside the browser viewport; vertical orientation will simply choose “top” or “bottom”, whichever will show more of the picker in the viewport. See Position constants.
ReadOnly Boolean False If True, the textfield of the DatePicker will be disabled, but selection can still be made from the picker.
ShowOnFocus Boolean True If False, the picker will only be shown by calling the ShowPicker() method.
StartDate Date Beginning of Time The earliest date that may be selected; all earlier dates will be disabled.
StylePicker WebStyle Nil WebStyle applied to the picker popup.
StylePickerDayHover WebStyle Nil WebStyle applied to the date currently being hovered by the user's mouse in the picker popup.
StylePickerToday WebStyle Nil WebStyle applied to the current date in the picker popup.
TodayButton Boolean False If True, will show a “Today” button in the picker allowing users to quickly switch the view to display the current date.
TodayHighlight Boolean True If True, will signify the current date in the picker view using a background color.
ToggleSelect Boolean False If True, selecting the currently active date in the datepicker will unset the respective date.
Value Date Nil The currently selected value.
WeekStart Integer 0 The weekday to use as the starting date of the picker display, zero-based starting with Sunday.

Notes

ForceParse = True

When ForceParse = True and the user types in the textbox, the underlying library will automatically parse the date based on the value supplied in the Format property, then fire the ValueChange event after the Value property is updated. In this event, you can access the Value property to retrieve the user-entered date. In this scenario there is no need for a TextChanged event as valid inputs will trigger the ValueChange event and update the Value property. TextChanged is disabled as it is unnecessary, the DatePicker handles the input appropriately.

ForceParse = False

The class does not automatically parse the text entered, and you are expected to do that in the TextChanged event, which has a parameter of newText as String. Using this parameter, you are expected to parse the date however you wish and update the Value of the control yourself. The class does not track the text within the textbox in a property because it should be a textual representation of the Date object stored in the Value property. ValueChange is disabled as it would only fire after you have just set the Value, therefore know that the value has changed.

Examples

Mobile Keyboard

For mobile devices, you can automatically set whether the keyboard will be displayed by using a condition like this to set the appropriate option:

Sub Shown() Handles Shown
  select case Session.Browser
  case WebSession.BrowserType.Android, _
    WebSession.BrowserType.Blackberry, _
    WebSession.BrowserType.OperaMini, _
    WebSession.BrowserType.SafariMobile
    me.DisableTouchKeyboard = True
  case else
    me.DisableTouchKeyboard = False
  end select
End Sub

As of R27, this property is renamed to DisableKeyboard.

Changes to this Page

Date Edit Editor
07/25/2017 Added Xojo Docs Links Anthony G. Cyphers
07/24/2017 Document Created Anthony G. Cyphers