jQuery 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.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.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
1is entered, the year is2001; if18is 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
Aor4to specify "April".
Feedback