Mojo.Widget.DatePicker
Namespace Detail
Overview
The DatePicker offers selection of the month, day and year. It is one of the simple picker widgets which present their choices as a linear sequence of values that wraps around; when you scroll to the end of the sequence, it simply continues back at the beginning. The Date and Time pickers use the JavaScript Date object to represent the chosen date in their data model.
Declaration
<div x-mojo-element="DatePicker" id="datepickerId" class="datepickerClass" name="datepickerName"></div>
Properties | Required | Value | Description |
---|---|---|---|
x-mojo-element | Required | DatePicker | Declares the widget as type 'DatePicker'. |
id | Required | Any String | Identifies the widget element for use when instantiating or rendering. |
class | Optional | Any String | There is no default class for DatePicker, but you can assign one if you want to apply custom styling. |
name | Optional | Any String | Adds a unique name to the DatePicker widget; generally used in templates. |
Events
this.controller.listen(this.controller.get("datepickerId"),'mojo-propertyChange', this.handleUpdate);
Event Type | Value | Event Handling |
---|---|---|
Mojo.Event.propertyChange | event.value | Respond to DatePicker value change or model.time |
Instantiation
var todayDate = new Date(); this.controller.setupWidget("datepickerId", this.attributes = { label: 'Date', modelProperty: 'time' // one may override the default modelProperty // so as to share a Date object with a time picker }, this.model = { time: todayDate } );
Attribute Properties
Attribute Property | Type | Required | Default | Description |
---|---|---|---|---|
label | String | Optional | 'Date' | Label displayed for the widget controls. |
labelPlacement | String | Optional | Mojo.Widget.labelPlacementLeft |
Mojo.Widget.labelPlacementRight: places label on right, value on left. Mojo.Widget.labelPlacementLeft: places label on left, value on right. |
modelProperty | String | Optional | date | Model property name for date object. |
month | Boolean | Optional | true | Specifies whether or not to include the month in your date picker; default is true. |
day | Boolean | Optional | true | Specifies whether or not to include the day in your date picker; default is true. |
year | Boolean | Optional | true | Specifies whether or not to include the year in your date picker; default is true. |
maxYear | Integer | Optional | 2099 | Specifies max year in year capsule if enabled. |
minYear | Integer | Optional | 1900 | Specifies min year in year capsule if enabled. |
Model Properties
Model Property | Type | Required | Default | Description |
---|---|---|---|---|
date | Date Object | Required | null | Date object to set initial widget value and updated value after user selection. |
Methods
The DatePicker widget has no methods.