Class sap.m.DateTimePickerModule: sap/m/DateTimePicker

extends DatePicker

This is a date input control with a calendar and a time selector as date time picker.

A date can be entered using a calendar or time selector that opens in a popup. Alternatively a value can be entered directly in the input field by typing it in. If a date is entered by typing it into the input field, it must fit the used date format and locale. (See sap.ui.core.format.DateFormat)

There are two options to provide a date for the DateTimePicker. You can put a date as a string to the property value or you can put a JavaScript Date object to the property dateValue. Only one of the properties should be used at one time, but they are synchronized internally. What property you should use depends on the use case of the application:

  • Use the value property if you want to bind the DateTimePicker to a model using the sap.ui.model.type.DateTime.
  • Use the value property if the date is provided as a string from the back end or inside the application (e.g. as ABAP type DATS field).
  • Use the dateValue property if the date is already provided as a JavaScript Date object or you want to work with a JavaScript Date object.

All formatting and parsing of dates to and from strings is done using the sap.ui.core.format.DateFormat, so please read the corresponding documentation if you need more information about this.

Supported format options are pattern-based on Unicode LDML Date Format notation. http://unicode.org/reports/tr35/#Date_Field_Symbol_Table

For example, if the valueFormat is "yyyy-MM-dd-HH-mm-ss", displayFormat is "MMM d, y, HH:mm:ss" and the used locale is English, a valid value string is "2015-07-30-10-30-15", which leads to an output of "Jul 30, 2015, 10:30:15".

If no placeholder is set to the DateTimePicker, the used displayFormat is shown as a placeholder. If another placeholder is needed, it must be set.

Internally the sap.ui.unified.Calendar is used, but it is only needed if the DateTimePicker is opened. This means that it is not needed for the initial rendering. If the sap.ui.unified library is not loaded before the DateTimePicker is opened, it will be loaded upon opening. This could lead to a waiting time before a DateTimePicker is opened the first time. To prevent this, applications using the DateTimePicker should also load the sap.ui.unified library.


