# 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.