Vue DateBox - Getting Started

jQuery

NOTE

Before you start the tutorial, ensure DevExtreme is installed in your application.

Angular

NOTE

Before you start the tutorial, ensure DevExtreme is installed in your application.

Vue

NOTE

Before you start the tutorial, ensure DevExtreme is installed in your application.

React

NOTE

Before you start the tutorial, ensure DevExtreme is installed in your application.

DateBox is a UI component that allows users to set a certain date, time, or date/time combination.

This tutorial shows how to configure basic DateBox features. The newly created UI component allows users to set the date and time from a specific date range, logs this value to the console, and prevents users from specifying weekend days (Saturday and Sunday) and US bank holidays.

Each section in this tutorial covers a single configuration step. You can also find the full code in the GitHub repository.

View on GitHub

Create the DateBox

Use the following code to create a basic DateBox:

jQuery

index.js

index.html

$(function() {
    $("#dateBox").dxDateBox({
        // Configuration goes here
     });
});

<!DOCTYPE html>
<html>
    <head>
        <script type="text/javascript" src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
        <link rel="stylesheet" href="https://cdn3.devexpress.com/jslib/minor_23_2/css/dx.light.css">
        <script type="text/javascript" src="https://cdn3.devexpress.com/jslib/minor_23_2/js/dx.all.js"></script>
        <script type="text/javascript" src="index.js"></script>
    </head>
    <body class="dx-viewport">
        <div id="dateBox"></div>
    </body>
</html>

Angular

app.component.html

app.component.ts

app.module.ts

<dx-date-box
    <!-- Configuration goes here -->
>
</dx-date-box>

import { Component } from '@angular/core';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})
export class AppComponent {

}

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';

import { DxDateBoxModule } from 'devextreme-angular';

@NgModule({
    declarations: [
        AppComponent
    ],
    imports: [
        BrowserModule,
        DxDateBoxModule
    ],
    providers: [ ],
    bootstrap: [AppComponent]
})
export class AppModule { }

Vue

App.vue

<template>
    <DxDateBox
        <!-- Configuration goes here -->
    />
</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      
                // Configuration goes here
            />
        );
    }
}
export default App;

If you run this code, you will that see the DateBox that allows users to set the date only. Users will be allowed to set the time in the next step.

Set the DateBox Type

To allow users to specify the date and time, set the type to "datetime". This will implicitly set applyValueMode to "useButtons" (i.e., a user must press OK to submit their choices).

jQuery

index.js

$(function() {
    $("#dateBox").dxDateBox({
        type: "datetime"
    });
});

Angular

app.component.html

<dx-date-box    
    type="datetime">
</dx-date-box>

Vue

App.vue

<template>
    <DxDateBox
        type="datetime"
    />
</template>

<script>
    // ...
</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      
                type="datetime"
            />
        );
    }
}
export default App;

Run this code and ensure it is possible to specify the date and time. In the next step, we will set an accepted date range.

Set the Accepted Date Range

To define the range from which users can select dates, specify the min and max properties:

jQuery

index.js

$(function() {
    const now = new Date();

    $("#dateBox").dxDateBox({
        max: now,
        min: new Date(1900, 0, 1),
     });
});

Angular

app.component.html

app.component.ts

<dx-date-box ... 
    [min]="minDate"
    [max]="now">
</dx-date-box>

import { Component } from '@angular/core';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})
export class AppComponent {
    minDate: Date = new Date(1900, 0, 1);
    now: Date = new Date();
}

Vue

App.vue

<template>
    <DxDateBox ...
        :min="minDate"
        :max="now"
    />
</template>

<script>
import 'devextreme/dist/css/dx.light.css';

import { DxDateBox } from 'devextreme-vue/date-box';

export default {
    components: {
        DxDateBox
    },
    data() {
        return {
            minDate: new Date(1900, 0, 1)
            now: Date(),
        }
    }
}
</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 {
    minDate = new Date(1900, 0, 1);
    now = new Date();

    render() {
        return (
            <DateBox      
                min={this.minDate}
                max={this.now}
            />
        );
    }
}
export default App;

Run the code and ensure that the only available dates are between 1 Jan 1900 and today. Next, we will set the UI component's initial value.

Set the Value

To set the UI component's value, specify the value property. In this tutorial, it is equal to the current date and time.

jQuery

index.js

$(function() {
    const now = new Date();

    $("#dateBox").dxDateBox({
        // ...
        value: now
    });
});

Angular

app.component.html

app.component.ts

<dx-date-box ...    
    [value]="now">
</dx-date-box>

