<template>
<div>
<div class="dx-fieldset">
<div class="dx-field">
<div class="dx-field-label">Date</div>
<div class="dx-field-value">
<DxDateBox
:value="now"
:input-attr="{ 'aria-label': 'Date' }"
type="date"
/>
</div>
</div>
<div class="dx-field">
<div class="dx-field-label">Time</div>
<div class="dx-field-value">
<DxDateBox
:value="now"
:input-attr="{ 'aria-label': 'Time' }"
type="time"
/>
</div>
</div>
<div class="dx-field">
<div class="dx-field-label">Date and time</div>
<div class="dx-field-value">
<DxDateBox
:value="now"
:input-attr="{ 'aria-label': 'Date And Time' }"
type="datetime"
/>
</div>
</div>
<div class="dx-field">
<div class="dx-field-label">Custom format</div>
<div class="dx-field-value">
<DxDateBox
:value="now"
:input-attr="{ 'aria-label': 'Custom Format' }"
display-format="EEEE, MMM dd"
/>
</div>
</div>
<div class="dx-field">
<div class="dx-field-label">Date picker</div>
<div class="dx-field-value">
<DxDateBox
:value="now"
:input-attr="{ 'aria-label': 'Picker' }"
picker-type="rollers"
/>
</div>
</div>
<div class="dx-field">
<div class="dx-field-label">Clear button</div>
<div class="dx-field-value">
<DxDateBox
:value="dateClear"
:input-attr="{ 'aria-label': 'Clear' }"
:show-clear-button="true"
type="time"
/>
</div>
</div>
<div class="dx-field">
<div class="dx-field-label">Disabled</div>
<div class="dx-field-value">
<DxDateBox
:value="now"
:input-attr="{ 'aria-label': 'Disabled' }"
:disabled="true"
type="datetime"
/>
</div>
</div>
<div class="dx-field">
<div class="dx-field-label">Disable certain dates</div>
<div class="dx-field-value">
<DxDateBox
:value="firstWorkDay2017"
:input-attr="{ 'aria-label': 'Disable' }"
: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">
<DxDateBox
v-model:value="value"
:min="min"
:input-attr="{ 'aria-label': 'Birth Date' }"
: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 setup lang="ts">
import { computed, ref } from 'vue';
import DxDateBox from 'devextreme-vue/date-box';
import service from './data.ts';
const value = ref(new Date(1981, 3, 27));
const now = new Date();
const firstWorkDay2017 = new Date(2017, 0, 3);
const min = new Date(1900, 0, 1);
const dateClear = new Date(2015, 11, 1, 6);
const disabledDates = service.getFederalHolidays();
const diffInDay = computed(() => (
`${Math.floor(
Math.abs(
(new Date().getTime() - value.value.getTime())
/ (24 * 60 * 60 * 1000),
),
)} days`
));
</script>
<style scoped>
#age {
display: inline-block;
}
</style>
window.exports = window.exports || {};
window.config = {
transpiler: 'plugin-babel',
meta: {
'*.vue': {
loader: 'vue-loader',
},
'*.ts': {
loader: 'demo-ts-loader',
},
'*.svg': {
loader: 'svg-loader',
},
'devextreme/time_zone_utils.js': {
'esModule': true,
},
'devextreme/localization.js': {
'esModule': true,
},
'devextreme/viz/palette.js': {
'esModule': true,
},
},
paths: {
'root:': '../../../../',
'npm:': 'https://unpkg.com/',
},
map: {
'vue': 'npm:vue@3.2.47/dist/vue.esm-browser.js',
'vue-loader': 'npm:dx-systemjs-vue-browser@1.1.1/index.js',
'demo-ts-loader': 'root:utils/demo-ts-loader.js',
'svg-loader': 'root:utils/svg-loader.js',
'mitt': 'npm:mitt/dist/mitt.umd.js',
'rrule': 'npm:rrule@2.6.4/dist/es5/rrule.js',
'luxon': 'npm:luxon@1.28.1/build/global/luxon.min.js',
'es6-object-assign': 'npm:es6-object-assign@1.1.0',
'devextreme': 'npm:devextreme@24.1.7/cjs',
'devextreme-vue': 'npm:devextreme-vue@24.1.7/cjs',
'jszip': 'npm:jszip@3.10.1/dist/jszip.min.js',
'devextreme-quill': 'npm:devextreme-quill@1.7.1/dist/dx-quill.min.js',
'devexpress-diagram': 'npm:devexpress-diagram@2.2.13/dist/dx-diagram.js',
'devexpress-gantt': 'npm:devexpress-gantt@4.1.56/dist/dx-gantt.js',
'@devextreme/runtime': 'npm:@devextreme/runtime@3.0.13',
'inferno': 'npm:inferno@7.4.11/dist/inferno.min.js',
'inferno-compat': 'npm:inferno-compat/dist/inferno-compat.min.js',
'inferno-create-element': 'npm:inferno-create-element@7.4.11/dist/inferno-create-element.min.js',
'inferno-dom': 'npm:inferno-dom/dist/inferno-dom.min.js',
'inferno-hydrate': 'npm:inferno-hydrate@7.4.11/dist/inferno-hydrate.min.js',
'inferno-clone-vnode': 'npm:inferno-clone-vnode/dist/inferno-clone-vnode.min.js',
'inferno-create-class': 'npm:inferno-create-class/dist/inferno-create-class.min.js',
'inferno-extras': 'npm:inferno-extras/dist/inferno-extras.min.js',
'plugin-babel': 'npm:systemjs-plugin-babel@0.0.25/plugin-babel.js',
'systemjs-babel-build': 'npm:systemjs-plugin-babel@0.0.25/systemjs-babel-browser.js',
// Prettier
'prettier/standalone': 'npm:prettier@2.8.8/standalone.js',
'prettier/parser-html': 'npm:prettier@2.8.8/parser-html.js',
},
packages: {
'devextreme-vue': {
main: 'index.js',
},
'devextreme': {
defaultExtension: 'js',
},
'devextreme/events/utils': {
main: 'index',
},
'devextreme/events': {
main: 'index',
},
'es6-object-assign': {
main: './index.js',
defaultExtension: 'js',
},
},
packageConfigPaths: [
'npm:@devextreme/*/package.json',
'npm:@devextreme/runtime@3.0.13/inferno/package.json',
],
babelOptions: {
sourceMaps: false,
stage0: true,
},
};
System.config(window.config);
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;
},
};
import { createApp } from 'vue';
import App from './App.vue';
createApp(App).mount('#app');
<!DOCTYPE html>
<html lang="en">
<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=5.0" />
<link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/24.1.7/css/dx.light.css" />
<script type="module">
import * as vueCompilerSFC from "https://unpkg.com/@vue/compiler-sfc@3.4.16/dist/compiler-sfc.esm-browser.js";
window.vueCompilerSFC = vueCompilerSFC;
</script>
<script src="https://unpkg.com/typescript@4.9.5/lib/typescript.js"></script>
<script src="https://unpkg.com/core-js@2.6.12/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.ts");
</script>
</head>
<body class="dx-viewport">
<div class="demo-container">
<div id="app"> </div>
</div>
</body>
</html>