Skip to content

Commit 0941d17

Browse files
message
0 parents  commit 0941d17

9 files changed

+2508
-0
lines changed

.DS_Store

6 KB
Binary file not shown.

README.md

+192
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,192 @@
1+
Timepicker Plugin for jQuery
2+
========================
3+
4+
[<img src="http://jonthornton.github.com/jquery-timepicker/lib/screenshot.png" alt="timepicker screenshot" />](http://jonthornton.github.com/jquery-timepicker)
5+
6+
[See a demo and examples here](http://jonthornton.github.com/jquery-timepicker)
7+
8+
jquery.timepicker is a lightweight timepicker plugin for jQuery inspired by Google Calendar. It supports both mouse and keyboard navigation, and weighs in at 2.5kb minified and gzipped.
9+
10+
Requirements
11+
------------
12+
* [jQuery](http://jquery.com/) (>= 1.7)
13+
14+
Usage
15+
-----
16+
17+
```javascript
18+
$('.some-time-inputs').timepicker(options);
19+
```
20+
21+
```options``` is an optional javascript object with parameters explained below.
22+
23+
Options
24+
-------
25+
26+
- **className**
27+
A class name to apply to the HTML element that contains the timepicker dropdown.
28+
*default: null*
29+
30+
- **minTime**
31+
The time that should appear first in the dropdown list.
32+
*default: 12:00am*
33+
34+
- **maxTime**
35+
The time that should appear last in the dropdown list. Can be used to limit the range of time options.
36+
*default: 24 hours after minTime*
37+
38+
- **showDuration**
39+
Shows the relative time for each item in the dropdown. ```minTime``` or ```durationTime``` must be set.
40+
*default: false*
41+
42+
- **durationTime**
43+
The time against which ```showDuration``` will compute relative times.
44+
*default: minTime*
45+
46+
- **step**
47+
The amount of time, in minutes, between each item in the dropdown.
48+
*default: 30*
49+
50+
- **timeFormat**
51+
How times should be displayed in the list and input element. Uses [PHP's date() formatting syntax](http://php.net/manual/en/function.date.php).
52+
*default: 'g:ia'*
53+
54+
- **scrollDefaultNow**
55+
If no time value is selected, set the dropdown scroll position to show the current time.
56+
*default: false*
57+
58+
- **scrollDefaultTime**
59+
If no time value is selected, set the dropdown scroll position to show the time provided, e.g. "09:00".
60+
*default: false*
61+
62+
- **selectOnBlur**
63+
Update the input with the currently highlighted time value when the timepicker loses focus.
64+
*default: false*
65+
66+
- **appendTo**
67+
Override where the dropdown is appended.
68+
Takes either a `string` to use as a selector, a `function` that gets passed the clicked input element as argument or a jquery `object` to use directly.
69+
*default: "body"*
70+
71+
- **disableTouchKeyboard**
72+
Disable the onscreen keyboard for touch devices.
73+
*default: true*
74+
75+
- **closeOnWindowScroll**
76+
Close the timepicker when the window is scrolled. (Replicates ```<select>``` behavior.)
77+
*default: true*
78+
79+
- **disabledTimeRanges**
80+
Disable selection of certain time ranges. Input is an array of time pairs, like ```[['3:00am', '4:30am'], ['5:00pm', '8:00pm']]``
81+
*default: []*
82+
83+
- **lang**
84+
Language constants used in the timepicker. Can override the defaults by passing an object with one or more of the following properties: decimal, mins, hr, hrs.
85+
*default:* ```{
86+
decimal: '.',
87+
mins: 'mins',
88+
hr: 'hr',
89+
hrs: 'hrs'
90+
}```
91+
92+
93+
94+
Methods
95+
-------
96+
97+
- **getTime**
98+
Get the time using a Javascript Date object, relative to today's date.
99+
100+
```javascript
101+
$('#getTimeExample').timepicker('getTime');
102+
```
103+
104+
You can get the time as a string using jQuery's built-in ```val()``` function:
105+
106+
```javascript
107+
$('#getTimeExample').val();
108+
```
109+
110+
- **getSecondsFromMidnight**
111+
Get the time as an integer, expressed as seconds from 12am.
112+
113+
```javascript
114+
$('#getTimeExample').timepicker('getSecondsFromMidnight');
115+
```
116+
117+
- **setTime**
118+
Set the time using a Javascript Date object.
119+
120+
```javascript
121+
$('#setTimeExample').timepicker('setTime', new Date());
122+
```
123+
124+
- **option**
125+
Change the settings of an existing timepicker.
126+
127+
```javascript
128+
$('#optionExample').timepicker({ 'timeFormat': 'g:ia' });
129+
$('#optionExample').timepicker('option', 'minTime', '2:00am');
130+
$('#optionExample').timepicker('option', { 'minTime': '4:00am', 'timeFormat': 'H:i' });
131+
```
132+
133+
- **remove**
134+
Unbind an existing timepicker element.
135+
136+
```javascript
137+
$('#removeExample').timepicker('remove');
138+
```
139+
140+
Events
141+
------
142+
143+
- **showTimepicker**
144+
Called when the timepicker is shown.
145+
146+
- **hideTimepicker**
147+
Called when the timepicker is closed.
148+
149+
- **changeTime**
150+
Called when a time value is selected.
151+
152+
- **timeFormatError**
153+
Called if an unparseable time string is manually entered into the timepicker input.
154+
155+
- **timeRangeError**
156+
Called if an maxTime or minTime is set and an invalid time is manually entered into the timepicker input.
157+
158+
Theming
159+
-------
160+
161+
Sample markup with class names:
162+
163+
```html
164+
<span class="ui-timepicker-container">
165+
<input value="5:00pm" class="ui-timepicker-input" type="text">
166+
<ul class="ui-timepicker-list optional-custom-classname" tabindex="-1">
167+
<li>12:00am</li>
168+
<li>12:30am</li>
169+
...
170+
<li>4:30pm</li>
171+
<li class="ui-timepicker-selected">5:00pm</li>
172+
<li>5:30pm</li>
173+
...
174+
<li>11:30pm</li>
175+
</ul>
176+
</span>
177+
```
178+
179+
Help
180+
----
181+
182+
Submit a [GitHub Issues request](https://github.com/jonthornton/jquery-timepicker/issues/new).
183+
184+
Development guidelines
185+
----------------------
186+
187+
1. Install dependencies (jquery + grunt) `npm install`
188+
2. For sanity checks and minification run `grunt`, or just `grunt lint` to have the code linted
189+
190+
- - -
191+
192+
This software is made available under the open source MIT License. &copy; 2012 [Jon Thornton](http://www.jonthornton.com), contributions from [Anthony Fojas](https://github.com/fojas), [Vince Mi](https://github.com/vinc3m1), [Nikita Korotaev](https://github.com/websirnik), [Spoon88](https://github.com/Spoon88), [elarkin](https://github.com/elarkin), [lodewijk](https://github.com/lodewijk), [jayzawrotny](https://github.com/jayzawrotny), [David Mazza](https://github.com/dmzza), [Matt Jurik](https://github.com/exabytes18), [Phil Freo](https://github.com/philfreo), [orloffv](https://github.com/orloffv), [patdenice](https://github.com/patdenice), [Raymond Julin](https://github.com/nervetattoo), [Gavin Ballard](https://github.com/gavinballard), [Steven Schmid](https://github.com/stevschmid), [ddaanet](https://github.com/ddaanet)

css/datepicker.css

+182
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,182 @@
1+
/*!
2+
* Datepicker for Bootstrap
3+
*
4+
* Copyright 2012 Stefan Petre
5+
* Licensed under the Apache License v2.0
6+
* http://www.apache.org/licenses/LICENSE-2.0
7+
*
8+
*/
9+
.datepicker {
10+
top: 0;
11+
left: 0;
12+
padding: 4px;
13+
margin-top: 1px;
14+
-webkit-border-radius: 4px;
15+
-moz-border-radius: 4px;
16+
border-radius: 4px;
17+
/*.dow {
18+
border-top: 1px solid #ddd !important;
19+
}*/
20+
21+
}
22+
.datepicker:before {
23+
content: '';
24+
display: inline-block;
25+
border-left: 7px solid transparent;
26+
border-right: 7px solid transparent;
27+
border-bottom: 7px solid #ccc;
28+
border-bottom-color: rgba(0, 0, 0, 0.2);
29+
position: absolute;
30+
top: -7px;
31+
left: 6px;
32+
}
33+
.datepicker:after {
34+
content: '';
35+
display: inline-block;
36+
border-left: 6px solid transparent;
37+
border-right: 6px solid transparent;
38+
border-bottom: 6px solid #ffffff;
39+
position: absolute;
40+
top: -6px;
41+
left: 7px;
42+
}
43+
.datepicker > div {
44+
display: none;
45+
}
46+
.datepicker table {
47+
width: 100%;
48+
margin: 0;
49+
}
50+
.datepicker td,
51+
.datepicker th {
52+
text-align: center;
53+
width: 20px;
54+
height: 20px;
55+
-webkit-border-radius: 4px;
56+
-moz-border-radius: 4px;
57+
border-radius: 4px;
58+
}
59+
.datepicker td.day:hover {
60+
background: #eeeeee;
61+
cursor: pointer;
62+
}
63+
.datepicker td.day.disabled {
64+
color: #eeeeee;
65+
}
66+
.datepicker td.old,
67+
.datepicker td.new {
68+
color: #999999;
69+
}
70+
.datepicker td.active,
71+
.datepicker td.active:hover {
72+
color: #ffffff;
73+
background-color: #006dcc;
74+
background-image: -moz-linear-gradient(top, #0088cc, #0044cc);
75+
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#0088cc), to(#0044cc));
76+
background-image: -webkit-linear-gradient(top, #0088cc, #0044cc);
77+
background-image: -o-linear-gradient(top, #0088cc, #0044cc);
78+
background-image: linear-gradient(to bottom, #0088cc, #0044cc);
79+
background-repeat: repeat-x;
80+
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff0088cc', endColorstr='#ff0044cc', GradientType=0);
81+
border-color: #0044cc #0044cc #002a80;
82+
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
83+
*background-color: #0044cc;
84+
/* Darken IE7 buttons by default so they stand out more given they won't have borders */
85+
86+
filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
87+
color: #fff;
88+
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
89+
}
90+
.datepicker td.active:hover,
91+
.datepicker td.active:hover:hover,
92+
.datepicker td.active:focus,
93+
.datepicker td.active:hover:focus,
94+
.datepicker td.active:active,
95+
.datepicker td.active:hover:active,
96+
.datepicker td.active.active,
97+
.datepicker td.active:hover.active,
98+
.datepicker td.active.disabled,
99+
.datepicker td.active:hover.disabled,
100+
.datepicker td.active[disabled],
101+
.datepicker td.active:hover[disabled] {
102+
color: #ffffff;
103+
background-color: #0044cc;
104+
*background-color: #003bb3;
105+
}
106+
.datepicker td.active:active,
107+
.datepicker td.active:hover:active,
108+
.datepicker td.active.active,
109+
.datepicker td.active:hover.active {
110+
background-color: #003399 \9;
111+
}
112+
.datepicker td span {
113+
display: block;
114+
width: 47px;
115+
height: 54px;
116+
line-height: 54px;
117+
float: left;
118+
margin: 2px;
119+
cursor: pointer;
120+
-webkit-border-radius: 4px;
121+
-moz-border-radius: 4px;
122+
border-radius: 4px;
123+
}
124+
.datepicker td span:hover {
125+
background: #eeeeee;
126+
}
127+
.datepicker td span.active {
128+
color: #ffffff;
129+
background-color: #006dcc;
130+
background-image: -moz-linear-gradient(top, #0088cc, #0044cc);
131+
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#0088cc), to(#0044cc));
132+
background-image: -webkit-linear-gradient(top, #0088cc, #0044cc);
133+
background-image: -o-linear-gradient(top, #0088cc, #0044cc);
134+
background-image: linear-gradient(to bottom, #0088cc, #0044cc);
135+
background-repeat: repeat-x;
136+
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff0088cc', endColorstr='#ff0044cc', GradientType=0);
137+
border-color: #0044cc #0044cc #002a80;
138+
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
139+
*background-color: #0044cc;
140+
/* Darken IE7 buttons by default so they stand out more given they won't have borders */
141+
142+
filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
143+
color: #fff;
144+
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
145+
}
146+
.datepicker td span.active:hover,
147+
.datepicker td span.active:focus,
148+
.datepicker td span.active:active,
149+
.datepicker td span.active.active,
150+
.datepicker td span.active.disabled,
151+
.datepicker td span.active[disabled] {
152+
color: #ffffff;
153+
background-color: #0044cc;
154+
*background-color: #003bb3;
155+
}
156+
.datepicker td span.active:active,
157+
.datepicker td span.active.active {
158+
background-color: #003399 \9;
159+
}
160+
.datepicker td span.old {
161+
color: #999999;
162+
}
163+
.datepicker th.switch {
164+
width: 145px;
165+
}
166+
.datepicker th.next,
167+
.datepicker th.prev {
168+
font-size: 21px;
169+
}
170+
.datepicker thead tr:first-child th {
171+
cursor: pointer;
172+
}
173+
.datepicker thead tr:first-child th:hover {
174+
background: #eeeeee;
175+
}
176+
.input-append.date .add-on i,
177+
.input-prepend.date .add-on i {
178+
display: block;
179+
cursor: pointer;
180+
width: 16px;
181+
height: 16px;
182+
}

0 commit comments

Comments
 (0)