diff --git a/index.html b/index.html
index 3a11c359..9ad74006 100644
--- a/index.html
+++ b/index.html
@@ -4,7 +4,7 @@
 ---
 
 
-<!-- Timepicker 
+<!-- Timepicker
 ================================================== -->
 <section id="timepicker">
     <div class="center hero-unit" style="margin: 0; padding: 0;">
@@ -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>
@@ -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>
@@ -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;
@@ -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>
@@ -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 />
@@ -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 />
@@ -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>
@@ -397,5 +402,3 @@ <h3>Update <small>Triggered when the date is updated</small></h3>
 <hr>
     </div>
 </section>
-
-
diff --git a/js/bootstrap-timepicker.js b/js/bootstrap-timepicker.js
index c8208bbf..dfaf452c 100644
--- a/js/bootstrap-timepicker.js
+++ b/js/bootstrap-timepicker.js
@@ -29,6 +29,7 @@
     this.template = options.template;
     this.appendWidgetTo = options.appendWidgetTo;
     this.showWidgetOnAddonClick = options.showWidgetOnAddonClick;
+    this.timeSeparator = options.timeSeparator;
 
     this._init();
   };
@@ -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>';
@@ -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 ?
@@ -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>';
@@ -1089,7 +1090,8 @@
     showMeridian: true,
     template: 'dropdown',
     appendWidgetTo: 'body',
-    showWidgetOnAddonClick: true
+    showWidgetOnAddonClick: true,
+    timeSeparator: ':'
   };
 
   $.fn.timepicker.Constructor = Timepicker;