Your search did not match any results.
Date Box

Overview

Documentation

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.

Copy to CodeSandBox
Apply
Reset
<template> <div> <div class="dx-fieldset"> <div class="dx-field"> <div class="dx-field-label">Date</div> <div class="dx-field-value"> <dx-date-box :value="now" type="date" /> </div> </div> <div class="dx-field"> <div class="dx-field-label">Time</div> <div class="dx-field-value"> <dx-date-box :value="now" type="time" /> </div> </div> <div class="dx-field"> <div class="dx-field-label">Date and time</div> <div class="dx-field-value"> <dx-date-box :value="now" type="datetime" /> </div> </div> <div class="dx-field"> <div class="dx-field-label">Custom format</div> <div class="dx-field-value"> <dx-date-box :value="now" display-format="EEEE, MMM dd" /> </div> </div> <div class="dx-field"> <div class="dx-field-label">Date picker</div> <div class="dx-field-value"> <dx-date-box :value="now" picker-type="rollers" /> </div> </div> <div class="dx-field"> <div class="dx-field-label">Clear button</div> <div class="dx-field-value"> <dx-date-box :value="dateClear" :show-clear-button="true" type="time" /> </div> </div> <div class="dx-field"> <div class="dx-field-label">Disabled</div> <div class="dx-field-value"> <dx-date-box :value="now" :disabled="true" type="datetime" /> </div> </div> <div class="dx-field"> <div class="dx-field-label">Disable certain dates</div> <div class="dx-field-value"> <dx-date-box :value="firstWorkDay2017" :disabled-dates="disabledDates" type="date" picker-type="calendar" /> </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"> <dx-date-box :value.sync="value" :min="min" :max="now" apply-value-mode="useButtons" /> </div> </div> <div class="dx-field"> <div class="dx-field-value"> Your age is <div id="age">{{ diffInDay }}</div> </div> </div> </div> </div> </template> <script> import { DxDateBox } from 'devextreme-vue'; import service from './data.js'; export default { components: { DxDateBox }, data() { return { value: new Date(1981, 3, 27), now: new Date(), firstWorkDay2017: new Date(2017, 0, 3), min: new Date(1900, 0, 1), dateClear: new Date(2015, 11, 1, 6), disabledDates: service.getFederalHolidays() }; }, computed: { diffInDay() { return ( `${Math.floor( Math.abs( (new Date().getTime() - this.value.getTime()) / (24 * 60 * 60 * 1000) ) ) } days` ); } } }; </script> <style scoped> #age { display: inline-block; } </style>
import Vue from 'vue'; import App from './App.vue'; new Vue({ el: '#app', components: { App }, template: '<App/>' });
<!DOCTYPE html> <html> <head> <title>DevExtreme Demo</title> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" /> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/19.1.4/css/dx.common.css" /> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/19.1.4/css/dx.light.css" /> <script src="https://unpkg.com/core-js@2.4.1/client/shim.min.js"></script> <script src="https://unpkg.com/systemjs@0.21.3/dist/system.js"></script> <script type="text/javascript" src="config.js"></script> <script type="text/javascript"> System.import('./index.js'); </script> </head> <body class="dx-viewport"> <div class="demo-container"> <div id="app"> <span v-if="false">Loading...</span> </div> </div> </body> </html>
const federalHolidays = [ new Date(2017, 0, 1), new Date(2017, 0, 2), new Date(2017, 0, 16), new Date(2017, 1, 20), new Date(2017, 4, 29), new Date(2017, 6, 4), new Date(2017, 8, 4), new Date(2017, 9, 9), new Date(2017, 10, 11), new Date(2017, 10, 23), new Date(2017, 11, 25) ]; export default { getFederalHolidays() { return federalHolidays; } };
System.config({ transpiler: 'plugin-babel', paths: { 'npm:': 'https://unpkg.com/' }, map: { vue: 'npm:vue@2.6.3/dist/vue.esm.browser.js', 'vue-loader': 'npm:systemjs-vue-browser@latest/index.js', 'devextreme': 'npm:devextreme@19.1', 'devextreme-vue': 'npm:devextreme-vue@19.1', jszip: 'npm:jszip@3.1.3/dist/jszip.min.js', 'quill': 'npm:quill@1.3.6/dist/quill.js', 'devexpress-diagram': 'npm:devexpress-diagram', 'plugin-babel': 'npm:systemjs-plugin-babel@0/plugin-babel.js', 'systemjs-babel-build': 'npm:systemjs-plugin-babel@0/systemjs-babel-browser.js' }, meta: { '*.vue': { loader: 'vue-loader' } }, packages: { 'devextreme-vue': { main: 'index.js' }, 'devextreme': { defaultExtension: 'js' } }, babelOptions: { sourceMaps: false, stage0: true } });