jquery-time-slider

Description

A extension to jquery-base-slider with selection of time and date

A plugin to create sliders with selection of time. There are four different types:

There are four different types:

Simple time selection:
options = {type: "single", format: { ..., showRelative:false } }
Relative time selection (eq. Now + 5 hours):
options = {type: "single", format: { ..., showRelative:true } }
Time period:
options = {type: "double", format: { ..., showRelative:false } }
Relative time period (eq. Now - 3 hours to Now + 10 hours):
options = {type: "double", format: { ..., showRelative:true } }

Installation

bower

bower install https://github.com/FCOO/jquery-time-slider.git --save

Demo

http://FCOO.github.io/jquery-time-slider/demo/

Usage

$('#timeSliderId').timeSlider( options )

where options are described below

options

The options are the same as in jquery-base-slider with the following extensions

{   minMoment :...,   maxMoment :...,    fromMoment:...,   toMoment  :...,   valueMoment  :...,   display: { 	value: {...}, 	from: {...}, 	to  : {...}   },	   format: {...},   text  : {...} }

Option	Defaults	Type	Description
`minMoment` `maxMoment` `fromMoment` `toMoment`		`moment-object`	Same as min, max, from, to in `jquery-base-slider` but as moment-object
`display.value` `display.from` `display.to`	`null`	`JSON-object`	Contains tree entries `tzElement, utcElement, relativeElement` and contains a element or a jquery search-string to the elements that would be updated with the selected moment as a string in the different 'modes': selected timezone, utc and relative
`format.date`	`"DMY"`	`string`	Date format. `"DMY"` or `"MDY"` or `"YMD"`
`format.time`	`"24"`	`string`	Time format. `"12"` or `"24"`
`format.timezone`	`"local"`	`string`	`"local"` or `"utc"` or abbreviation of time zone. Only if `showRelative: false`
`format.showUTC`	`false`	`boolean`	When true a scale for utc is also shown.Only if `showRelative: false`
`format.text`	`{hourAbbr:"h",` `minAbbr:'m'` `now:'now',` `to:'to'}`	Text used to format the date
`format.showRelative`	`false`	`boolean`	If `true` the grid shows relative time and date instead of absolute

Methods

.setFormat( format ); //Update the slider with the new format

Copyright and License

This plugin is licensed under the MIT license.

Contact information

Niels Holt [email protected]

jQuery Time Slider : Selection of Time and Date