utils.daterange.js
A simple way to select a date range (days, months, years). Originally inspired by daterangepicker.js by Chunlong Liu, but unfortunately some needed features such as months-only/years-only selection were not available. That prompted the development of utils.daterange.js utility.
Code |
Action |
|---|---|
new UTILS.Daterange({
target: $('#example1a'),
value: '09/28/2023 - 10/12/2023'
}).enable();
//
|
Default settings on a SPAN |
new UTILS.Daterange({
target: $('#example1b'),
date_format: 'MM-DD-YYYY'
}).enable();
//
|
Default settings on an INPUT
|
new UTILS.Daterange({
target: $('#example1c'),
date_format: 'DD/MM/YYYY',
language: 'de',
value: '27/09/2023 - 27/11/2023'
}).enable();
|
Change the language to German
|
new UTILS.Daterange({
target: $('#example1d'),
start_date: moment().add(1,'day').format('MM/DD/YYYY'),
value: '09/28/2023 - 10/12/2023'
}).enable();
|
Only future dates allowed
|
new UTILS.Daterange({
target: $('#example1e'),
min_days: 3,
max_days: 7,
value: '09/28/2023 - 10/02/2023'
}).enable();
|
Limit selection between 3 to 7 days
|
new UTILS.Daterange({
target: $('#example2e'),
min_months: 4,
max_months: 6,
min_view_mode: 'months',
value: '10/27/2023 - 11/27/2023'
}).enable();
|
Limit selection between 4 to 6 months
|
new UTILS.Daterange({
target: $('#example1f'),
start_date: '09/28/2023',
end_date: '11/16/2023',
value: '10/17/2023 - 10/27/2023'
}).enable();
|
Limit selection between 09/28/2023 and 11/16/2023
|
new UTILS.Daterange({
target: $('#example1g'),
start_of_week: 'monday',
value: '09/28/2023 - 10/12/2023'
}).enable();
|
Set start of week to Monday
|
new UTILS.Daterange({
target: $('#example1h'),
show_topbar: true,
show_shortcuts: true,
shortcuts: [{
name: 'Last 3 days',
method: Daterange => {
return {
start: moment().add(-3,'days').startOf('day').toDate(),
end: moment().add(-1,'days').endOf('day').toDate()
}
}
},
{
name: 'Last 5 days',
method: Daterange => {
return {
start: moment().add(-5,'days').startOf('day').toDate(),
end: moment().add(-1,'days').endOf('day').toDate()
}
}
},
{
name: 'Last week',
method: Daterange => {
let start_of = Daterange.isIsoWeek() ? 'isoWeek' : 'week';
return {
start: moment().add(-1,'weeks').startOf(start_of).toDate(),
end: moment().add(-1,'weeks').endOf(start_of).toDate()
}
}
}]
}).enable();
|
Shortcuts for previous day ranges
|
new UTILS.Daterange({
target: $('#example1i'),
value: '09/28/2023 - 10/12/2023',
custom_methods_override: {
name: 'customDateHtml',
method: function(date){
let day = moment(date).date(); //day of month
return `
|
Custom content in the calendar |
new UTILS.Daterange({
target: $('#example1j'),
value: '09/28/2023 - 10/12/2023',
custom_methods_override: {
name: 'hoveringTooltip',
method: function(date){
return '';
}
}
}).enable();
|
Disable toolip during selection |
new UTILS.Daterange({
target: $('#example1k'),
show_topbar: true,
custom_topbar: 'Please select the dates',
auto_close: true //hide the apply button and auto-close on selection
}).enable();
|
Custom topbar |
new UTILS.Daterange({
target: $('#example1l'),
show_shortcuts: true,
shortcuts: [{
name: 'MTD',
method: Daterange => {
return 'Month To Date';
}
},
{
name: 'YTD',
method: Daterange => {
return 'Year To Date';
}
}]
}).enable();
|
Custom shortcut values |
//css
.custom-shortcut-control {
margin-left: auto !important; /* need to align the button to the right */
color: #fff !important;
text-decoration: none !important;
}
//js
new UTILS.Daterange({
target: $('#example2l'),
onStartSelected: (Daterange,options) => {
Daterange.getElm().find('.custom-shortcut-control').removeClass('disabled');
},
onEndSelected: (Daterange,options) => {
Daterange.getElm().find('.custom-shortcut-control').addClass('disabled');
},
show_shortcuts: true,
shortcuts: [{
name: 'To Present',
css: 'btn btn-sm btn-primary custom-shortcut-control disabled',
method: Daterange => {
return {
start: Daterange.getStart(),
end: 'Present'
};
}
}]
}).enable();
|
Shortcut that appears only after first date is selected |
new UTILS.Daterange({
target: $('#example1m'),
show_shortcuts: false,
auto_close: true,
single_date: true,
value: '10/12/2023'
}).enable();
|
Single date |
new UTILS.Daterange({
target: $('#example1n'),
batch_mode: 'week',
show_topbar: true
}).enable();
|
Batch mode (week) |
new UTILS.Daterange({
target: $('#example1o'),
batch_mode: 'week-range',
show_topbar: true
}).enable();
|
Batch mode (week-range) |
new UTILS.Daterange({
target: $('#example1p'),
value: '09/28/2023 - 10/12/2023',
custom_methods_override: {
name: 'customDateFilter',
method: function(date, view){
//disable saturday and sunday
return /^days$/.test(view) ? !/0|6/.test(date.getDay()) : true;
}
}
}).enable();
|
Disable saturdays and sundays |
new UTILS.Daterange({
target: $('#example1pp'),
value: '09/28/2023 - 10/12/2023',
sticky: true
}).enable();
|
Regular mode, sticky months |
new UTILS.Daterange({
target: $('#example1q'),
date_format: 'MMM YYYY',
start_date: null, //allow passed dates
min_view_mode: 'months',
value: 'Sep 2023 - Sep 2025'
}).enable();
|
Months-only mode ( no restrictions ) |
new UTILS.Daterange({
target: $('#example2q'),
date_format: 'MMM YYYY',
start_date: new Date(), //only future dates
min_view_mode: 'months',
value: 'Sep 2023 - Sep 2025'
}).enable();
|
Months-only mode ( future dates only ) |
new UTILS.Daterange({
target: $('#example3q'),
date_format: 'MMM YYYY',
end_date: moment().add(-1,'month').toDate(), //only passed months
min_view_mode: 'months',
value: 'May 2023 - Aug 2023'
}).enable();
|
Months-only mode ( passed months only ) |
new UTILS.Daterange({
target: $('#example1r'),
date_format: 'MMM YYYY',
min_view_mode: 'months',
sticky: true,
value: 'Oct 2023 - Sep 2024'
}).enable();
|
Months-only mode (sticky) |
new UTILS.Daterange({
target: $('#example1s'),
date_format: 'YYYY',
min_view_mode: 'years',
value: '2023 - 2038'
}).enable();
|
Years-only mode |
new UTILS.Daterange({
target: $('#example1t'),
date_format: 'YYYY',
min_view_mode: 'years',
sticky: true,
value: '2023 - 2038'
}).enable();
|
Years-only mode (sticky) |
new UTILS.Daterange({
target: $('#example1u'),
select_forward: true,
value: '09/28/2023 - 10/12/2023'
}).enable();
|
Select future dates only |
new UTILS.Daterange({
target: $('#example1v'),
select_backward: true,
value: '09/12/2023 - 09/26/2023'
}).enable();
|
Select passed dates only |
API
Option |
Required |
Default |
Description |
|---|---|---|---|
| target | required | null |
DOM that will be used by the Daterange element |
| date_format | optional | 'MM/DD/YYYY' |
date format used to display the date |
| auto_close | optional | false |
Setting to automatically close the picker once the range is selected |
| separator | optional | ' - ' |
separator to be displayed inbetween the two dates |
| language | optional | 'en' |
defaults to English language |
| start_of_week | optional | 'sunday' |
start of the week |
| start_date | optional | false |
dates prior to the date set will be disabled |
| end_date | optional | false |
dates after the date set will be disabled |
| min_days | optional | 0 |
minumum number of days that can be selected |
| max_days | optional | 0 |
maximum number of days that can be selected |
| show_shortcuts | optional | false |
whether or not to show the shortcuts at the bottom of the picker |
| shortcuts | optional | [] |
array holding all shortcuts to be displayed |
| container | optional | $('body') |
parent DOM where the picker will be appended to |
| single_date | optional | false |
when true, the date selection will be reduced to one date |
| look_behind | optional | false |
display the calendars starting with previous month |
| batch_mode | optional | false |
auto batch select mode false (default), week, month, week-range, month-range |
| look_behind | optional | false |
display the calendars starting with previous month |
| sticky | optional | false |
If true, there will only be one previous and one next button. Clicking them will change both the months. This setting will have no effect if singleDate option is set to true |
| select_forward | optional | false |
force the selecton to future dates only |
| select_backward | optional | false |
force the selection to passed dates only |
| show_topbar | optional | false |
display the header with date selection in the picker |
| show_week_numbers | optional | false |
display the week numbers |
| min_view_mode | optional | 'days' |
minimum view that will be displayed for the end selection Other options are months and years |
| value | optional | '' |
initial date value that the picker will be set to |
| custom_methods_override | optional | {} |
any method used by the picker instance can be overridden by a custom method specified here custom_methods_override: {
name: 'customDateFilter',
method: function(date){
return !/0|6/.test(date.getDay()); //disable saturday and sunday
}
}
|
| is_editable_usage | optional | false |
set to true if used by UTILS.Editable |
Methods
Method |
Default |
Repeat |
Description |
|---|---|---|---|
| onShow | null |
REPEAT | Triggered when the picker is about to be shown |
| onShown | null |
REPEAT | Triggered when the picker is shown |
| onHide | null |
REPEAT | Triggered when the picker is about to be hidden |
| onHidden | null |
REPEAT | Triggered when the picker is hidden |
| onStartSelected | null |
REPEAT | Triggered when the start date is selected |
| onEndSelected | null |
REPEAT | Triggered when the end date is selected |
| onApply | null |
REPEAT | Triggered every time the apply button is clicked |
| onDateChanged | null |
REPEAT | Triggered every time before the value is changed (both start & end values must be set) |