Class Index | File Index

Classes


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.

Class Summary
Constructor Attributes Constructor Name and Description
 
Field Summary
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 Summary
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
Class Detail
M.DatePickerView()
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

Documentation generated by JsDoc Toolkit 2.4.0 on Wed Jan 25 2012 20:41:09 GMT+0100 (MEZ)