UI Widgets DateBox

A date box widget.

Included in: dx.phonejs.js, dx.webappjs.js, dx.all.js

The dxDateBox widget displays the date and time value in a specified format, and enables a user to pick the required date/time value.

This widget, like any other DevExtreme UI widget, can be created using one of three possible approaches: jQuery, Knockout or AngularJS. The following code demonstrates how to create the dxDateBox widget using the Knockout approach.

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

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());
See Also
  • To learn how to create widgets in detail, refer to the Create a Widget article.
  • The dxDateBox widget is related to the Editors category. So read an overview of the features that are common for editors in the Common Tasks topic of the Editors article.
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.

Events

This section describes events fired by this component.