Since: 1.38.0.
Constructor Summary
new sap.m.DateTimePicker(sId?, mSettings?)Constructor for a new DateTimePicker.
Fields borrowed from class sap.m.InputBase
bShowLabelAsPlaceholder
Events borrowed from class sap.m.DatePicker
change
Events borrowed from class sap.ui.core.Control
validateFieldGroup
Events borrowed from class sap.ui.base.ManagedObject
formatError, modelContextChange, parseError, validationError, validationSuccess
Method Summary
sap.m.DateTimePicker.extend(sClassName, oClassInfo?, FNMetaImpl?)Creates a new subclass of class sap.m.DateTimePicker with name sClassName and enriches it with the information contained in oClassInfo.
sap.m.DateTimePicker.getMetadata()Returns a metadata object for class sap.m.DateTimePicker.
getAccessibilityInfo()
Methods borrowed from class sap.m.DatePicker
addSpecialDate, destroySpecialDates, fireChange, getDateValue, getDisplayFormat, getDisplayFormatType, getLegend, getMaxDate, getMinDate, getSecondaryCalendarType, getSpecialDates, getValueFormat, indexOfSpecialDate, insertSpecialDate, removeAllSpecialDates, removeSpecialDate, setDateValue, setDisplayFormat, setDisplayFormatType, setLegend, setMaxDate, setMinDate, setSecondaryCalendarType, setValueFormat, setWidth
Methods borrowed from class sap.m.InputBase
addAriaLabelledBy, applyFocusInfo, attachChange, bindToInputEvent, bindValue, closeValueStateMessage, detachChange, fireChangeEvent, getAriaLabelledBy, getDomRefForValueStateMessage, getEditable, getEnabled, getFocusInfo, getName, getPlaceholder, getRequired, getSelectedText, getShowValueStateMessage, getTextAlign, getTextDirection, getValue, getValueState, getValueStateText, getWidth, onChange, onValueRevertedByEscape, openValueStateMessage, removeAllAriaLabelledBy, removeAriaLabelledBy, selectText, setEditable, setEnabled, setName, setPlaceholder, setRequired, setShowValueStateMessage, setTextAlign, setTextDirection, setValue, setValueState, setValueStateText, unbindValue, updateDomValue
Methods borrowed from class sap.ui.core.Control
addStyleClass, allowTextSelection, attachBrowserEvent, attachValidateFieldGroup, checkFieldGroupIds, clone, detachBrowserEvent, detachValidateFieldGroup, fireValidateFieldGroup, getBusy, getBusyIndicatorDelay, getControlsByFieldGroupId, getFieldGroupIds, getIdForLabel, getRenderer, getVisible, hasStyleClass, invalidate, isBusy, placeAt, removeStyleClass, rerender, setBusy, setBusyIndicatorDelay, setFieldGroupIds, setVisible, toggleStyleClass, triggerValidateFieldGroup
Methods borrowed from class sap.ui.core.Element
$, addCustomData, addDependent, addEventDelegate, bindElement, data, destroy, destroyCustomData, destroyDependents, destroyLayoutData, destroyTooltip, enhanceAccessibilityState, findElements, fireEvent, focus, getCustomData, getDependents, getDomRef, getElementBinding, getFocusDomRef, getInterface, getLayoutData, getMetadata, getTooltip, getTooltip_AsString, getTooltip_Text, indexOfCustomData, indexOfDependent, insertCustomData, insertDependent, prop, removeAllCustomData, removeAllDependents, removeCustomData, removeDependent, removeEventDelegate, setLayoutData, setTooltip, toString, unbindElement
Methods borrowed from class sap.ui.base.ManagedObject
addAggregation, addAssociation, applySettings, attachFormatError, attachModelContextChange, attachParseError, attachValidationError, attachValidationSuccess, bindAggregation, bindContext, bindObject, bindProperty, destroyAggregation, detachFormatError, detachModelContextChange, detachParseError, detachValidationError, detachValidationSuccess, findAggregatedObjects, fireFormatError, fireModelContextChange, fireParseError, fireValidationError, fireValidationSuccess, getAggregation, getAssociation, getBinding, getBindingContext, getBindingInfo, getBindingPath, getEventingParent, getId, getModel, getObjectBinding, getOriginInfo, getParent, getProperty, hasModel, indexOfAggregation, insertAggregation, isBound, isInvalidateSuppressed, isTreeBinding, removeAggregation, removeAllAggregation, removeAllAssociation, removeAssociation, setAggregation, setAssociation, setBindingContext, setModel, unbindAggregation, unbindContext, unbindObject, unbindProperty, validateAggregation, validateProperty
Methods borrowed from class sap.ui.base.EventProvider
attachEvent, attachEventOnce, detachEvent, hasListeners
Constructor Detail
new sap.m.DateTimePicker(sId?, mSettings?)
Constructor for a new DateTimePicker.

Accepts an object literal mSettings that defines initial property values, aggregated and associated objects as well as event handlers. See sap.ui.base.ManagedObject for a general description of the syntax of the settings object.

The supported settings are:

  • Aggregations

    In addition, all settings applicable to the base type sap.m.DatePicker can be used as well.

    Parameters:
    {string}sId? ID for the new control, generated automatically if no ID is given
    {object}mSettings? Initial settings for the new control
    Method Detail
    sap.m.DateTimePicker.extend(sClassName, oClassInfo?, FNMetaImpl?): function
    Creates a new subclass of class sap.m.DateTimePicker with name sClassName and enriches it with the information contained in oClassInfo.

    oClassInfo might contain the same kind of information as described in sap.m.DatePicker.extend.

    Parameters:
    {string}sClassName Name of the class being created
    {object}oClassInfo? Object literal with information about the class
    {function}FNMetaImpl? Constructor function for the metadata object; if not given, it defaults to sap.ui.core.ElementMetadata
    Returns:
    {function} Created class / constructor function
    sap.m.DateTimePicker.getMetadata(): sap.ui.base.Metadata
    Returns a metadata object for class sap.m.DateTimePicker.
    Returns:
    {sap.ui.base.Metadata} Metadata object describing this class
    getAccessibilityInfo()
    See:
    {sap.ui.core.Control#getAccessibilityInfo}