Demos
Input(Vue)
InputDateRange
Overview

InputDateRange Control (Vue)

The InputDateRange control extends the InputDate control and configures it to allow editing date ranges.

You may specify custom date ranges that the user can pick from, or they can use the multi-month calendar in the drop-down to select date ranges with the mouse or keyboard.

Learn about Input Controls | InputDateRange API Reference

This example uses Vue.

JavaScript
Angular
Vue
React
app.vue
index.html
Copy to CodeMine
<template>
    <div class="container-fluid">
        <div class="form-group">
            <label for="theInputDateRange">InputDateRange: </label>
            <wj-input-date-range id="theInputDateRange" :alwaysShowCalendar="true" :predefinedRanges="predefinedRanges"
                v-model:value="rangeStart" v-model:rangeEnd="rangeEnd" :closeOnSelection="closeOnSelection"
                :monthCount="monthCount" :weeksBefore="weeksBefore" :weeksAfter="weeksAfter" :handleWheel="false">
            </wj-input-date-range>
        </div>
        <div class="params">
            <div>
                <label for="closeOnSelection">closeOnSelection</label>
                <input type="checkbox" id="closeOnSelection" v-model="closeOnSelection" />
            </div>
            <div>
                <label>monthCount</label>
                <wj-input-number :step="1" :min="1" v-model="monthCount"></wj-input-number>
            </div>
            <div>
                <label>weeksBefore</label>
                <wj-input-number :step="1" :min="0" v-model="weeksBefore"></wj-input-number>
            </div>
            <div>
                <label>weeksAfter</label>
                <wj-input-number :step="1" :min="0" v-model="weeksAfter"></wj-input-number>
            </div>
        </div>
        <p>
            The current range is: <b>from {{ formatDate(rangeStart, 'd') }} to {{ formatDate(rangeEnd, 'd') }}</b>
        </p>
    </div>
</template>

<script setup>
import { DateTime, Globalize } from "@mescius/wijmo";
import { ref } from "vue";

const rangeStart = ref(new Date());
const rangeEnd = ref(DateTime.addDays(new Date(), 2));
const predefinedRanges = ref(getPredefinedRanges());
const closeOnSelection = ref(true);
const monthCount = ref(2);
const weeksBefore = ref(0);
const weeksAfter = ref(0);

function getPredefinedRanges() {
    let dt = DateTime,
        now = new Date();
    return {
        // custom
        "Custom Range": null,

        // days
        //'Today': [now, now],
        //'Yesterday': [dt.addDays(now, -1), dt.addDays(now, -1)],
        //'Tomorrow': [dt.addDays(now, +1), dt.addDays(now, +1)],

        // weeks
        "This Week": [dt.weekFirst(now), dt.weekLast(now)],
        "Last Week": [dt.weekFirst(dt.addDays(now, -7)), dt.weekLast(dt.addDays(now, -7))],
        "Next Week": [dt.weekFirst(dt.addDays(now, +7)), dt.weekLast(dt.addDays(now, +7))],

        // months
        "This Month": [dt.monthFirst(now), dt.monthLast(now)],
        "Last Month": [dt.monthFirst(dt.addMonths(now, -1)), dt.monthLast(dt.addMonths(now, -1))],
        "Next Month": [dt.monthFirst(dt.addMonths(now, +1)), dt.monthLast(dt.addMonths(now, +1))],

        // years
        "This Year": [dt.yearFirst(now), dt.yearLast(now)],
        "Last Year": [dt.addYears(dt.yearFirst(now), -1), dt.addYears(dt.yearLast(now), -1)],
        "Next Year": [dt.addYears(dt.yearFirst(now), +1), dt.addYears(dt.yearLast(now), +1)],
    };
}

function formatDate(value, format) {
    return Globalize.formatDate(value, format);
}
</script>

<style>
.wj-inputnumber {
    width: 10em;
}

.params>div {
    margin-bottom: 0.5em;
}

label {
    width: 10em;
    text-align: right;
    margin-right: 0.5em;
}

