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:

1. Simple time selection:
   options = {type: "single", format: { ..., showRelative:false } }
2. Relative time selection (eq. Now + 5 hours):
   options = {type: "single", format: { ..., showRelative:true } }
3. Time period:
   options = {type: "double", format: { ..., showRelative:false } }
4. 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.

Copyright (c) 2015 FCOO

Contact information

Niels Holt [email protected]