jQuery DateBox - Specify Value Range
To specify the date or time range, use the min and max properties.
jQuery
JavaScript
$(function() {
$("#dateBoxContainer").dxDateBox({
value: "2015/12/31",
type: "date",
min: "2015/1/1",
max: "2015/12/31"
});
});Angular
HTML
TypeScript
<dx-date-box
value="2015/12/31"
type="date"
min="2015/1/1"
max="2015/12/31">
</dx-date-box>
import { DxDateBoxModule } from "devextreme-angular";
// ...
export class AppComponent {
// ...
}
@NgModule({
imports: [
// ...
DxDateBoxModule
],
// ...
})Vue
App.vue
<template>
<DxDateBox
value="2015/12/31"
type="date"
min="2015/1/1"
max="2015/12/31"
/>
</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
defaultValue="2015/12/31"
type="date"
min="2015/1/1"
max="2015/12/31"
/>
);
}
}
export default App;If an entered value falls out of the range, the UI component displays an error message. To change the message text, specify the dateOutOfRangeMessage property.
jQuery
JavaScript
$(function() {
$("#dateBoxContainer").dxDateBox({
value: "2015/12/31",
type: "date",
min: "2015/1/1",
max: "2015/12/31",
dateOutOfRangeMessage: "Date is out of range"
});
});Angular
HTML
TypeScript
<dx-date-box
value="2015/12/31"
type="date"
min="2015/1/1"
max="2015/12/31"
dateOutOfRangeMessage="Date is out of range">
</dx-date-box>
import { DxDateBoxModule } from "devextreme-angular";
// ...
export class AppComponent {
// ...
}
@NgModule({
imports: [
// ...
DxDateBoxModule
],
// ...
})Vue
App.vue
<template>
<DxDateBox
value="2015/12/31"
type="date"
min="2015/1/1"
max="2015/12/31"
date-out-of-range-message="Date is out of range"
/>
</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
defaultValue="2015/12/31"
type="date"
min="2015/1/1"
max="2015/12/31"
dateOutOfRangeMessage="Date is out of range"
/>
);
}
}
export default App;See Also
Feedback