BS3: removed bootstrap-timepicker in favor of universal bootstrap-datetimepicker.

app/assets/javascripts/application.js

@@ -16,5 +16,4 @@
 //= require utils
 //= require moment
 //= require bootstrap-datetimepicker
-//= require bootstrap-timepicker
 //= require jquery-date-format

app/assets/javascripts/time_entries.js

@@ -1,14 +1,18 @@
 $(document).ready(function () {
 
-  $("#date_id").datetimepicker({format: 'MM/DD/YYYY'})
+    var $date_input = $("#date_id");
+    $date_input.datetimepicker({format: $date_input.data("format")});
 
-  $("#start_time_id").timepicker();
+    var $start_time_input = $("#start_time_id");
-  $("#end_time_id").timepicker();
+    var $end_time_input = $("#end_time_id");
+    [$start_time_input, $end_time_input].forEach(function($x) {
+        $x.datetimepicker({format: $x.data("format"), stepping: 15});
+    })
 
     $("#add_time_entry_submit").click(function () {
-    date = $("#date_id").val();
+        date = $date_input.val();
-    start_date = new Date(date + " " + $("#start_time_id").val());
+        start_date = new Date(date + " " + $start_time_input.val());
-    end_date = new Date(date + " " + $("#end_time_id").val());
+        end_date = new Date(date + " " + $end_time_input.val());
 
         forward = $("#add_time_entry_submit").data("forward");
 
@@ -23,13 +27,15 @@ $(document).ready(function(){
         // how to get Netzke to render UTC dates correctly (it calls to_json
         // somewhere and drops off the timezone).  For the time being, save dates
         // in locale like Netzke.
-    json_data = { time_entries: [{
+        json_data = {
+            time_entries: [{
                 start_date: $.format.date(start_date, "dd-MM-yyyy hh:mm a"),
                 end_date: $.format.date(end_date, "dd-MM-yyyy hh:mm a"),
                 log_action_id: parseInt($('input[name=action_id]:checked').val()),
                 bike_id: bike_id,
                 description: $("#description_id").val(),
-      }]};
+            }]
+        };
 
         $.ajax({
             url: $("#add_time_entry_submit").data("url"),

app/assets/stylesheets/application.scss

@@ -1,4 +1,3 @@
 @import "bootstrap";
 @import "bootstrap-datetimepicker";
-@import "bootstrap-timepicker";
 @import "frontend";

app/assets/stylesheets/bootstrap-timepicker.css

@@ -1,146 +0,0 @@
-/*!
- * Timepicker Component for Twitter Bootstrap
- *
- * Copyright 2013 Joris de Wit
- *
- * Contributors https://github.com/jdewit/bootstrap-timepicker/graphs/contributors
- *
- * For the full copyright and license information, please view the LICENSE
- * file that was distributed with this source code.
- */
-.bootstrap-timepicker {
-  position: relative;
-}
-.bootstrap-timepicker.pull-right .bootstrap-timepicker-widget.dropdown-menu {
-  left: auto;
-  right: 0;
-}
-.bootstrap-timepicker.pull-right .bootstrap-timepicker-widget.dropdown-menu:before {
-  left: auto;
-  right: 12px;
-}
-.bootstrap-timepicker.pull-right .bootstrap-timepicker-widget.dropdown-menu:after {
-  left: auto;
-  right: 13px;
-}
-.bootstrap-timepicker .add-on {
-  cursor: pointer;
-}
-.bootstrap-timepicker .add-on i {
-  display: inline-block;
-  width: 16px;
-  height: 16px;
-}
-.bootstrap-timepicker-widget.dropdown-menu {
-  padding: 4px;
-}
-.bootstrap-timepicker-widget.dropdown-menu.open {
-  display: inline-block;
-}
-.bootstrap-timepicker-widget.dropdown-menu:before {
-  border-bottom: 7px solid rgba(0, 0, 0, 0.2);
-  border-left: 7px solid transparent;
-  border-right: 7px solid transparent;
-  content: "";
-  display: inline-block;
-  position: absolute;
-}
-.bootstrap-timepicker-widget.dropdown-menu:after {
-  border-bottom: 6px solid #FFFFFF;
-  border-left: 6px solid transparent;
-  border-right: 6px solid transparent;
-  content: "";
-  display: inline-block;
-  position: absolute;
-}
-.bootstrap-timepicker-widget.timepicker-orient-left:before {
-  left: 6px;
-}
-.bootstrap-timepicker-widget.timepicker-orient-left:after {
-  left: 7px;
-}
-.bootstrap-timepicker-widget.timepicker-orient-right:before {
-  right: 6px;
-}
-.bootstrap-timepicker-widget.timepicker-orient-right:after {
-  right: 7px;
-}
-.bootstrap-timepicker-widget.timepicker-orient-top:before {
-  top: -7px;
-}
-.bootstrap-timepicker-widget.timepicker-orient-top:after {
-  top: -6px;
-}
-.bootstrap-timepicker-widget.timepicker-orient-bottom:before {
-  bottom: -7px;
-  border-bottom: 0;
-  border-top: 7px solid #999;
-}
-.bootstrap-timepicker-widget.timepicker-orient-bottom:after {
-  bottom: -6px;
-  border-bottom: 0;
-  border-top: 6px solid #ffffff;
-}
-.bootstrap-timepicker-widget a.btn,
-.bootstrap-timepicker-widget input {
-  border-radius: 4px;
-}
-.bootstrap-timepicker-widget table {
-  width: 100%;
-  margin: 0;
-}
-.bootstrap-timepicker-widget table td {
-  text-align: center;
-  height: 30px;
-  margin: 0;
-  padding: 2px;
-}
-.bootstrap-timepicker-widget table td:not(.separator) {
-  min-width: 30px;
-}
-.bootstrap-timepicker-widget table td span {
-  width: 100%;
-}
-.bootstrap-timepicker-widget table td a {
-  border: 1px transparent solid;
-  width: 100%;
-  display: inline-block;
-  margin: 0;
-  padding: 8px 0;
-  outline: 0;
-  color: #333;
-}
-.bootstrap-timepicker-widget table td a:hover {
-  text-decoration: none;
-  background-color: #eee;
-  -webkit-border-radius: 4px;
-  -moz-border-radius: 4px;
-  border-radius: 4px;
-  border-color: #ddd;
-}
-.bootstrap-timepicker-widget table td a i {
-  margin-top: 2px;
-  font-size: 18px;
-}
-.bootstrap-timepicker-widget table td input {
-  width: 25px;
-  margin: 0;
-  text-align: center;
-}
-.bootstrap-timepicker-widget .modal-content {
-  padding: 4px;
-}
-@media (min-width: 767px) {
-  .bootstrap-timepicker-widget.modal {
-    width: 200px;
-    margin-left: -100px;
-  }
-}
-@media (max-width: 767px) {
-  .bootstrap-timepicker {
-    width: 100%;
-  }
-  .bootstrap-timepicker .dropdown-menu {
-    width: 100%;
-  }
-}

app/assets/stylesheets/frontend.scss

@@ -11,9 +11,45 @@ fieldset, .fieldset {
   margin-bottom: $line-height-computed;
 }
 
-.bootstrap-timepicker {
+.timepickers {
   .form-group {
     vertical-align: top;
+    &.dash {
+      line-height: 2.4em;
+    }
+  }
+
+  .bootstrap-datetimepicker-widget.dropdown-menu {
+    width: auto;
+  }
+
+  .bootstrap-datetimepicker-widget .timepicker-hour,
+  .bootstrap-datetimepicker-widget .timepicker-minute,
+  .bootstrap-datetimepicker-widget .timepicker-second {
+    width: 40px;
+  }
+
+  .bootstrap-datetimepicker-widget table td {
+    height: 40px;
+    line-height: 40px;
+    width: 40px;
+    padding: 0 !important;
+  }
+
+  .bootstrap-datetimepicker-widget table td.separator {
+    width: 10px;
+  }
+
+  .bootstrap-datetimepicker-widget table td span {
+    width: 40px;
+    height: 40px;
+    line-height: 40px;
+    margin: 0;
+  }
+
+  .bootstrap-datetimepicker-widget a[data-action] {
+    padding: 0;
+    color: #000;
   }
 }
 

app/views/time_entries/new.haml

@@ -1,27 +1,33 @@
 = top_menu link_to_dashboard
 
 %h1 Add Time Entry
+- time = Time.now
+- date_format, time_format = '%m/%d/%Y', '%l:%M %p'
+- mjs_date_format, mjs_time_format = 'MM/DD/YYYY', 'h:mm A'
 
 .row
   .col-xs-12.col-sm-6.col-lg-4
     %fieldset
       .form-group.form-inline
-        = text_field_tag '', Date.today.strftime('%m/%d/%Y'), id: 'date_id', placeholder: 'Date', class: 'form-control', size: 12
+        = text_field_tag nil, time.strftime(date_format), id: 'date_id', placeholder: 'Date', class: 'form-control',
+                                                          size: 12, data: {format: mjs_date_format}
         .help-block
 
-      .form-group.bootstrap-timepicker.form-inline
+      .form-group.timepickers.form-inline
         .form-group
           %label.visible-xs Start time
-          = text_field_tag nil, nil, id: 'start_time_id', placeholder: 'Start time', class: 'form-control', size: 8
+          = text_field_tag nil, time.strftime(time_format), id: 'start_time_id', placeholder: 'Start time',
+                                                            class: 'form-control', size: 8, data: {format: mjs_time_format}
           .hidden#start_date
           .help-block
 
-        .form-group.hidden-xs
+        .form-group.dash.hidden-xs
           —
 
         .form-group
           %label.visible-xs End time
-          = text_field_tag nil, nil, id: 'end_time_id', placeholder: 'End time', class: 'form-control', size: 8
+          = text_field_tag nil, time.strftime(time_format), id: 'end_time_id', placeholder: 'End time',
+                                                            class: 'form-control', size: 8, data: {format: mjs_time_format}
           .hidden#end_date
           .help-block