Presets
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
html<button id="today">Today</button>
<div id="picker"></div>
jsvar now = new Date(),
myRange = $('#picker').mobiscroll().datepicker({
controls: ['calendar'],
select: 'range'
});
document.querySelector('#today')
.addEventListener('click', function () {
myRange.setVal([now, now]);
}); Setting yesterday
html<button id="yesterday">Yesterday</button>
<div id="picker"></div>
jsvar now = new Date(),
yesterday = new Date(now.getFullYear(), now.getMonth(), now.getDate() - 1),
myRange = $('#picker').mobiscroll().datepicker({
controls: ['calendar'],
select: 'range'
});
document.querySelector('#yesterday')
.addEventListener('click', function () {
myRange.setVal([yesterday, yesterday]);
}); Setting this week
html<button id="this-week">This week</button>
<div id="picker"></div>
jsvar now = new Date(),
firstday = new Date(now.setDate(now.getDate() - now.getDay())),
lastday = new Date(now.setDate(now.getDate() - now.getDay() + 6)),
myRange = $('#picker').mobiscroll().datepicker({
controls: ['calendar'],
select: 'range'
});
document.querySelector('#this-week')
.addEventListener('click', function () {
myRange.setVal([firstday, lastday]);
}); Setting last month
html<button id="last-month">Last month</button>
<div id="picker"></div>
jsvar now = new Date(),
firstday = new Date(now.getFullYear(), now.getMonth() - 1, 1),
lastday = new Date(now.getFullYear(), now.getMonth(), 0),
myRange = $('#picker').mobiscroll().datepicker({
controls: ['calendar'],
select: 'range'
});
document.querySelector('#last-month')
.addEventListener('click', function () {
myRange.setVal([firstday, lastday]);
}); Clear the selection with a simple click
html<button id="clear">Clear</button>
<div id="picker"></div>
jsvar inst = $('#picker').mobiscroll().datepicker({
controls: ['calendar'],
select: 'range'
});
document.querySelector('#clear')
.addEventListener('click', function () {
myRange.setVal(null);
}); JSHTMLCSS
mobiscroll.setOptions({
locale: ,
theme: ' ',
themeVariant: ' '
});
var now = new Date();
var curr = new Date();
var yesterday = new Date(now.getFullYear(), now.getMonth(), now.getDate() - 1);
var startWeek = new Date(curr.setDate(curr.getDate() - curr.getDay()));
var endWeek = new Date(curr.setDate(curr.getDate() - curr.getDay() + 6));
var startMonth = new Date(curr.getFullYear(), curr.getMonth() - 1, 1);
var endMonth = new Date(curr.getFullYear(), curr.getMonth(), 0);
var inst = mobiscroll.datepicker('#demo', {
controls: ['calendar'],
select: 'range',
display: 'inline',
showRangeLabels: false,
});
document.querySelector('.md-today').addEventListener('click', function () {
mobiscroll.toast({
message: 'Today Selected',
});
inst.setVal([now, now]);
});
document.querySelector('.md-yesterday').addEventListener('click', function () {
mobiscroll.toast({
message: 'Yesterday Selected',
});
inst.setVal([yesterday, yesterday]);
});
document.querySelector('.md-week').addEventListener('click', function () {
mobiscroll.toast({
message: 'This Week Selected',
});
inst.setVal([startWeek, endWeek]);
});
document.querySelector('.md-month').addEventListener('click', function () {
mobiscroll.toast({
message: 'Last Month Selected',
});
inst.setVal([startMonth, endMonth]);
});
document.querySelector('.md-clear').addEventListener('click', function () {
mobiscroll.toast({
message: 'Clear Value',
});
inst.setVal(null);
});
<div class="md-range-filter">
<h4 class="md-header">Filter Results by</h4>
<div class="mbsc-padding">
<button mbsc-button class="md-today mbsc-button-block">Today</button>
<button mbsc-button class="md-yesterday mbsc-button-block">Yesterday</button>
<button mbsc-button class="md-week mbsc-button-block">This Week</button>
<button mbsc-button class="md-month mbsc-button-block">Last Month</button>
<button mbsc-button class="md-clear mbsc-button-block">Clear</button>
</div>
<div class="mbsc-form-group">
<div class="mbsc-form-group-title">Or by a custom range</div>
<div id="demo"></div>
</div>
</div>
.md-range-filter .md-header {
text-align: center;
padding: 1em .75em 0 .75em;
margin: 0;
}