Class M.DatePickerView
Extends
M.View.
This defines the prototype for a date picker view. A date picker is a special view, that can
be called out of a controller. It is shown as a date picker popup, based on the mobiscroll
library. You can either connect a date picker with an existing view and automatically pass
the selected date to the source's value property, or you can simply use the date picker to
select a date, return it to the controller (respectively the callback) and handle the date
by yourself.
Defined in: date_picker.js.
Constructor Attributes | Constructor Name and Description |
---|---|
Field Attributes | Field Name and Description |
---|---|
This property can be used to specify several callbacks for the date picker view.
|
|
This property can be used to specify the label of the date picker's cancel button.
|
|
This property can be used to specify the label of the date picker's cancel button.
|
|
This property can be used to customize the date format of the date picker.
|
|
This property can be used to customize the date format of the date picker if it is associated
with a text input with the type 'month'.
|
|
This property determines the order and formating of the date scrollers.
|
|
This property determines the order and formating of the date scrollers if it is associated
with an input field of type 'month'.
|
|
This property specified the label shown above of the 'day' scroller.
|
|
This property specifies a list of full day names.
|
|
This property specifies a list of short day names.
|
|
This property can be used to specify the last year of the 'year' scroller.
|
|
This property specified the label shown above of the 'hours' scroller.
|
|
This property can be used to specify the initial date for the date picker.
|
|
This property specified the label shown above of the 'minutes' scroller.
|
|
This property specified the label shown above of the 'month' scroller.
|
|
This property specifies a list of full month names.
|
|
This property specifies a list of short month names.
|
|
This property can be used to activate the seconds wheel on a time/date-time picker.
|
|
You can use this property to enable or disable the AM/PM scroller.
|
|
This property can be used to specify whether to show scrollers for picking a date or not.
|
|
This property can be used to specify whether or not to show labels above of the scrollers.
|
|
This property can be used to specify whether to show scrollers for picking a time or not.
|
|
This property is used to link the date picker to a source.
|
|
This property can be used to specify the first year of the 'year' scroller.
|
|
This property can be used to specify the steps between hours in the time / date-time picker.
|
|
This property can be used to specify the steps between minutes in the time / date-time picker.
|
|
This property can be used to specify the steps between seconds in the time / date-time picker.
|
|
This property can be used to customize the time format of the date picker.
|
|
The type of this object.
|
|
This property can be used to determine whether to use the data source's value as initial date
or not.
|
|
This property specified the label shown above of the 'year' scroller.
|
- Fields borrowed from class M.View:
- childViews, computedValue, contentBinding, contentBindingReverse, cssClass, cssClassOnError, cssClassOnInit, cssStyle, events, hasFocus, html, id, isInline, isView, modelId, parentView, recommendedEvents, triggerActionOnChange, triggerActionOnEnter, triggerActionOnKeyUp, value
Method Attributes | Method Name and Description |
---|---|
beforeShow(source, scroller)
This method is used internally to handle the 'beforeShow' event.
|
|
onClose(value, scroller)
|
|
onSelect(value)
|
|
show(obj)
This method is the only important method of a date picker view for 'the outside world'.
|
- Methods borrowed from class M.View:
- addCssClass, attachToObservable, clearHtml, clearValue, clearValues, computeValue, contentDidChange, delegateValueUpdate, design, getChildViewsAsArray, getIds, getValue, getValues, gotFocus, lostFocus, nl2br, registerEvents, removeCssClass, removeCssProperty, renderUpdate, secure, setCssProperty, setValueFromDOM, style, tab2space, theme, themeChildViews
- Methods borrowed from class M.Object:
- bindToCaller, create, destroy, extend, get, include, set
Field Detail
{Object}
callbacks
This property can be used to specify several callbacks for the date picker view. There are
three types of callbacks available:
- before
This callback gets called, right before the date picker is shown. It passes along two
parameters:
- value -> The initial date of the date picker, formatted as a string
- date -> The initial date of the date picker as d8 object
- confirm
This callback gets called, when a selected date was confirmed. It passes along two
parameters:
- value -> The selected date of the date picker, formatted as a string
- date -> The selected date of the date picker as d8 object
- cancel
This callback gets called, when the cancel button is hit. It doesn't pass any
parameters.
Setting up one of those callbacks works the same as with other controls of The-M-Project. You
simply have to specify an object containing a target function, e.g.:
callbacks: {
confirm: {
target: this,
action: 'dateSelected'
},
cancel: {
action: function() {
// do something
}
}
}
{String}
cancelButtonValue
This property can be used to specify the label of the date picker's cancel button. By default
it shows 'Cancel'.
{String}
confirmButtonValue
This property can be used to specify the label of the date picker's cancel button. By default
it shows 'Ok'.
{String}
dateFormat
This property can be used to customize the date format of the date picker. This is important
if you use the date picker on a valid source since the date picker will then automatically
push the selected date/datetime to the 'value' property of the source - based on this format.
The possible keys:
- m -> month (without leading zero)
- mm -> month (two-digit)
- M -> month name (short)
- MM -> month name (long)
- d -> day (without leading zero)
- d -> day (two digit)
- D -> day name (short)
- DD -> day name (long)
- y -> year (two digit)
- yy -> year (four digit)
{String}
dateFormatMonthOnly
This property can be used to customize the date format of the date picker if it is associated
with a text input with the type 'month'. It works the same as the dateFormat property.
{String}
dateOrder
This property determines the order and formating of the date scrollers. The following keys
are possible:
- m -> month (without leading zero)
- mm -> month (two-digit)
- M -> month name (short)
- MM -> month name (long)
- d -> day (without leading zero)
- d -> day (two digit)
- y -> year (two digit)
- yy -> year (four digit)
By default, we use this format: Mddyy
{String}
dateOrderMonthOnly
This property determines the order and formating of the date scrollers if it is associated
with an input field of type 'month'. It works the same as the dateOrder property.
By default, we use this format: MMyy
{String}
dayLabel
This property specified the label shown above of the 'day' scroller.
Note: This label is only shown if the 'showLabels' property is set to YES.
{Array}
dayNames
This property specifies a list of full day names.
{Array}
dayNamesShort
This property specifies a list of short day names.
{Number}
endYear
This property can be used to specify the last year of the 'year' scroller. By default,
this will be set to 20 years after the current year.
{String}
hoursLabel
This property specified the label shown above of the 'hours' scroller.
Note: This label is only shown if the 'showLabels' property is set to YES.
{Object|String}
initialDate
This property can be used to specify the initial date for the date picker. If you use the
date picker without a source, this date is always picked as the initial date. If nothing is
specified, the current date will be displayed.
If you use the date picker with a valid source, the initial date is picked as long as there
is no valid date available by the source. Once a date was selected and assigned to the source,
this is taken as initial date the next time the date picker is opened.
{String}
minutesLabel
This property specified the label shown above of the 'minutes' scroller.
Note: This label is only shown if the 'showLabels' property is set to YES.
{String}
monthLabel
This property specified the label shown above of the 'month' scroller.
Note: This label is only shown if the 'showLabels' property is set to YES.
{Array}
monthNames
This property specifies a list of full month names.
{Array}
monthNamesShort
This property specifies a list of short month names.
{Boolean}
seconds
This property can be used to activate the seconds wheel on a time/date-time picker.
{Boolean}
showAmPm
You can use this property to enable or disable the AM/PM scroller. If set to NO, the
date picker will use the 24h format.
{Boolean}
showDatePicker
This property can be used to specify whether to show scrollers for picking a date or not.
Note: If both this and the 'showTimePicker' property are set to NO, no date picker will
be shown!
{Boolean}
showLabels
This property can be used to specify whether or not to show labels above of the scrollers.
If set to YES, the labels specified with the '...Label' properties are displayed above of
the corresponding scroller.
{Boolean}
showTimePicker
This property can be used to specify whether to show scrollers for picking a time or not.
Note: If both this and the 'showDatePicker' property are set to NO, no date picker will
be shown!
{String|Object}
source
This property is used to link the date picker to a source. You can either pass the DOM id of
the corresponding source or the javascript object itself. Linking the date picker directly
to a source results in automatic value updates of this source.
Note: Valid sources need to provide a setValue() method.
If you do not pass a source, the date picker isn't linked to any view. It simply returns the
selected value/date to given callbacks. So you can call the date picker out of a controller
and handle the selected date all by yourself.
{Number}
startYear
This property can be used to specify the first year of the 'year' scroller. By default,
this will be set to 20 years before the current year.
{Number}
stepHour
This property can be used to specify the steps between hours in the time / date-time picker.
{Number}
stepMinute
This property can be used to specify the steps between minutes in the time / date-time picker.
{Number}
stepSecond
This property can be used to specify the steps between seconds in the time / date-time picker.
{String}
timeFormat
This property can be used to customize the time format of the date picker. This is important
if you use the date picker on a valid source since the date picker will then automatically
push the selected time/datetime to the 'value' property of the source - based on this format.
The possible keys:
- h -> hours (without leading zero, 12h format)
- hh -> hours (two-digit, 12h format)
- H -> hours (without leading zero, 24h format)
- HH -> hours (two-digit, 24h format)
- i -> minutes (without leading zero)
- ii -> minutes (two-digit)
- A -> AM/PM
{String}
type
The type of this object.
{Boolean}
useSourceDateAsInitialDate
This property can be used to determine whether to use the data source's value as initial date
or not. If there is no source specified, this property is irrelevant.
Note: If there is a source specified and this property is set to NO, the 'initialDate' property
will be used anyway if there is no date value available for the source!
{String}
yearLabel
This property specified the label shown above of the 'year' scroller.
Note: This label is only shown if the 'showLabels' property is set to YES.
Method Detail
beforeShow(source, scroller)
This method is used internally to handle the 'beforeShow' event. It does some adjustments to the
rendered scroller by mobiscroll and finally calls the application's 'before' callback, if it is
defined.
- Parameters:
- source
- scroller
onClose(value, scroller)
- Parameters:
- value
- scroller
onSelect(value)
- Parameters:
- value
show(obj)
This method is the only important method of a date picker view for 'the outside world'. From within
an application, simply call this method and pass along an object, containing all the properties
you want to set, different from default.
A sample call:
M.DatePickerView.show({
source: M.ViewManager.getView('mainPage', 'myTextField')
initialDate: D8.create('30.04.1985 10:30'),
callbacks: {
confirm: {
target: this,
action: function(value, date) {
// do something...
}
}
}
});
- Parameters:
- obj