# GraffitiDateTimePickerRange
Class Inherits GraffitiWebUIControl
## About
Advanced chronological selector that combines both a date picker and time picker in to a single component. It has a wide variety of features including complete color customization, and views for time, month, year, and decade.
## Compatibility
### Framework API Version
| 1.0 | 2.0 |
| :---: | :---: |
| True | True |
### Web
| 32-Bit | 64-Bit |
| :---: | :---: |
| True | True |
## Enumerations
| Name | Value | Description |
| --- | :---: | --- |
| Locales | EN <br > DE <br > NL <br > RO <br > RU <br > ES <br > IT | Supported languages and locales. |
| States | Unvalidated <br > Valid <br > Invalid | Supported validation states. |
| ToolbarPositions | Bottom <br > Top | Support toolbar locations within the popup. |
| Views | Calendar <br > Clock <br > Months <br > Years <br > Decades | Supported views. |
## Event Definitions
| Name | Parameters | Return Type | Description |
| --- | :---: | :---: | --- |
| FocusLost | (None) | (None) | Raised when the user has moved focus from the input field. |
| FocusReceived | (None) | (None) | Raised when the input field has received focus. |
| MouseEnter | (None) | (None) | Raised when the mouse has entered the input field's display area. |
| MouseExit | (None) | (None) | Raised when the mouse has been moved to outside the input field's display area. |
| Open | (None) | (None) | (None) |
| PickerHidden | (None) | (None) | Raised when the picker popup has been hidden. |
| PickerShown | (None) | (None) | Raised when the picker popup has been shown. |
| Shown | (None) | (None) | (None) |
| ValueChanged | (None) | (None) | Raised when the user has changed the current value via the picker. |
| ViewChanged | (None) | (None) | Raised when the user has changed the current view via the picker. |
## Methods
| Name | Parameters | Return Type | Description |
| --- | :---: | :---: | --- |
| DisableDate | date as DateTime | (None) | Disables selection of the specified date. |
| DisableDayOfWeek | day as Integer | (None) | Disables the specified day of the week. Expects zero-based index beginning with Sunday. |
| DisableHour | hour as Integer | (None) | Disables the specified hour. |
| EnableDate | date as DateTime | (None) | Enables selection of a previously disabled date. |
| EnableDayOfWeek | day as Integer | (None) | Enables selection of a previously disabled day. |
| EnableHour | hour as Integer | (None) | Enables selection of a previously disabled hour. |
| PickerHide | (None) | (None) | Hides the picker popup. |
| PickerShow | (None) | (None) | Shows the picker popup. |
| PickerToggle | (None) | (None) | Toggles the picker popup's visibility. |
## Properties
| Name | Type | Default Value | Description |
| --- | :---: | :---: | --- |
| CanViewCalendar | Boolean | (None) | When False, the user will not be allowed to enter this view by navigating in the picker popup's header. |
| CanViewClock | Boolean | (None) | When False, the clock switch icon will not be displayed in the toolbar, barring the user from editing the time. |
| CanViewDate | Boolean | (None) | When False, the date switch icon will not be displayed in the toolbar, barring the user from exiting the time picker. |
| CanViewDecades | Boolean | (None) | When False, the user will not be allowed to enter this view by navigating in the picker popup's header. |
| CanViewMonth | Boolean | (None) | When False, the user will not be allowed to enter this view by navigating in the picker popup's header. |
| CanViewYear | Boolean | (None) | When False, the user will not be allowed to enter this view by navigating in the picker popup's header. |
| Enabled | Boolean | (None) | (None) |
| Format | String | (None) | Format applied to values in the picker's input area. See Moment.js Docs |
| HasButtonClear | Boolean | (None) | When False, the clear button will not appear in the picker popup toolbar. |
| HasButtonClose | Boolean | (None) | When False, the close button will not appear in the picker popup toolbar. |
| HasButtonToday | Boolean | (None) | When False, the today button will not appear in the picker popup toolbar. |
| HasTimeHours | Boolean | (None) | Controls visibility of this component of the selector. |
| HasTimeMeridiem | Boolean | (None) | Controls visibility of this component of the selector. |
| HasTimeMinutes | Boolean | (None) | Controls visibility of this component of the selector. |
| HasTimeSeconds | Boolean | (None) | Controls visibility of this component of the selector. |
| HasWeekNumbers | Boolean | (None) | When True, week numbers will be displayed to the right of each week in the calendar day chooser. |
| IconButton | String | (None) | Icon to display within the button. |
| IconClear | String | (None) | FontAwesome 5 icon to display at this position. |
| IconClose | String | (None) | FontAwesome 5 icon to display at this position. |
| IconDate | String | (None) | FontAwesome 5 icon to display at this position. |
| IconDown | String | (None) | FontAwesome 5 icon to display at this position. |
| IconNext | String | (None) | FontAwesome 5 icon to display at this position. |
| IconPrevious | String | (None) | FontAwesome 5 icon to display at this position. |
| IconTime | String | (None) | FontAwesome 5 icon to display at this position. |
| IconToday | String | (None) | FontAwesome 5 icon to display at this position. |
| IconUp | String | (None) | FontAwesome 5 icon to display at this position. |
| IndicatorButton | WebUIControl.Indicators | (None) | Bootstrap indicator applied to the button. |
| IndicatorField | WebUIControl.Indicators | (None) | Bootstrap indicator to apply to the component's field. |
| Locale | Locales | (None) | Pre-built locale to use for display text. |
| Maximum | DateTime | (None) | Maximum date/time that can be selected. |
| Minimum | DateTime | (None) | Minimum date/time that can be selected. |
| Separator | String | (None) | Text used to separate values. |
| ShowSideBySide | Boolean | (None) | When True, the date and time pickers will be shown side-by-side in the popup. |
| State | States | (None) | Validation state. |
| StyleButton | GraffitiStyle | (None) | GraffitiStyle applied to the button within the control's primary UI. |
| StyleField | GraffitiStyle | (None) | GraffitiStyle applied to the field within the control's primary UI. |
| ToolbarPlacement | ToolbarPositions | (None) | Location of the toolbar in the picker's popup. |
| ValueEnd | DateTime | (None) | Current value of the component. |
| ValueStart | DateTime | (None) | Current value of the component. |
| View | Views | (None) | Current view of the component. |
| ViewValue | DateTime | (None) | Current view. |
## Examples
### Closing on Selection
If you wish to close the picker on selection of the end date in the range, you can use the following code to accomplish this in the ValueChanged event:
```wp-block-code
if me.ValueEnd <> nil then me.PickerHide
```
