Vue Date Box - Formatting

Use the displayFormat property to change how DateBox displays date values.

Was this demo helpful?

Thank you!

Feel free to share demo-related thoughts here.
If you have technical questions, please create a support ticket in the DevExpress Support Center.

Thank you for the feedback!

Backend API

<template> <div> <div class="dx-fieldset"> <div class="dx-field"> <div class="dx-field-label">Locale-dependent format</div> <div class="dx-field-value"> <DxDateBox :show-clear-button="true" :use-mask-behavior="true" :input-attr="{ 'aria-label': 'Date' }" type="datetime" placeholder="12/31/2018, 2:52 PM" /> </div> </div> <div class="dx-field"> <div class="dx-field-label">Built-in predefined format</div> <div class="dx-field-value"> <DxDateBox :show-clear-button="true" :use-mask-behavior="true" :value="date" :input-attr="{ 'aria-label': 'Date' }" placeholder="10/16/2018" display-format="shortdate" type="date" /> </div> </div> <div class="dx-field"> <div class="dx-field-label">Locale Data Markup Language (LDML) pattern</div> <div class="dx-field-value"> <DxDateBox :show-clear-button="true" :use-mask-behavior="true" :input-attr="{ 'aria-label': 'Date' }" :value="date" type="datetime" placeholder="Tuesday, 16 of Oct, 2018 14:52" display-format="EEEE, d of MMM, yyyy HH:mm" /> </div> </div> <div class="dx-field"> <div class="dx-field-label">Format with literal characters</div> <div class="dx-field-value"> <DxDateBox :show-clear-button="true" :use-mask-behavior="true" :input-attr="{ 'aria-label': 'Date' }" :value="date" placeholder="Year: 2018" display-format="'Year': yyyy" type="date" /> </div> </div> </div> </div> </template> <script setup lang="ts"> import DxDateBox from 'devextreme-vue/date-box'; const date = new Date(2018, 9, 16, 15, 8, 12); </script> <style> .dx-fieldset { min-height: 500px; } </style>

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/25.1.3/css/dx.light.css" /> <script type="module"> import * as vueCompilerSFC from "https://cdn.jsdelivr.net/npm/@vue/compiler-sfc@3.4.27/dist/compiler-sfc.esm-browser.js"; window.vueCompilerSFC = vueCompilerSFC; </script> <script src="https://cdn.jsdelivr.net/npm/typescript@5.4.5/lib/typescript.js"></script> <script src="https://cdn.jsdelivr.net/npm/core-js@2.6.12/client/shim.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/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>

This demo illustrates the following:

Locale-dependent format The DateBox formats values based upon a user's locale. This is the default format. As such, you do not need to define the displayFormat property. Refer to the following help topic for more information: Localize Dates, Numbers, and Currencies
Built-in predefined formats DevExtreme supports various predefined formats. You can use simple strings or shortcuts that define commonly used date formats instead of complex expressions. Review the linked document for a list of values you can assign to displayFormat. This demo uses the "shortdate" format.
LDML pattern Use an LDML pattern to construct a custom date-time format string. This demo sets displayFormat property to "EEEE, d of MMM, yyyy HH:mm". This expression displays week day, day number, month, year, hour, and minute. The editor displays the formatted value. Refer to the following help topic for information about supported format characters: Custom Format String.
Format with literal characters Specify the displayFormat property as a string that contains literal and LDML characters. Wrap any characters that are not part of the LDML pattern in quotation marks - otherwise, they may be interpreted as wildcards. In this example, if you remove quotation marks from the word "Year", the letter "a" is interpreted as an "AM/PM" placeholder.

You can also use an input mask in the DateBox. Input masks ensure that input values match the displayFormat (set the useMaskBehavior value to true).

For additional formatting-related information, please refer to the following help topic: Value Formatting.