Angular DateBox - Value Formatting and Masked Input
The DateBox's value is formatted according to the application's locale. You can use the displayFormat property that accepts predefined and custom formats to change the format.
In addition to value formatting, the displayFormat can be used as a mask to control user input if useMaskBehavior is true:
jQuery
JavaScript
$(function() { $("#dateBoxContainer").dxDateBox({ displayFormat: "EEEE, d 'of' MMM", // "Tuesday, 16 of Oct" useMaskBehavior: true }); });
Angular
HTML
TypeScript
<dx-date-box [useMaskBehavior]="true" displayFormat="EEEE, d 'of' MMM"> <!-- "Tuesday, 16 of Oct" --> </dx-date-box>
import { DxDateBoxModule } from "devextreme-angular"; // ... export class AppComponent { // ... } @NgModule({ imports: [ // ... DxDateBoxModule ], // ... })
Vue
App.vue
<template> <DxDateBox :use-mask-behavior="true" display-format="EEEE, d 'of' MMM"/> <!-- "Tuesday, 16 of Oct" --> </template> <script> import 'devextreme/dist/css/dx.common.css'; import 'devextreme/dist/css/dx.light.css'; import DxDateBox from 'devextreme-vue/date-box'; export default { components: { DxDateBox } } </script>
React
App.js
import React from 'react'; import 'devextreme/dist/css/dx.common.css'; import 'devextreme/dist/css/dx.light.css'; import DateBox from 'devextreme-react/date-box'; class App extends React.Component { render() { return ( <DateBox useMaskBehavior={true} displayFormat="EEEE, d 'of' MMM" {/* "Tuesday, 16 of Oct" */} /> ); } } export default App;
The following changes apply when masked input is enabled:
- The mouse wheel or Up/Down Arrow key increases/decreases the selected value portion by 1.
- The caret is moved to the next date portion when the previous date portion is entered.
- The year is entered right-to-left. For example, if
1
is entered, the year is2001
; if18
is entered, the year is2018
. - Numbers and first letters can be used to specify the month and day of week when they are displayed as text. For example, enter
A
or4
to specify "April".
Feel free to share topic-related thoughts here.
If you have technical questions, please create a support ticket in the DevExpress Support Center.
Thank you for the feedback!
If you have technical questions, please create a support ticket in the DevExpress Support Center.