UI Widgets DateBox

A date box widget.

Type: Object

The dxDateBox widget displays the date and time value in a specified format, and enables a user to pick the required date/time value. The current widget value is specified from the value option. The date display format is specified from the format option, which can take on one of the following values: 'date', 'time' or 'datetime'. Declare an observable variable and pass it to the value option to update the variable each time the widget value changes.

JavaScript
var dateBoxValue = ko.observable(new Date());

To create the dxDateBox widget, add a div element with dxDateBox Knockout binding within the body of the required view.

HTML
<div data-bind="dxDateBox: { value: dateBoxValue, format: 'date' }"></div>

The following demo illustrates how to create a widget without creating an HtmlApplication, views, and layouts. Refer to the Add a widget documentation section to learn how to create widgets within views in a PhoneJS application.

Show Example:
jQuery
<div class="dx-fieldset">
    <div class="dx-field">    
        <div class="dx-field-label">Date</div>    
        <div class="dx-field-value" data-bind="
            dxDateBox: { value: date, format: 'date' }"></div>  
    </div>
    <div class="dx-field">
        <div class="dx-field-label">Time</div>
        <div class="dx-field-value" data-bind="
            dxDateBox: { value: time, format: 'time' }"></div>  
    </div>
    <div class="dx-field">
        <div class="dx-field-label">Date and Time</div>
        <div class="dx-field-value" data-bind="
            dxDateBox: { value: dateTime, format: 'datetime' }"></div>  
    </div>
</div>
date = new Date();
time = new Date();
dateTime = new Date();

Configuration

An object defining configuration options for the dxDateBox widget.

Methods

This section describes the members used to manipulate the widget.