utils.timerange.js
Infinite scrolling while loading paginated content. Timerange incorporates a 3rd party library noUiSlider.js.
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: '06/08/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: '06/08/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: '06/08/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: '06-08-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: '08/06/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
|
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
|
| 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:'06/08/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
|