Skip to content
/ time-range-selector Public

jQuery UI widget for dragging over a table to select (multiple) timeranges

License

GPL-2.0 license
1 star 0 forks Branches Tags Activity
Star
Notifications You must be signed in to change notification settings

AJdeMooij/time-range-selector

BranchesTags

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

12 Commits
LICENSE
LICENSE
 
 
README.md
README.md
 
 
jquery.ui.timerangeselector.js
jquery.ui.timerangeselector.js
 
 
timerangeselector.css
timerangeselector.css
 
 

Repository files navigation

Timerange Selector (JQuery UI Widget)

Author: Jan de Mooij License: GNU GENERAL PUBLIC LICENSE Version 2, June 1991 (see LICENSE file)

jQuery UI widget for dragging over a table to select (multiple) timeranges. The widget is tied to an html div. Once the widget is initialized, it generates a table with a row for each hour and a cell for each minute interval within that hour. The user can select multiple timeranges in the table, usually for one single day.

This widget requires jQuery (version 1.11 or up) and moment.js

Make sure you load jQuery first and then moment.js Only after that should you load the widget.

HTML:

<html>
  <head>
    <!-- Load JQuery -->
    <!-- Load moments.js -->
    <link type="text/css" rel="stylesheet" href="timerange-selector-ui/timerangeselector.css"/>
    <script src="timerange-selector-ui-/jquery.ui.timerangeselector.js"></script>
  </head>
    
  <body>
    <div id="time-selector"></div>
    
    <script>
      $("time-selector").selectorTable();
    </script>
  </body>
</html>

API

Options Methods
Resolution destroy()
tableClass getTimes()
hourStart reset()
hourEnd
hourText
selected
hourFormat24

Resolution

integer ```javascript $("time-selector").selectorTable({ options: { resolution: 12 // Default } }); ``` Sets the number of cells for each row. A resolution of 6 means that each cell equals 10 minutes. For best performances, use a number that 60 is divisible by.

tableClass

String ```javascript $("time-selector").selectorTable({ options: { tableClass: '' // Default } }); ``` A string with all the classnames you want to add to your table, seperated by spaces.

hourStart

int (in range 0, 24) ```javascript $("time-selector").selectorTable({ options: { hourStart: 1 // Default } }); ``` The first hour that shows in the table. By default, the table starts at 1 am.

hourEnd

int (in range 0, 24) ```javascript $("time-selector").selectorTable({ options: { hourEnd: 24 // Default } }); ``` The last hour that shows in the table. By default, the table ends at 12 pm.

hourText

String ```javascript $("time-selector").selectorTable({ options: { hourText: '' // Default } }); ``` The table that is generated, will contain a number referring to the hour as the first cell of each row. To append a text behind this number, use the hourText option. The string provided in this option will be appended to the first cell of each row.

selected

json array ```javascript $("time-selector").selectorTable({ options: { selected: [ // Default is NULL ["08:30", "18:00"], // preselects 8:30 am to 6:00 pm ["20:00", "21:00"] // preselects 8:00 am to 9:00 pm ] } }); ``` If you want to initialize the time selector table with times already pre-selected, use the 'selected' option. As an argument, give a json string of jsonstrings, the deepest json string of which always contains two elements: the begin-time of the selected time-range and the end-time as a string. The times should be given in the HH:ii format (as you can see in the example code).

hourFormat24

boolean ```javascript $("time-selector").selectorTable({ options: { hourFormat24: true // Default } }); ``` Set this option to false if you want to use the 12-hour clock. This changes the formatting of the first cell of each row to show the time as a number from 0 to 12 with 'am' or 'pm' added.

destroy()

```javascript $( 'time-selector' ).selectorTable( 'destroy' ); ``` Removes the time-selector table from the div-element it had been attached to and returns the div to it's old state.

getTimes()

```javascript var times = $( 'time-selector' ).selectorTable( 'getTimes' ); ``` Returns a json array of arrays containing time-range begin and end pairs. All the times are returned as moment objects. The typical format of this json would be: [ [moment(starttime1), moment(endtime1)], [moment(starttime2), moment(endtime2)] ]

reset()

```javascript $( 'time-selector' ).selectorTable( 'reset' ); ``` Resets the time-selector table to its original state. This method may be invoked by a user clicking a button, to undo all the times they selected and/or re-selecting the timeranges set in the selected-option.

About

jQuery UI widget for dragging over a table to select (multiple) timeranges

Resources

Readme

License

GPL-2.0 license
Activity

Stars

1 star

Watchers

1 watching

Forks

0 forks
Report repository

Releases

No releases published

Packages

No packages published

Languages