Skip to content

Timeseperator #241

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
danielgroves wants to merge 3 commits into from
Closed

Timeseperator #241

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
39e0b90
Adds support time separator config
Oct 22, 2014
0f00c9e
Sets default separator
Oct 22, 2014
73a4b45
Docs update
Oct 22, 2014
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
23 changes: 13 additions & 10 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
---


<!-- Timepicker
<!-- Timepicker
================================================== -->
<section id="timepicker">
<div class="center hero-unit" style="margin: 0; padding: 0;">
Expand Down Expand Up @@ -43,7 +43,7 @@ <h1>Installation</h1>
<hr>
<h1>Demos</h1>
<hr>
<p>Default timepicker. Value = (<span id="timeDisplay"></span>)</p>
<p>Default timepicker. Value = (<span id="timeDisplay"></span>)</p>
<div class="input-append bootstrap-timepicker">
<input id="timepicker1" class="input-small" type="text"/><span class="add-on"><i class="icon-time"></i></span>
</div>
Expand Down Expand Up @@ -154,7 +154,7 @@ <h1>Demos</h1>
</div>
<hr class="soften">
<p>Inside a modal with backdrop enabled, inputs disabled and with a preset value.</p>
<div id="timepicker4Modal" class="modal hide fade">
<div id="timepicker4Modal" class="modal hide fade">
<div class="modal-header">
<h1>A Timepicker Inside A Modal</h1>
</div>
Expand Down Expand Up @@ -186,9 +186,9 @@ <h1>A Timepicker Inside A Modal</h1>
&lt;script type="text/javascript" src="js/bootstrap-timepicker.min.js"&gt;&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;div&gt; class="modal hide fade"&gt;
&lt;div&gt; class="modal hide fade"&gt;
&lt;div class="modal-header"&gt;
&lt;h1&gt;Timepicker inside a modal&lt;/h1&gt;
&lt;h1&gt;Timepicker inside a modal&lt;/h1&gt;
&lt;/div&gt;
&lt;div class="modal-body"&gt;
&lt;div class="bootstrap-timepicker"&gt;
Expand Down Expand Up @@ -267,7 +267,7 @@ <h3>template <small>The picker widget template</small></h3>
<tr>
<td>template</td>
<td>
'dropdown' (default)<hr />
'dropdown' (default)<hr />
'modal' <hr />
false
</td>
Expand Down Expand Up @@ -309,7 +309,7 @@ <h3>template <small>The picker widget template</small></h3>
<td>showMeridian</td>
<td>
true (default) <hr />
false
false
</td>
<td>
12hr mode<hr />
Expand All @@ -320,7 +320,7 @@ <h3>template <small>The picker widget template</small></h3>
<td>showInputs</td>
<td>
true (default) <hr />
false
false
</td>
<td>
Shows the text inputs in the widget. <hr />
Expand All @@ -342,6 +342,11 @@ <h3>template <small>The picker widget template</small></h3>
<td>false</td>
<td>Show modal backdrop.</td>
</tr>
<tr>
<td>timeSeparator</td>
<td>':'</td>
<td>Sets the string to be used between the time inputs.</td>
</tr>
</tbody>
</table>
</div>
Expand Down Expand Up @@ -397,5 +402,3 @@ <h3>Update <small>Triggered when the date is updated</small></h3>
<hr>
</div>
</section>


32 changes: 17 additions & 15 deletions js/bootstrap-timepicker.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,6 +29,7 @@
this.template = options.template;
this.appendWidgetTo = options.appendWidgetTo;
this.showWidgetOnAddonClick = options.showWidgetOnAddonClick;
this.timeSeparator = options.timeSeparator;

this._init();
};
Expand Down Expand Up @@ -242,10 +243,10 @@
templateContent;