import { Component } from '@angular/core';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})
export class AppComponent {
    // ...
    now: Date = new Date();
}

Vue

App.vue

<template>
    <DxDateBox ...
        :value="now"
    />
</template>

<script>
import 'devextreme/dist/css/dx.light.css';

import { DxDateBox } from 'devextreme-vue/date-box';

export default {
    components: {
        DxDateBox
    },
    data() {
        return {
            // ...
            now: Date(),
        }
    }
}
</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 {
    // ...
    now = new Date();

    constructor(props) {
        super(props);
        this.state = {
            dateBoxValue: this.now
        };
    }

    render() {
        return (
            <DateBox ...
                value={this.state.dateBoxValue}
            />
        );
    }
}
export default App;

In the next step, we will handle the value change event.

Handle the Value Change Event

To handle value changes, implement the onValueChanged function. In this tutorial, it logs the previous and current values.

jQuery

index.js

$(function() {
    $("#dateBox").dxDateBox({
        // ...
        onValueChanged: function(e) {
            console.log(e.value);
            console.log(e.previousValue);
        },
    });
});

Angular

app.component.html

app.component.ts

<dx-date-box ...
    (onValueChanged)="onValueChanged($event)">
</dx-date-box>

import { Component } from '@angular/core';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})
export class AppComponent {
    // ...
    onValueChanged(e) {
        console.log(e.previousValue);
        console.log(e.value);
    }
}

Vue

App.vue

<template>
    <DxDateBox ...
        @value-changed="onValueChanged"
    />
</template>

<script>
import 'devextreme/dist/css/dx.light.css';

import { DxDateBox } from 'devextreme-vue/date-box';

export default {
    // ...
    methods: {
        onValueChanged(e) {
            console.log(e.previousValue);
            console.log(e.value);
        }
    }
}
</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 {
    constructor(props) {
        // ...
        this.onValueChanged = this.onValueChanged.bind(this);
    }

    onValueChanged(e) {
        console.log(e.previousValue);
        console.log(e.value);
        this.setState({
            dateBoxValue: e.value
        });
    } 

    render() {
        return (
            <DateBox ...
                onValueChanged={this.onValueChanged}
            />
        );
    }
}
export default App;

Add a Label

To specify label text, set the label property. If you want to enable floating labels, set the labelMode property to "floating". In this case, the label acts as a placeholder, but when the editor gets focus, the label moves to the position above the input field.

jQuery

index.js

$(function() {
    $("#dateBox").dxDateBox({
        // ...
        label: "Date and time",
        labelMode: "floating",
    });
});

Angular

app.component.html

<dx-date-box ...
    label="Date and time"
    labelMode="floating">
</dx-date-box>

Vue

App.vue

<template>
    <DxDateBox ...
        label="Date and time"
        label-mode="floating"
    />
</template>

<script>
// ...
</script>

React

App.js

// ...
class App extends React.Component {
    // ...
    render() {
        return (
            <DateBox ...
                label="Date and time"
                labelMode="floating"
            />
        );
    }
}
export default App;

View Demo

Disable Specific Dates

To prevent users from setting specific dates, use the disabledDates property. It can be set to a function or an array of Date values. In this tutorial, we implement a function that disables weekend days (Saturday and Sunday) and US bank holidays.

jQuery

index.js

$(function() {
    // ...
    const holidays = [
        new Date(0, 0, 1),
        new Date(0, 0, 20),
        new Date(0, 1, 17),
        new Date(0, 4, 10),
        new Date(0, 4, 25),
        new Date(0, 5, 21),
        new Date(0, 6, 4),
        new Date(0, 8, 7),
        new Date(0, 9, 5),
        new Date(0, 9, 12),
        new Date(0, 10, 11),
        new Date(0, 10, 26),
        new Date(0, 10, 27),
        new Date(0, 11, 24),
        new Date(0, 11, 25),
        new Date(0, 11, 31)
    ];

    $("#dateBox").dxDateBox({
        // ...
        disabledDates: function(args) {
            const dayOfWeek = args.date.getDay();
            const isWeekend = dayOfWeek === 0 || dayOfWeek === 6; 
            return args.view === "month" && (isWeekend || isHoliday(args.date)); 
        }
    });

    function isHoliday(date) {
        for (let holiday of holidays) {
            if (date.getDate() === holiday.getDate() && date.getMonth() === holiday.getMonth()) {
                return true;
            }          
        }
        return false;
    }
});

Angular

app.component.html

app.component.ts

app.service.ts

<dx-date-box ...
    [disabledDates]="getDisabledDates">
