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.

Responsive image

Code

Action

new UTILS.Daterange({ target: $('#example1a'), value: '03/30/2024 - 04/13/2024' }).enable(); //
Default settings on a SPAN
new UTILS.Daterange({ target: $('#example1b'), date_format: 'MM-DD-YYYY' }).enable(); //
Default settings on an INPUT
  1. date_format is MM-DD-YYYY
new UTILS.Daterange({ target: $('#example1c'), date_format: 'DD/MM/YYYY', language: 'de', value: '29/03/2024 - 29/05/2024' }).enable();
Change the language to German
  1. language is de
  2. date_format is DD/MM/YYYY
new UTILS.Daterange({ target: $('#example1d'), start_date: moment().add(1,'day').format('MM/DD/YYYY'), value: '03/30/2024 - 04/13/2024' }).enable();
Only future dates allowed
  1. start_date is after 03/30/2024
new UTILS.Daterange({ target: $('#example1e'), min_days: 3, max_days: 7, value: '03/30/2024 - 04/03/2024' }).enable();
Limit selection between 3 to 7 days
  1. min_days is 3
  2. max_days is 7
new UTILS.Daterange({ target: $('#example2e'), min_months: 4, max_months: 6, min_view_mode: 'months', value: '04/29/2024 - 05/29/2024' }).enable();
Limit selection between 4 to 6 months
  1. min_months is 4
  2. max_months is 6
new UTILS.Daterange({ target: $('#example1f'), start_date: '03/30/2024', end_date: '05/18/2024', value: '04/18/2024 - 04/28/2024' }).enable();
Limit selection between 03/30/2024 and 05/18/2024
  1. start_date is after 03/30/2024
  2. end_date is before 05/18/2024
new UTILS.Daterange({ target: $('#example1g'), start_of_week: 'monday', value: '03/30/2024 - 04/13/2024' }).enable();
Set start of week to Monday
  1. start_of_week is 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
  1. show_shortcuts is true
  2. shortcuts is an array of name/method pairs
new UTILS.Daterange({ target: $('#example1i'), value: '03/30/2024 - 04/13/2024', custom_methods_override: { name: 'customDateHtml', method: function(date){ let day = moment(date).date(); //day of month return `
${day}
$${Math.round(Math.random()*999)}
`; } } }).enable();
Custom content in the calendar
new UTILS.Daterange({ target: $('#example1j'), value: '03/30/2024 - 04/13/2024', 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: '04/13/2024' }).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: '03/30/2024 - 04/13/2024', 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: '03/30/2024 - 04/13/2024', 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: 'Mar 2024 - Mar 2026' }).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: 'Mar 2024 - Mar 2026' }).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: 'Nov 2023 - Feb 2024' }).enable();
Months-only mode ( passed months only )
new UTILS.Daterange({ target: $('#example1r'), date_format: 'MMM YYYY', min_view_mode: 'months', sticky: true, value: 'Apr 2024 - Mar 2025' }).enable();
Months-only mode (sticky)
new UTILS.Daterange({ target: $('#example1s'), date_format: 'YYYY', min_view_mode: 'years', value: '2024 - 2039' }).enable();
Years-only mode
new UTILS.Daterange({ target: $('#example1t'), date_format: 'YYYY', min_view_mode: 'years', sticky: true, value: '2024 - 2039' }).enable();
Years-only mode (sticky)
new UTILS.Daterange({ target: $('#example1u'), select_forward: true, value: '03/30/2024 - 04/13/2024' }).enable();
Select future dates only
new UTILS.Daterange({ target: $('#example1v'), select_backward: true, value: '03/14/2024 - 03/28/2024' }).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)
Loading resources, please wait...