if (this.showInputs) {
hourTemplate = '<input type="text" class="bootstrap-timepicker-hour" maxlength="2"/>';
minuteTemplate = '<input type="text" class="bootstrap-timepicker-minute" maxlength="2"/>';
secondTemplate = '<input type="text" class="bootstrap-timepicker-second" maxlength="2"/>';
meridianTemplate = '<input type="text" class="bootstrap-timepicker-meridian" maxlength="2"/>';
hourTemplate = '<input type="text" name="hour" class="bootstrap-timepicker-hour form-control" maxlength="2"/>';
minuteTemplate = '<input type="text" name="minute" class="bootstrap-timepicker-minute form-control" maxlength="2"/>';
secondTemplate = '<input type="text" name="second" class="bootstrap-timepicker-second form-control" maxlength="2"/>';
meridianTemplate = '<input type="text" name="meridian" class="bootstrap-timepicker-meridian form-control" maxlength="2"/>';
} else {
hourTemplate = '<span class="bootstrap-timepicker-hour"></span>';
minuteTemplate = '<span class="bootstrap-timepicker-minute"></span>';
Expand All @@ -255,24 +256,24 @@

templateContent = '<table>'+
'<tr>'+
'<td><a href="#" data-action="incrementHour"><i class="icon-chevron-up"></i></a></td>'+
'<td><a href="#" data-action="incrementHour"><i class="' + this.upArrowStyle + '"></i></a></td>'+
'<td class="separator">&nbsp;</td>'+
'<td><a href="#" data-action="incrementMinute"><i class="icon-chevron-up"></i></a></td>'+
'<td><a href="#" data-action="incrementMinute"><i class="' + this.upArrowStyle + '"></i></a></td>'+
(this.showSeconds ?
'<td class="separator">&nbsp;</td>'+
'<td><a href="#" data-action="incrementSecond"><i class="icon-chevron-up"></i></a></td>'
'<td><a href="#" data-action="incrementSecond"><i class="' + this.upArrowStyle + '"></i></a></td>'
: '') +
(this.showMeridian ?
'<td class="separator">&nbsp;</td>'+
'<td class="meridian-column"><a href="#" data-action="toggleMeridian"><i class="icon-chevron-up"></i></a></td>'
'<td class="meridian-column"><a href="#" data-action="toggleMeridian"><i class="' + this.upArrowStyle + '"></i></a></td>'
: '') +
'</tr>'+
'<tr>'+
'<td>'+ hourTemplate +'</td> '+
'<td class="separator">:</td>'+
'<td class="separator">' + this.timeSeparator + '</td>'+
'<td>'+ minuteTemplate +'</td> '+
(this.showSeconds ?
'<td class="separator">:</td>'+
'<td class="separator">' + this.timeSeparator + '</td>'+
'<td>'+ secondTemplate +'</td>'
: '') +
(this.showMeridian ?
Expand All @@ -281,16 +282,16 @@
: '') +
'</tr>'+
'<tr>'+
'<td><a href="#" data-action="decrementHour"><i class="icon-chevron-down"></i></a></td>'+
'<td><a href="#" data-action="decrementHour"><i class="' + this.downArrowStyle + '"></i></a></td>'+
'<td class="separator"></td>'+
'<td><a href="#" data-action="decrementMinute"><i class="icon-chevron-down"></i></a></td>'+
'<td><a href="#" data-action="decrementMinute"><i class="' + this.downArrowStyle + '"></i></a></td>'+
(this.showSeconds ?
'<td class="separator">&nbsp;</td>'+
'<td><a href="#" data-action="decrementSecond"><i class="icon-chevron-down"></i></a></td>'
'<td><a href="#" data-action="decrementSecond"><i class="' + this.downArrowStyle + '"></i></a></td>'
: '') +
(this.showMeridian ?
'<td class="separator">&nbsp;</td>'+
'<td><a href="#" data-action="toggleMeridian"><i class="icon-chevron-down"></i></a></td>'
'<td><a href="#" data-action="toggleMeridian"><i class="' + this.downArrowStyle + '"></i></a></td>'
: '') +
'</tr>'+
'</table>';
Expand Down Expand Up @@ -1089,7 +1090,8 @@
showMeridian: true,
template: 'dropdown',
appendWidgetTo: 'body',
showWidgetOnAddonClick: true
showWidgetOnAddonClick: true,
timeSeparator: ':'
};

$.fn.timepicker.Constructor = Timepicker;
Expand Down