The selected range can be adjusted by the user or you can programmatically set the start and end.
This is especially useful and effective when using the range for filtering and you'd like to offer predefined ranges like Yesterday, Today, Last week and so on. Setting the values can be done from something as simple as a button click.
Demo
Setting today
<script setup>
const now = new Date()
const myValue = ref(null)
function setToday() {
myValue.value = [now, now]
}
</script>
<template>
<MbscButton @click="setToday">Today</MbscButton>
<MbscDatepicker v-model="myValue" :controls="['calendar']" select="range" />
</template>Setting yesterday
<script setup>
const now = new Date()
const myValue = ref(null)
function setToday() {
myValue.value = [now, now]
}
</script>
<template>
<MbscButton @click="setToday">Today</MbscButton>
<MbscDatepicker v-model="myValue" :controls="['calendar']" select="range" />
</template>Setting this week
<script setup>
const now = new Date()
const firstday = new Date(now.setDate(now.getDate() - now.getDay()));
const lastday = new Date(now.setDate(now.getDate() - now.getDay() + 6));
const myValue = ref(null)
function setWeek() {
myValue.value = [firstday, lastday]
}
</script>
<template>
<MbscButton @click="setWeek">This week</MbscButton>
<MbscDatepicker v-model="myValue" :controls="['calendar']" select="range" />
</template>Setting last month
<script setup>
const now = new Date()
const firstday = new Date(now.getFullYear(), now.getMonth() - 1, 1)
const lastday = new Date(now.getFullYear(), now.getMonth(), 0)
const myValue = ref(null)
function setMonth() {
myValue.value = [firstday, lastday]
}
</script>
<template>
<MbscButton @click="setMonth">Last month</MbscButton>
<MbscDatepicker v-model="myValue" :controls="['calendar']" select="range" />
</template>Clear the selection with a simple click
<script setup>
const myValue = ref(null)
function clear() {
myValue.value = null
}
</script>
<template>
<MbscButton @click="clear">Clear</MbscButton>
<MbscDatepicker v-model="myValue" :controls="['calendar']" select="range" />
</template>SFC JSSFC TS
<script setup>
import {
MbscButton,
MbscDatepicker,
MbscPage,
setOptions
} from '@mobiscroll/vue'
import { ref } from 'vue'
setOptions({
locale: ,
theme: ' ',
themeVariant: ' '
})
const now = new Date()
const curr = new Date()
const yesterday = new Date(curr.getFullYear(), curr.getMonth(), curr.getDate() - 1)
const startWeek = new Date(curr.setDate(curr.getDate() - curr.getDay()))
const endWeek = new Date(curr.setDate(curr.getDate() - curr.getDay() + 6))
const startMonth = new Date(curr.getFullYear(), curr.getMonth() - 1, 1)
const endMonth = new Date(curr.getFullYear(), curr.getMonth(), 0)
const rangeValue = ref(null)
const toastMessage = ref('')
const isToastOpen = ref(false)
function handleToastClose() {
isToastOpen.value = false
}
function setToday() {
rangeValue.value = [now, now]
toastMessage.value = 'Today Selected'
isToastOpen.value = true
}
function setYesterday() {
rangeValue.value = [yesterday, yesterday]
toastMessage.value = 'Yesterday Selected'
isToastOpen.value = true
}
function setThisWeek() {
rangeValue.value = [startWeek, endWeek]
toastMessage.value = 'This Week Selected'
isToastOpen.value = true
}
function setLastMonth() {
rangeValue.value = [startMonth, endMonth]
toastMessage.value = 'Last Month Selected'
isToastOpen.value = true
}
function clear() {
rangeValue.value = null
toastMessage.value = 'Clear Value'
isToastOpen.value = true
}
</script>
<template>
<MbscPage>
<div class="md-range-filter">
<h4 class="md-header">Filter Results by</h4>
<div class="mbsc-padding">
<MbscButton className="mbsc-button-block" @click="setToday">Today</MbscButton>
<MbscButton className="mbsc-button-block" @click="setYesterday">Yesterday</MbscButton>
<MbscButton className="mbsc-button-block" @click="setThisWeek">This Week</MbscButton>
<MbscButton className="mbsc-button-block" @click="setLastMonth">Last Month</MbscButton>
<MbscButton className="mbsc-button-block" @click="clear">Clear</MbscButton>
</div>
<div class="mbsc-form-group">
<div class="mbsc-form-group-title">Or by a custom range</div>
<MbscDatepicker
v-model="rangeValue"
select="range"
display="inline"
:controls="['calendar']"
:showRangeLabels="false"
/>
</div>
</div>
<MbscToast :message="toastMessage" :isOpen="isToastOpen" @close="handleToastClose" />
</MbscPage>
</template>
<style>
.md-range-filter .md-header {
text-align: center;
padding: 1em 0.75em 0 0.75em;
margin: 0;
}
</style><script setup lang="ts">
import {
MbscButton,
MbscDatepicker,
MbscPage,
setOptions
} from '@mobiscroll/vue'
import { ref } from 'vue'
setOptions({
locale: ,
theme: ' ',
themeVariant: ' '
})
const now = new Date()
const curr = new Date()
const yesterday = new Date(curr.getFullYear(), curr.getMonth(), curr.getDate() - 1)
const startWeek = new Date(curr.setDate(curr.getDate() - curr.getDay()))
const endWeek = new Date(curr.setDate(curr.getDate() - curr.getDay() + 6))
const startMonth = new Date(curr.getFullYear(), curr.getMonth() - 1, 1)
const endMonth = new Date(curr.getFullYear(), curr.getMonth(), 0)
const rangeValue = ref<any>(null)
const toastMessage = ref<string>('')
const isToastOpen = ref<boolean>(false)
function handleToastClose() {
isToastOpen.value = false
}
function setToday() {
rangeValue.value = [now, now]
toastMessage.value = 'Today Selected'
isToastOpen.value = true
}
function setYesterday() {
rangeValue.value = [yesterday, yesterday]
toastMessage.value = 'Yesterday Selected'
isToastOpen.value = true
}
function setThisWeek() {
rangeValue.value = [startWeek, endWeek]
toastMessage.value = 'This Week Selected'
isToastOpen.value = true
}
function setLastMonth() {
rangeValue.value = [startMonth, endMonth]
toastMessage.value = 'Last Month Selected'
isToastOpen.value = true
}
function clear() {
rangeValue.value = null
toastMessage.value = 'Clear Value'
isToastOpen.value = true
}
</script>
<template>
<MbscPage>
<div class="md-range-filter">
<h4 class="md-header">Filter Results by</h4>
<div class="mbsc-padding">
<MbscButton className="mbsc-button-block" @click="setToday">Today</MbscButton>
<MbscButton className="mbsc-button-block" @click="setYesterday">Yesterday</MbscButton>
<MbscButton className="mbsc-button-block" @click="setThisWeek">This Week</MbscButton>
<MbscButton className="mbsc-button-block" @click="setLastMonth">Last Month</MbscButton>
<MbscButton className="mbsc-button-block" @click="clear">Clear</MbscButton>
</div>
<div class="mbsc-form-group">
<div class="mbsc-form-group-title">Or by a custom range</div>
<MbscDatepicker
v-model="rangeValue"
select="range"
display="inline"
:controls="['calendar']"
:showRangeLabels="false"
/>
</div>
</div>
<MbscToast :message="toastMessage" :isOpen="isToastOpen" @close="handleToastClose" />
</MbscPage>
</template>
<style>
.md-range-filter .md-header {
text-align: center;
padding: 1em 0.75em 0 0.75em;
margin: 0;
}
</style>