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.