Style datetime picker inputs

babybuddy/static_src/scss/global.scss

@@ -35,9 +35,28 @@
     color: $gray-400;
 }
 
-.datetimepicker-input[readonly] {
+// Datetime picker input styles.
-    background: none;
+.input-group {
-    border: 0;
+    &.datetimepicker {
-    color: $white;
+
-    font-weight: bold;
+        // Make calendar icon large and use the primary theme color.
+        .input-group-text {
+            background: none;
+            border: 0;
+            color: theme-color('primary');
+            padding-left: 0;
+            padding-right: 0;
+        }
+
+        // Style readonly input to look less like an input element.
+        .datetimepicker-input {
+            &[readonly] {
+                background: none;
+                border: 0;
+                color: $white;
+                cursor: pointer;
+                font-weight: bold;
+            }
+        }
+    }
 }

babybuddy/templates/babybuddy/form_field.html

@@ -18,9 +18,9 @@
             </label>
         </div>
     {% elif field|field_type == "datetimefield" or field|field_type == "datefield" %}
-        <div class="input-group input-group-lg date" id="datetimepicker_{{ field.name }}" data-target-input="nearest">
+        <div class="input-group input-group-lg datetimepicker" id="datetimepicker_{{ field.name }}" data-target-input="nearest">
             <div class="input-group-prepend" data-target="#datetimepicker_{{ field.name }}" data-toggle="datetimepicker">
-                <span class="input-group-text"><i class="fa fa-calendar"></i></span>
+                <span class="input-group-text"><i class="fa fa-lg fa-calendar"></i></span>
             </div>
             {% if field.errors %}
                 {{ field|add_class:"datetimepicker-input form-control form-control-lg is-invalid" }}

static/babybuddy/css/app.css

@@ -1,28 +1,4 @@
 @charset "UTF-8";
-.breadcrumb {
-  margin-bottom: 0; }
-
-.btn-xs {
-  padding: 0.2rem 0.12rem;
-  font-size: 0.75rem;
-  line-height: 1;
-  border-radius: 0.2rem; }
-
-.dropdown-menu-right {
-  right: 0;
-  left: auto; }
-
-.invalid-feedback {
-  display: block; }
-
-.btn-no-hover:hover {
-  color: inherit;
-  background-color: inherit;
-  border-color: inherit; }
-
-.bootstrap-datetimepicker-widget {
-  color: #ced4da; }
-
 /*!
  * Bootstrap v4.4.1 (https://getbootstrap.com/)
  * Copyright 2011-2019 The Bootstrap Authors
@@ -7626,6 +7602,20 @@ a.text-error:hover, a.text-error:focus {
 .bootstrap-datetimepicker-widget {
   color: #ced4da; }
 
+.input-group.datetimepicker .input-group-text {
+  background: none;
+  border: 0;
+  color: #226f97;
+  padding-left: 0;
+  padding-right: 0; }
+
+.input-group.datetimepicker .datetimepicker-input[readonly] {
+  background: none;
+  border: 0;
+  color: #fff;
+  cursor: pointer;
+  font-weight: bold; }
+
 /*!
  *  Font Awesome 4.7.0 by @davegandy - http://fontawesome.io - @fontawesome
  *  License - http://fontawesome.io/license (Font: SIL OFL 1.1, CSS: MIT License)

static/babybuddy/css/app.dbc95bb9e5a9.css

@@ -1,28 +1,4 @@
 @charset "UTF-8";
-.breadcrumb {
-  margin-bottom: 0; }
-
-.btn-xs {
-  padding: 0.2rem 0.12rem;
-  font-size: 0.75rem;
-  line-height: 1;
-  border-radius: 0.2rem; }
-
-.dropdown-menu-right {
-  right: 0;
-  left: auto; }
-
-.invalid-feedback {
-  display: block; }
-
-.btn-no-hover:hover {
-  color: inherit;
-  background-color: inherit;
-  border-color: inherit; }
-
-.bootstrap-datetimepicker-widget {
-  color: #ced4da; }
-
 /*!
  * Bootstrap v4.4.1 (https://getbootstrap.com/)
  * Copyright 2011-2019 The Bootstrap Authors
@@ -7626,6 +7602,20 @@ a.text-error:hover, a.text-error:focus {
 .bootstrap-datetimepicker-widget {
   color: #ced4da; }
 
+.input-group.datetimepicker .input-group-text {
+  background: none;
+  border: 0;
+  color: #226f97;
+  padding-left: 0;
+  padding-right: 0; }
+
+.input-group.datetimepicker .datetimepicker-input[readonly] {
+  background: none;
+  border: 0;
+  color: #fff;
+  cursor: pointer;
+  font-weight: bold; }
+
 /*!
  *  Font Awesome 4.7.0 by @davegandy - http://fontawesome.io - @fontawesome
  *  License - http://fontawesome.io/license (Font: SIL OFL 1.1, CSS: MIT License)

static/babybuddy/js/app.8a235d0dd2b0.js

@@ -23,6 +23,7 @@ BabyBuddy.DatetimePicker = function ($, moment) {
     return {
         init: function (element, options) {
             var defaultOptions = {
+                allowInputToggle: true,
                 buttons: { showToday: true, showClose: true },
                 defaultDate: 'now',
                 format: 'L LT',

static/babybuddy/js/app.js

@@ -23,6 +23,7 @@ BabyBuddy.DatetimePicker = function ($, moment) {
     return {
         init: function (element, options) {
             var defaultOptions = {
+                allowInputToggle: true,
                 buttons: { showToday: true, showClose: true },
                 defaultDate: 'now',
                 format: 'L LT',