utils.timerange.js

Infinite scrolling while loading paginated content. Timerange incorporates a 3rd party library noUiSlider.js.

Responsive image

Code

Action

new UTILS.Timerange({ target: $('#timerange-1'), options: { min: 360, //6am max: 1080, //6pm step: 15, //every quarter date_editable: false, date_format: 'MM/DD/YYYY' }, date: '11/28/2023', onStop: function (){ $results.html('stopped'); setTimeout(() => $results.html(''), 1000); } }).show();

new UTILS.Timerange({ target: $('#timerange-2'), options: { min: 360, //6am max: 1080, //6pm step: 30, //every half hour date_editable: true, date_format: 'MM/DD/YYYY' }, date: '11/28/2023' }).show();

new UTILS.Timerange({ target: $('#timerange-3'), options: { min: 360, //6am max: 1080, //6pm step: 60, //every hour date_editable: true, allow_past_dates: true, //defaults to false date_format: 'MM/DD/YYYY' }, date: '11/28/2023' }).show();

new UTILS.Timerange({ target: $('#timerange-4'), options: { min: 360, //6am max: 1080, //6pm step: 60, //every hour date_format: 'MM-DD-YYYY' }, range: { start: 660, //11am end: 900 //3pm }, date: '11-28-2023' }).show();

new UTILS.Timerange({ target: $('#timerange-5'), options: { min: 360, //6am max: 1080, //6pm step: 30, //every 30 mins date_format: 'DD/MM/YYYY', //european time_format: 'H:mm', //24 hr time_label_format: 'H:mm' //24 hr }, date: '28/11/2023' }).show();

timerange6 = new UTILS.Timerange({ target: $('#timerange-6'), options: { min: 600, //10am max: 960 //4pm } }).show().disable();

API

Option

Required

Default

Description

target required $('body')

DOM elm where the timerange will be inserted

options optional { min: 0, //12am max: 1440, //11:59pm step: 15, //every 15 mins date_editable: true, //allows to change the date allow_past_dates: false, //allows to select past dates time_format: 'h:mm A', //3:00 AM time_label_format: 'h A', //3 AM date_format: 'MM/DD/YYYY' //04/15/2018 }

Configuration options that will allow you to customize the timerange to your specs

range optional { start: 540, //9am end: 960 //4pm }

Start and end time of the selected interval

date optional moment()

The date can take on 3 different formats

  1. moment object
  2. string but it will be parsed according to date_format
  3. null in that case moment object will be set

Events

Method

Default

Repeat

Description

onShow null repeat Triggered when timerange is shown
onHide null repeat Triggered when timerange is hidden
onStart null repeat Triggered when the slider starts moving
onStop null repeat Triggered when the slider stops moving
onSlide null repeat Triggered when the slider is moving ( on every snap )

Methods

Method

Code

clean() timerange.clean(); //remove DOM object
enable() timerange.enable(); //enable timerange
disable() timerange.disable(); //disable timerange
isShown() timerange.isShown(); //=> true/false - whether the timerange is shown
isDateEditable() timerange.isDateEditable(); //=> true/false - whether the date is editable
setDateEditableState() timerange.setDateEditableState(true); //sets the date editable state
getDate() timerange.getDate(); //=> moment object
setDate() timerange.setDate(date); //sets the date

The date can take on 3 different formats

  1. moment object
  2. string but it will be parsed according to date_format
  3. null in that case moment object will be set
isAllowPassedDates() timerange.isAllowPassedDates(); //=> true/false - whether passed dates are allowed
setAllowPassedDates() timerange.setAllowPassedDates(true); //sets the flag to allow /not passed dates
getDateFormat() timerange.getDateFormat(); //=> true/false - date format
setDateFormat() timerange.setDateFormat('MM/DD/YYYY'); //sets the date format
getTimeFormat() timerange.getTimeFormat(); //=> 'h:mm A' - time format
setTimeFormat() timerange.setTimeFormat('hh:mm'); //sets the time format
getTimeLabelFormat() timerange.getTimeLabelFormat(); //=> label time format
setTimeLabelFormat() timerange.setTimeLabelFormat('h A'); //sets the label time format
getWrapper() timerange.getWrapper(); //=>
...
updateDateDisplay() timerange.updateDateDisplay(); //updates the date display values with current date
updateTimeDisplay() timerange.updateTimeDisplay(); //updates the time display wiht current time
getOptions() timerange.getOptions(); //=> both, internal & noUiSlider settings
setOptions() timerange.setOptions({ min: 360, //6am max: 1080, //6pm step: 30, //every 30 mins date_format: 'DD/MM/YYYY', //european time_format: 'H:mm', //24 hr time_label_format: 'H:mm' //24 hr });
getTimeRange() timerange.getTimeRange(); //=> { start:540, end:960 }
getFormattedTimeRange() timerange.getFormattedTimeRange(); //=> { start:'9:00 AM', end:'4:00 PM' }
getDateTimeRange() timerange.getDateTimeRange(); //=> { start:540, end:960, date:moment }
getFormattedDateTimeRange() timerange.getFormattedDateTimeRange(); //=> { start:'9:00 AM', end:'4:00 PM', date:'11/28/2023' }
getDateTimeRangeAsMoment() timerange.getDateTimeRangeAsMoment(); //=> { start:moment, end:moment }
setTimeRange() timerange.setTimeRange({ start:540, end:960 }); //sets the time range
show() timerange.show(); //shows the timerange
hide() timerange.hide(); //hides the timerange
Loading resources, please wait...