body {
    margin-bottom: 36px;
}
</style>
<template> <div class="container-fluid"> <div class="form-group"> <label for="theInputDateRange">InputDateRange: </label> <wj-input-date-range id="theInputDateRange" :alwaysShowCalendar="true" :predefinedRanges="predefinedRanges" v-model:value="rangeStart" v-model:rangeEnd="rangeEnd" :closeOnSelection="closeOnSelection" :monthCount="monthCount" :weeksBefore="weeksBefore" :weeksAfter="weeksAfter" :handleWheel="false"> </wj-input-date-range> </div> <div class="params"> <div> <label for="closeOnSelection">closeOnSelection</label> <input type="checkbox" id="closeOnSelection" v-model="closeOnSelection" /> </div> <div> <label>monthCount</label> <wj-input-number :step="1" :min="1" v-model="monthCount"></wj-input-number> </div> <div> <label>weeksBefore</label> <wj-input-number :step="1" :min="0" v-model="weeksBefore"></wj-input-number> </div> <div> <label>weeksAfter</label> <wj-input-number :step="1" :min="0" v-model="weeksAfter"></wj-input-number> </div> </div> <p> The current range is: <b>from {{ formatDate(rangeStart, 'd') }} to {{ formatDate(rangeEnd, 'd') }}</b> </p> </div> </template> <script setup> import { DateTime, Globalize } from "@mescius/wijmo"; import { ref } from "vue"; const rangeStart = ref(new Date()); const rangeEnd = ref(DateTime.addDays(new Date(), 2)); const predefinedRanges = ref(getPredefinedRanges()); const closeOnSelection = ref(true); const monthCount = ref(2); const weeksBefore = ref(0); const weeksAfter = ref(0); function getPredefinedRanges() { let dt = DateTime, now = new Date(); return { // custom "Custom Range": null, // days //'Today': [now, now], //'Yesterday': [dt.addDays(now, -1), dt.addDays(now, -1)], //'Tomorrow': [dt.addDays(now, +1), dt.addDays(now, +1)], // weeks "This Week": [dt.weekFirst(now), dt.weekLast(now)], "Last Week": [dt.weekFirst(dt.addDays(now, -7)), dt.weekLast(dt.addDays(now, -7))], "Next Week": [dt.weekFirst(dt.addDays(now, +7)), dt.weekLast(dt.addDays(now, +7))], // months "This Month": [dt.monthFirst(now), dt.monthLast(now)], "Last Month": [dt.monthFirst(dt.addMonths(now, -1)), dt.monthLast(dt.addMonths(now, -1))], "Next Month": [dt.monthFirst(dt.addMonths(now, +1)), dt.monthLast(dt.addMonths(now, +1))], // years "This Year": [dt.yearFirst(now), dt.yearLast(now)], "Last Year": [dt.addYears(dt.yearFirst(now), -1), dt.addYears(dt.yearLast(now), -1)], "Next Year": [dt.addYears(dt.yearFirst(now), +1), dt.addYears(dt.yearLast(now), +1)], }; } function formatDate(value, format) { return Globalize.formatDate(value, format); } </script> <style> .wj-inputnumber { width: 10em; } .params>div { margin-bottom: 0.5em; } label { width: 10em; text-align: right; margin-right: 0.5em; } body { margin-bottom: 36px; } </style>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>MESCIUS Wijmo InputDateRange Overview</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- SystemJS --> <script src="compiler.js" type="module"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.21.5/system.src.js" integrity="sha512-skZbMyvYdNoZfLmiGn5ii6KmklM82rYX2uWctBhzaXPxJgiv4XBwJnFGr5k8s+6tE1pcR1nuTKghozJHyzMcoA==" crossorigin="anonymous"></script> <script src="systemjs.config.js"></script> <script> System.import('./src/app.js'); </script> </head> <body> <div id="app"></div> </body> </html>
(function (global) { System.config({ transpiler: 'plugin-babel', babelOptions: { es2015: true }, meta: { '*.css': { loader: 'css' }, '*.vue': { loader: '../plugin-vue/index.js' } //'*.vue': { loader: 'systemjs-plugin-vue' } }, paths: { // paths serve as alias 'npm:': 'node_modules/' }, // map tells the System loader where to look for things map: { '@mescius/wijmo': 'npm:@mescius/wijmo/index.js', '@mescius/wijmo.input': 'npm:@mescius/wijmo.input/index.js', '@mescius/wijmo.styles': 'npm:@mescius/wijmo.styles', '@mescius/wijmo.cultures': 'npm:@mescius/wijmo.cultures', '@mescius/wijmo.chart': 'npm:@mescius/wijmo.chart/index.js', '@mescius/wijmo.chart.analytics': 'npm:@mescius/wijmo.chart.analytics/index.js', '@mescius/wijmo.chart.animation': 'npm:@mescius/wijmo.chart.animation/index.js', '@mescius/wijmo.chart.annotation': 'npm:@mescius/wijmo.chart.annotation/index.js', '@mescius/wijmo.chart.finance': 'npm:@mescius/wijmo.chart.finance/index.js', '@mescius/wijmo.chart.finance.analytics': 'npm:@mescius/wijmo.chart.finance.analytics/index.js', '@mescius/wijmo.chart.hierarchical': 'npm:@mescius/wijmo.chart.hierarchical/index.js', '@mescius/wijmo.chart.interaction': 'npm:@mescius/wijmo.chart.interaction/index.js', '@mescius/wijmo.chart.radar': 'npm:@mescius/wijmo.chart.radar/index.js', '@mescius/wijmo.chart.render': 'npm:@mescius/wijmo.chart.render/index.js', '@mescius/wijmo.chart.webgl': 'npm:@mescius/wijmo.chart.webgl/index.js', '@mescius/wijmo.chart.map': 'npm:@mescius/wijmo.chart.map/index.js', '@mescius/wijmo.gauge': 'npm:@mescius/wijmo.gauge/index.js', '@mescius/wijmo.grid': 'npm:@mescius/wijmo.grid/index.js', '@mescius/wijmo.grid.detail': 'npm:@mescius/wijmo.grid.detail/index.js', '@mescius/wijmo.grid.filter': 'npm:@mescius/wijmo.grid.filter/index.js', '@mescius/wijmo.grid.search': 'npm:@mescius/wijmo.grid.search/index.js', '@mescius/wijmo.grid.style': 'npm:@mescius/wijmo.grid.style/index.js', '@mescius/wijmo.grid.grouppanel': 'npm:@mescius/wijmo.grid.grouppanel/index.js', '@mescius/wijmo.grid.multirow': 'npm:@mescius/wijmo.grid.multirow/index.js', '@mescius/wijmo.grid.transposed': 'npm:@mescius/wijmo.grid.transposed/index.js', '@mescius/wijmo.grid.transposedmultirow': 'npm:@mescius/wijmo.grid.transposedmultirow/index.js', '@mescius/wijmo.grid.pdf': 'npm:@mescius/wijmo.grid.pdf/index.js', '@mescius/wijmo.grid.sheet': 'npm:@mescius/wijmo.grid.sheet/index.js', '@mescius/wijmo.grid.xlsx': 'npm:@mescius/wijmo.grid.xlsx/index.js', '@mescius/wijmo.grid.selector': 'npm:@mescius/wijmo.grid.selector/index.js', '@mescius/wijmo.grid.cellmaker': 'npm:@mescius/wijmo.grid.cellmaker/index.js', '@mescius/wijmo.nav': 'npm:@mescius/wijmo.nav/index.js', '@mescius/wijmo.odata': 'npm:@mescius/wijmo.odata/index.js', '@mescius/wijmo.olap': 'npm:@mescius/wijmo.olap/index.js', '@mescius/wijmo.rest': 'npm:@mescius/wijmo.rest/index.js', '@mescius/wijmo.pdf': 'npm:@mescius/wijmo.pdf/index.js', '@mescius/wijmo.pdf.security': 'npm:@mescius/wijmo.pdf.security/index.js', '@mescius/wijmo.viewer': 'npm:@mescius/wijmo.viewer/index.js', '@mescius/wijmo.xlsx': 'npm:@mescius/wijmo.xlsx/index.js', '@mescius/wijmo.undo': 'npm:@mescius/wijmo.undo/index.js', '@mescius/wijmo.interop.grid': 'npm:@mescius/wijmo.interop.grid/index.js', '@mescius/wijmo.touch': 'npm:@mescius/wijmo.touch/index.js', '@mescius/wijmo.cloud': 'npm:@mescius/wijmo.cloud/index.js', '@mescius/wijmo.barcode': 'npm:@mescius/wijmo.barcode/index.js', '@mescius/wijmo.barcode.common': 'npm:@mescius/wijmo.barcode.common/index.js', '@mescius/wijmo.barcode.composite': 'npm:@mescius/wijmo.barcode.composite/index.js', '@mescius/wijmo.barcode.specialized': 'npm:@mescius/wijmo.barcode.specialized/index.js', "@mescius/wijmo.vue2.chart.analytics": "npm:@mescius/wijmo.vue2.chart.analytics/index.js", "@mescius/wijmo.vue2.chart.animation": "npm:@mescius/wijmo.vue2.chart.animation/index.js", "@mescius/wijmo.vue2.chart.annotation": "npm:@mescius/wijmo.vue2.chart.annotation/index.js", "@mescius/wijmo.vue2.chart.finance.analytics": "npm:@mescius/wijmo.vue2.chart.finance.analytics/index.js", "@mescius/wijmo.vue2.chart.finance": "npm:@mescius/wijmo.vue2.chart.finance/index.js", "@mescius/wijmo.vue2.chart.hierarchical": "npm:@mescius/wijmo.vue2.chart.hierarchical/index.js", "@mescius/wijmo.vue2.chart.interaction": "npm:@mescius/wijmo.vue2.chart.interaction/index.js", "@mescius/wijmo.vue2.chart.radar": "npm:@mescius/wijmo.vue2.chart.radar/index.js", '@mescius/wijmo.vue2.chart.map': 'npm:@mescius/wijmo.vue2.chart.map/index.js', "@mescius/wijmo.vue2.chart": "npm:@mescius/wijmo.vue2.chart/index.js", "@mescius/wijmo.vue2.core": "npm:@mescius/wijmo.vue2.core/index.js", "@mescius/wijmo.vue2.gauge": "npm:@mescius/wijmo.vue2.gauge/index.js", "@mescius/wijmo.vue2.grid.detail": "npm:@mescius/wijmo.vue2.grid.detail/index.js", "@mescius/wijmo.vue2.grid.filter": "npm:@mescius/wijmo.vue2.grid.filter/index.js", "@mescius/wijmo.vue2.grid.grouppanel": "npm:@mescius/wijmo.vue2.grid.grouppanel/index.js", '@mescius/wijmo.vue2.grid.search': 'npm:@mescius/wijmo.vue2.grid.search/index.js', "@mescius/wijmo.vue2.grid.multirow": "npm:@mescius/wijmo.vue2.grid.multirow/index.js", "@mescius/wijmo.vue2.grid.sheet": "npm:@mescius/wijmo.vue2.grid.sheet/index.js", '@mescius/wijmo.vue2.grid.transposed': 'npm:@mescius/wijmo.vue2.grid.transposed/index.js', '@mescius/wijmo.vue2.grid.transposedmultirow': 'npm:@mescius/wijmo.vue2.grid.transposedmultirow/index.js', "@mescius/wijmo.vue2.grid": "npm:@mescius/wijmo.vue2.grid/index.js", "@mescius/wijmo.vue2.input": "npm:@mescius/wijmo.vue2.input/index.js", "@mescius/wijmo.vue2.olap": "npm:@mescius/wijmo.vue2.olap/index.js", "@mescius/wijmo.vue2.viewer": "npm:@mescius/wijmo.vue2.viewer/index.js", "@mescius/wijmo.vue2.nav": "npm:@mescius/wijmo.vue2.nav/index.js", "@mescius/wijmo.vue2.base": "npm:@mescius/wijmo.vue2.base/index.js", '@mescius/wijmo.vue2.barcode.common': 'npm:@mescius/wijmo.vue2.barcode.common/index.js', '@mescius/wijmo.vue2.barcode.composite': 'npm:@mescius/wijmo.vue2.barcode.composite/index.js', '@mescius/wijmo.vue2.barcode.specialized': 'npm:@mescius/wijmo.vue2.barcode.specialized/index.js', 'bootstrap.css': 'npm:bootstrap/dist/css/bootstrap.min.css', 'jszip': 'npm:jszip/dist/jszip.js', 'css': 'npm:systemjs-plugin-css/css.js', 'vue': 'npm:vue/dist/vue.cjs.js', '@vue/compiler-dom':'npm:@vue/compiler-dom/dist/compiler-dom.global.prod.js', '@vue/runtime-dom':'npm:@vue/runtime-dom/dist/runtime-dom.global.prod.js', '@vue/shared':'npm:@vue/shared/dist/shared.cjs.js', '@vue/compiler-dom':'npm:@vue/compiler-dom/dist/compiler-dom.global.prod.js', '@vue/runtime-dom':'npm:@vue/runtime-dom/dist/runtime-dom.global.prod.js', '@vue/shared':'npm:@vue/shared/dist/shared.cjs.js', '@vue/compiler-dom':'npm:@vue/compiler-dom/dist/compiler-dom.global.prod.js', '@vue/runtime-dom':'npm:@vue/runtime-dom/dist/runtime-dom.global.prod.js', '@vue/shared':'npm:@vue/shared/dist/shared.cjs.js', '@vue/compiler-dom':'npm:@vue/compiler-dom/dist/compiler-dom.global.prod.js', '@vue/runtime-dom':'npm:@vue/runtime-dom/dist/runtime-dom.global.prod.js', '@vue/shared':'npm:@vue/shared/dist/shared.cjs.js', '@vue/compiler-dom':'npm:@vue/compiler-dom/dist/compiler-dom.global.prod.js', '@vue/runtime-dom':'npm:@vue/runtime-dom/dist/runtime-dom.global.prod.js', '@vue/shared':'npm:@vue/shared/dist/shared.cjs.js', '@vue/compiler-dom':'npm:@vue/compiler-dom/dist/compiler-dom.global.prod.js', '@vue/runtime-dom':'npm:@vue/runtime-dom/dist/runtime-dom.global.prod.js', '@vue/shared':'npm:@vue/shared/dist/shared.cjs.js', '@vue/compiler-dom':'npm:@vue/compiler-dom/dist/compiler-dom.global.prod.js', '@vue/runtime-dom':'npm:@vue/runtime-dom/dist/runtime-dom.global.prod.js', '@vue/shared':'npm:@vue/shared/dist/shared.cjs.js', '@vue/compiler-dom':'npm:@vue/compiler-dom/dist/compiler-dom.global.prod.js', '@vue/runtime-dom':'npm:@vue/runtime-dom/dist/runtime-dom.global.prod.js', '@vue/shared':'npm:@vue/shared/dist/shared.cjs.js', 'vue-loader': 'npm:systemjs-vue-browser/index.js', //'systemjs-plugin-vue': 'npm:systemjs-plugin-vue/index.js', 'plugin-babel': 'npm:systemjs-plugin-babel/plugin-babel.js', 'systemjs-babel-build': 'npm:systemjs-plugin-babel/systemjs-babel-browser.js' }, // packages tells the System loader how to load when no filename and/or no extension packages: { src: { defaultExtension: 'js' }, rxjs: { defaultExtension: 'js' }, "node_modules": { defaultExtension: 'js' }, wijmo: { defaultExtension: 'js', } } }); })(this);