Your search did not match any results.

Date Box

The DateBox is a widget that displays the date and time in one of DevExtreme predefined formats or a format defined in an external localization library, or a type in the required date/time value. In this demo, the «Custom format» DateBox’es value is formatted using the Globalize library. Alternatively, you can use Intl.
<div class="dx-fieldset"> <div class="dx-field"> <div class="dx-field-label">Date</div> <div class="dx-field-value"> @(Html.DevExtreme().DateBox() .Type(DateBoxType.Date) .Value(DateTime.Now) ) </div> </div> <div class="dx-field"> <div class="dx-field-label">Time</div> <div class="dx-field-value"> @(Html.DevExtreme().DateBox() .Type(DateBoxType.Time) .Value(DateTime.Now) ) </div> </div> <div class="dx-field"> <div class="dx-field-label">Date and time</div> <div class="dx-field-value"> @(Html.DevExtreme().DateBox() .Type(DateBoxType.DateTime) .Value(DateTime.Now) ) </div> </div> <div class="dx-field"> <div class="dx-field-label">Custom format</div> <div class="dx-field-value"> @(Html.DevExtreme().DateBox() .DisplayFormat("EEEE, MMM dd") .Value(DateTime.Now) ) </div> </div> <div class="dx-field"> <div class="dx-field-label">Date picker</div> <div class="dx-field-value"> @(Html.DevExtreme().DateBox() .PickerType(DateBoxPickerType.Rollers) .Value(DateTime.Now) ) </div> </div> <div class="dx-field"> <div class="dx-field-label">Disabled</div> <div class="dx-field-value"> @(Html.DevExtreme().DateBox() .Type(DateBoxType.DateTime) .Value(DateTime.Now) .Disabled(true) ) </div> </div> <div class="dx-field"> <div class="dx-field-label">Clear button</div> <div class="dx-field-value"> @(Html.DevExtreme().DateBox() .Type(DateBoxType.Time) .ShowClearButton(true) .Value(new DateTime(2016, 11, 1, 6, 0, 0)) ) </div> </div> </div> <div class="dx-fieldset"> <div class="dx-fieldset-header">Event Handling</div> <div class="dx-field"> <div class="dx-field-label">Set Birthday</div> <div class="dx-field-value"> @(Html.DevExtreme().DateBox() .ApplyValueMode(EditorApplyValueMode.UseButtons) .Max(DateTime.Now) .Min(new DateTime(1900, 1, 1)) .Value(new DateTime(1981, 4, 27)) .OnValueChanged("dateBox_valueChanged") ) </div> </div> <div class="dx-field"> <div class="dx-field-value"> Your age is <div id="age"></div> </div> </div> </div> <script> function dateDiff(secondDate) { var diffInDay = Math.floor(Math.abs((new Date() - secondDate) / (24 * 60 * 60 * 1000))); return $("#age").text(diffInDay + " days"); } function dateBox_valueChanged(data) { dateDiff(new Date(data.value)); } $(function() { dateDiff(new Date(1981, 3, 27)); }); </script>
using System.Web.Mvc; namespace DevExtreme.MVC.Demos.Controllers { public class DateBoxController : Controller { public ActionResult Overview() { return View(); } } }
.demo-container { height: 560px; } #age { display: inline-block; }