DevExtreme v24.1 is now available.

Explore our newest features/capabilities and share your thoughts with us.

Your search did not match any results.

Use Range Selection for Calculation

The RangeSelector component allows you to handle changes of the currently selected range. For this purpose, the callback function is specified in the onValueChanged property. Select the function’s call mode using the «Handle Range Changes» drop-down menu.

Backend API
<template> <div> <div id="range-selector-demo"> <DxRangeSelector id="range-selector" v-model:value="range" title="Calculate the Working Days Count in a Date Period" > <DxMargin :top="50"/> <DxScale :start-value="startValue" :end-value="endValue" tick-interval="month" minor-tick-interval="day" > <DxMinorTick :visible="false"/> <DxMarker :visible="false"/> <DxLabel format="MMM"/> </DxScale> <DxBehavior :value-change-mode="currentBehaviorMode"/> <DxSliderMarker format="dd EEEE"/> </DxRangeSelector> <h2>Working days count: {{ workingDaysCount }}</h2> <div class="options"> <div class="caption">Options</div> <div class="option"> <span>Handle Range Changes </span> <DxSelectBox :data-source="behaviorModes" :input-attr="{ 'aria-label': 'Value Change Mode' }" :width="210" v-model:value="currentBehaviorMode" /> </div> </div> </div> </div> </template> <script setup lang="ts"> import { computed, ref } from 'vue'; import { DxRangeSelector, DxMargin, DxScale, DxMinorTick, DxMarker, DxLabel, DxBehavior, DxSliderMarker, } from 'devextreme-vue/range-selector'; import { DxSelectBox } from 'devextreme-vue/select-box'; const range = ref([new Date(2011, 0, 1), new Date(2011, 11, 31)]); const behaviorModes = ['onHandleMove', 'onHandleRelease']; const startValue = ref(range.value[0]); const endValue = ref(range.value[1]); const currentBehaviorMode = ref(behaviorModes[0]); const workingDaysCount = computed(() => { const currentDate = new Date(range.value[0]); let workingDaysCounter = 0; while (currentDate <= range.value[1]) { if (currentDate.getDay() > 0 && currentDate.getDay() < 6) { workingDaysCounter += 1; } currentDate.setDate(currentDate.getDate() + 1); } return workingDaysCounter; }); </script> <style scoped> #range-selector { height: 200px; } h2 { text-align: center; } .options { padding: 20px; background-color: rgba(191, 191, 191, 0.15); position: absolute; bottom: 0; left: 0; right: 0; } .option { margin-top: 10px; } .caption { font-size: 18px; font-weight: 500; } .option > span { margin-right: 10px; } .option > .dx-widget { display: inline-block; vertical-align: middle; } </style>
window.exports = window.exports || {}; window.config = { transpiler: 'plugin-babel', meta: { '*.vue': { loader: 'vue-loader', }, '*.ts': { loader: 'demo-ts-loader', }, '*.svg': { loader: 'svg-loader', }, 'devextreme/time_zone_utils.js': { 'esModule': true, }, 'devextreme/localization.js': { 'esModule': true, }, 'devextreme/viz/palette.js': { 'esModule': true, }, }, paths: { 'root:': '../../../../', 'npm:': 'https://unpkg.com/', }, map: { 'vue': 'npm:vue@3.2.47/dist/vue.esm-browser.js', 'vue-loader': 'npm:dx-systemjs-vue-browser@1.1.1/index.js', 'demo-ts-loader': 'root:utils/demo-ts-loader.js', 'svg-loader': 'root:utils/svg-loader.js', 'mitt': 'npm:mitt/dist/mitt.umd.js', 'rrule': 'npm:rrule@2.6.4/dist/es5/rrule.js', 'luxon': 'npm:luxon@1.28.1/build/global/luxon.min.js', 'es6-object-assign': 'npm:es6-object-assign@1.1.0', 'devextreme': 'npm:devextreme@24.1.3/cjs', 'devextreme-vue': 'npm:devextreme-vue@24.1.3/cjs', 'jszip': 'npm:jszip@3.10.1/dist/jszip.min.js', 'devextreme-quill': 'npm:devextreme-quill@1.7.1/dist/dx-quill.min.js', 'devexpress-diagram': 'npm:devexpress-diagram@2.2.8/dist/dx-diagram.js', 'devexpress-gantt': 'npm:devexpress-gantt@4.1.56/dist/dx-gantt.js', '@devextreme/runtime': 'npm:@devextreme/runtime@3.0.13', 'inferno': 'npm:inferno@7.4.11/dist/inferno.min.js', 'inferno-compat': 'npm:inferno-compat/dist/inferno-compat.min.js', 'inferno-create-element': 'npm:inferno-create-element@7.4.11/dist/inferno-create-element.min.js', 'inferno-dom': 'npm:inferno-dom/dist/inferno-dom.min.js', 'inferno-hydrate': 'npm:inferno-hydrate@7.4.11/dist/inferno-hydrate.min.js', 'inferno-clone-vnode': 'npm:inferno-clone-vnode/dist/inferno-clone-vnode.min.js', 'inferno-create-class': 'npm:inferno-create-class/dist/inferno-create-class.min.js', 'inferno-extras': 'npm:inferno-extras/dist/inferno-extras.min.js', 'plugin-babel': 'npm:systemjs-plugin-babel@0.0.25/plugin-babel.js', 'systemjs-babel-build': 'npm:systemjs-plugin-babel@0.0.25/systemjs-babel-browser.js', // Prettier 'prettier/standalone': 'npm:prettier@2.8.8/standalone.js', 'prettier/parser-html': 'npm:prettier@2.8.8/parser-html.js', }, packages: { 'devextreme-vue': { main: 'index.js', }, 'devextreme': { defaultExtension: 'js', }, 'devextreme/events/utils': { main: 'index', }, 'devextreme/events': { main: 'index', }, 'es6-object-assign': { main: './index.js', defaultExtension: 'js', }, }, packageConfigPaths: [ 'npm:@devextreme/*/package.json', 'npm:@devextreme/runtime@3.0.13/inferno/package.json', ], babelOptions: { sourceMaps: false, stage0: true, }, }; System.config(window.config);
import { createApp } from 'vue'; import App from './App.vue'; createApp(App).mount('#app');
<!DOCTYPE html> <html lang="en"> <head> <title>DevExtreme Demo</title> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0" /> <link rel="dx-theme" data-theme="generic.light" href="https://cdn3.devexpress.com/jslib/24.1.3/css/dx.light.css" /> <script src="https://unpkg.com/typescript@4.9.5/lib/typescript.js"></script> <script type="module"> import * as vueCompilerSFC from "https://unpkg.com/@vue/compiler-sfc@3.4.16/dist/compiler-sfc.esm-browser.js"; window.vueCompilerSFC = vueCompilerSFC; </script> <script src="https://unpkg.com/core-js@2.6.12/client/shim.min.js"></script> <script src="https://unpkg.com/systemjs@0.21.3/dist/system.js"></script> <script type="text/javascript" src="config.js"></script> <script type="text/javascript"> System.import("./index.ts"); </script> </head> <body class="dx-viewport"> <div class="demo-container"> <div id="app"> </div> </div> </body> </html>