</dx-date-box>

import { Component } from '@angular/core';
import { AppService } from './app.service';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})
export class AppComponent {
    // ...
    holidays: Date[];

    constructor(service: AppService) {
        this.holidays = service.getHolidays();
        this.getDisabledDates = this.getDisabledDates.bind(this);
    }

    getDisabledDates(args): boolean {
        const dayOfWeek = args.date.getDay();
        const isWeekend = dayOfWeek === 0 || dayOfWeek === 6;
        return args.view === "month" && (isWeekend || this.isHoliday(args.date));
    }

    isHoliday(date): boolean {
        for (let holiday of this.holidays) {
            if (date.getDate() === holiday.getDate() && date.getMonth() === holiday.getMonth()) {
                return true;
            }          
        }
        return false;
    }
}

import { Injectable } from '@angular/core';

const holidays = [
    new Date(0, 0, 1),
    new Date(0, 0, 20),
    new Date(0, 1, 17),
    new Date(0, 4, 10),
    new Date(0, 4, 25),
    new Date(0, 5, 21),
    new Date(0, 6, 4),
    new Date(0, 8, 7),
    new Date(0, 9, 5),
    new Date(0, 9, 12),
    new Date(0, 10, 11),
    new Date(0, 10, 26),
    new Date(0, 10, 27),
    new Date(0, 11, 24),
    new Date(0, 11, 25),
    new Date(0, 11, 31)
];

@Injectable()
export class AppService {

    getHolidays(): Date[] {
        return holidays;
    }
}

Vue

App.vue

<template>
    <DxDateBox ...
        :disabled-dates="getDisabledDates"
    />
</template>

<script>
import 'devextreme/dist/css/dx.light.css';

import { DxDateBox } from 'devextreme-vue/date-box';

const holidays = [
    new Date(0, 0, 1),
    new Date(0, 0, 20),
    new Date(0, 1, 17),
    new Date(0, 4, 10),
    new Date(0, 4, 25),
    new Date(0, 5, 21),
    new Date(0, 6, 4),
    new Date(0, 8, 7),
    new Date(0, 9, 5),
    new Date(0, 9, 12),
    new Date(0, 10, 11),
    new Date(0, 10, 26),
    new Date(0, 10, 27),
    new Date(0, 11, 24),
    new Date(0, 11, 25),
    new Date(0, 11, 31)
]

export default {
    // ...
    methods: {
        getDisabledDates(args) {
            const dayOfWeek = args.date.getDay();
            const isWeekend = dayOfWeek === 0 || dayOfWeek === 6;
            return args.view === "month" && (isWeekend || this.isHoliday(args.date));
        },
        isHoliday(date) {
            for (let holiday of holidays) {
                if (date.getDate() === holiday.getDate() && date.getMonth() === holiday.getMonth()) {
                    return true;
                }          
            }
            return false;
        }
    }
}
</script>

React

App.js

import React from 'react';

import 'devextreme/dist/css/dx.light.css';

import { DateBox } from 'devextreme-react/date-box';

const holidays = [
    new Date(0, 0, 1),
    new Date(0, 0, 20),
    new Date(0, 1, 17),
    new Date(0, 4, 10),
    new Date(0, 4, 25),
    new Date(0, 5, 21),
    new Date(0, 6, 4),
    new Date(0, 8, 7),
    new Date(0, 9, 5),
    new Date(0, 9, 12),
    new Date(0, 10, 11),
    new Date(0, 10, 26),
    new Date(0, 10, 27),
    new Date(0, 11, 24),
    new Date(0, 11, 25),
    new Date(0, 11, 31)
];

class App extends React.Component {
    // ...

    constructor(props) {
        // ...
        this.getDisabledDates = this.getDisabledDates.bind(this);
    }

    getDisabledDates(args) {
        const dayOfWeek = args.date.getDay();
        const isWeekend = dayOfWeek === 0 || dayOfWeek === 6;
        return args.view === "month" && (isWeekend || this.isHoliday(args.date));
    }

    isHoliday(date) {
        for (let holiday of holidays) {
            if (date.getDate() === holiday.getDate() && date.getMonth() === holiday.getMonth()) {
                return true;
            }          
        }
        return false;
    }

    render() {
        return (
            <DateBox ...
                disabledDates={this.getDisabledDates}
            />
        );
    }
}
export default App;

Run the code and ensure that the disabled dates cannot be set.

You have now configured the basic DateBox features. For more details on this UI component, explore the following resources:

Was this topic helpful?

Thank you!

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!