diff --git a/babyblotter/templates/babyblotter/form.html b/babyblotter/templates/babyblotter/form.html
index 25dd5dfd..36e162f1 100644
--- a/babyblotter/templates/babyblotter/form.html
+++ b/babyblotter/templates/babyblotter/form.html
@@ -6,27 +6,44 @@
         {% for field in form %}
             <div class="d-none">{{ field|field_type }}</div>
             <div class="form-group row">
-                {% if field|field_type == 'booleanfield' %}
-                    <div class="col-sm-1">&nbsp;</div>
+                {% if field|field_type == "booleanfield" %}
+                    <div class="col-sm-1 d-none d-sm-block">&nbsp;</div>
                     <div class="col-sm-11">
                         <div class="form-check">
                             <label for="id_{{ field.name }}" class="form-check-label">
                                 {% if field.errors %}
-                                    {{ field|add_class:'form-check-input is-invalid' }}
+                                    {{ field|add_class:"form-check-input is-invalid" }}
                                 {% else %}
-                                    {{ field|add_class:'form-check-input' }}
+                                    {{ field|add_class:"form-check-input" }}
                                 {% endif %}
                                 {{ field.label }}
                             </label>
                         </div>
                     </div>
+                {% elif field|field_type == "datetimefield" or field|field_type == "datefield" %}
+                    <label for="id_{{ field.name }}" class="col-sm-1 col-form-label">{{ field.label }}</label>
+                    <div class="col-sm-11">
+                        <div class="form-group">
+                            <div class="input-group date" id="datetimepicker_{{ field.name }}" data-target-input="nearest">
+                                <div class="input-group-addon" data-target="#datetimepicker_{{ field.name }}" data-toggle="datetimepicker">
+                                    <i class="fa fa-calendar"></i>
+                                </div>
+                                <input name="{{ field.html_name }}"
+                                       required="{{ field.required }}"
+                                       class="form-control datetimepicker-input{% if field.errors %} is-invalid{% endif %}"
+                                       data-target="#datetimepicker_{{ field.name }}"
+                                       id="id_{{ field.name }}"
+                                       type="text"/>
+                            </div>
+                        </div>
+                    </div>
                 {% else %}
                     <label for="id_{{ field.name }}" class="col-sm-1 col-form-label">{{ field.label }}</label>
                     <div class="col-sm-11">
                         {% if field.errors %}
-                            {{ field|add_class:'form-control is-invalid' }}
+                            {{ field|add_class:"form-control is-invalid" }}
                         {% else %}
-                            {{ field|add_class:'form-control' }}
+                            {{ field|add_class:"form-control" }}
                         {% endif %}
                     </div>
                 {% endif %}
diff --git a/core/templates/core/child_form.html b/core/templates/core/child_form.html
index 560aaf9e..f1729f1c 100644
--- a/core/templates/core/child_form.html
+++ b/core/templates/core/child_form.html
@@ -20,7 +20,7 @@
 {% block javascript %}
     <script type="text/javascript">
         $(function () {
-            $('#id_birth_date').datetimepicker({
+            $('#datetimepicker_birth_date').datetimepicker({
                 viewMode: 'years',
                 format: 'YYYY-MM-DD'
             });
diff --git a/core/templates/core/diaperchange_form.html b/core/templates/core/diaperchange_form.html
index 848ef783..79c03540 100644
--- a/core/templates/core/diaperchange_form.html
+++ b/core/templates/core/diaperchange_form.html
@@ -20,7 +20,7 @@
 {% block javascript %}
     <script type="text/javascript">
         $(function () {
-            $('#id_time').datetimepicker({
+            $('#datetimepicker_time').datetimepicker({
                 defaultDate: 'now',
                 format: 'YYYY-MM-DD HH:mm'
             });
diff --git a/core/templates/core/feeding_form.html b/core/templates/core/feeding_form.html
index 0f754a4f..020a4e59 100644
--- a/core/templates/core/feeding_form.html
+++ b/core/templates/core/feeding_form.html
@@ -20,11 +20,11 @@
 {% block javascript %}
     <script type="text/javascript">
         $(function () {
-            $('#id_start').datetimepicker({
+            $('#datetimepicker_start').datetimepicker({
                 format: 'YYYY-MM-DD HH:mm',
                 useCurrent: false
             });
-            $('#id_end').datetimepicker({
+            $('#datetimepicker_end').datetimepicker({
                 defaultDate: 'now',
                 format: 'YYYY-MM-DD HH:mm'
             });
diff --git a/core/templates/core/sleep_form.html b/core/templates/core/sleep_form.html
index adaeb243..fcfd38d5 100644
--- a/core/templates/core/sleep_form.html
+++ b/core/templates/core/sleep_form.html
@@ -20,11 +20,11 @@
 {% block javascript %}
     <script type="text/javascript">
         $(function () {
-            $('#id_start').datetimepicker({
+            $('#datetimepicker_start').datetimepicker({
                 format: 'YYYY-MM-DD HH:mm',
                 useCurrent: false
             });
-            $('#id_end').datetimepicker({
+            $('#datetimepicker_end').datetimepicker({
                 defaultDate: 'now',
                 format: 'YYYY-MM-DD HH:mm'
             });
diff --git a/core/templates/core/tummytime_form.html b/core/templates/core/tummytime_form.html
index ecb6f417..7b8687e1 100644
--- a/core/templates/core/tummytime_form.html
+++ b/core/templates/core/tummytime_form.html
@@ -20,11 +20,11 @@
 {% block javascript %}
     <script type="text/javascript">
         $(function () {
-            $('#id_start').datetimepicker({
+            $('#datetimepicker_start').datetimepicker({
                 format: 'YYYY-MM-DD HH:mm:ss',
                 useCurrent: false
             });
-            $('#id_end').datetimepicker({
+            $('#datetimepicker_end').datetimepicker({
                 defaultDate: 'now',
                 format: 'YYYY-MM-DD HH:mm:ss'
             });