Add date/time picker to other model fields.

core/forms.py

@@ -3,10 +3,10 @@ from __future__ import unicode_literals
 
 from django import forms
 
-from .models import Child
+from .models import Child, DiaperChange, Feeding, Sleep, TummyTime
 
 
-class ChildAddForm(forms.ModelForm):
+class ChildForm(forms.ModelForm):
     class Meta:
         model = Child
         fields = ['first_name', 'last_name', 'birth_date']
@@ -17,3 +17,70 @@ class ChildAddForm(forms.ModelForm):
                 'data-target': '#id_birth_date',
             }),
         }
+
+
+class DiaperChangeForm(forms.ModelForm):
+    class Meta:
+        model = DiaperChange
+        fields = ['child', 'time', 'wet', 'solid', 'color']
+        widgets = {
+            'time': forms.DateTimeInput(attrs={
+                'class': 'datepicker-input',
+                'data-toggle': 'datetimepicker',
+                'data-target': '#id_time',
+            }),
+        }
+
+
+class FeedingForm(forms.ModelForm):
+    class Meta:
+        model = Feeding
+        fields = ['child', 'start', 'end', 'type', 'method']
+        widgets = {
+            'start': forms.DateTimeInput(attrs={
+                'class': 'datepicker-input',
+                'data-toggle': 'datetimepicker',
+                'data-target': '#id_start',
+            }),
+            'end': forms.DateTimeInput(attrs={
+                'class': 'datepicker-input',
+                'data-toggle': 'datetimepicker',
+                'data-target': '#id_end',
+            }),
+        }
+
+
+class SleepForm(forms.ModelForm):
+    class Meta:
+        model = Sleep
+        fields = ['child', 'start', 'end']
+        widgets = {
+            'start': forms.DateTimeInput(attrs={
+                'class': 'datepicker-input',
+                'data-toggle': 'datetimepicker',
+                'data-target': '#id_start',
+            }),
+            'end': forms.DateTimeInput(attrs={
+                'class': 'datepicker-input',
+                'data-toggle': 'datetimepicker',
+                'data-target': '#id_end',
+            }),
+        }
+
+
+class TummyTimeForm(forms.ModelForm):
+    class Meta:
+        model = TummyTime
+        fields = ['child', 'start', 'end', 'milestone']
+        widgets = {
+            'start': forms.DateTimeInput(attrs={
+                'class': 'datepicker-input',
+                'data-toggle': 'datetimepicker',
+                'data-target': '#id_start',
+            }),
+            'end': forms.DateTimeInput(attrs={
+                'class': 'datepicker-input',
+                'data-toggle': 'datetimepicker',
+                'data-target': '#id_end',
+            }),
+        }

core/templates/core/diaperchange_form.html

@@ -36,4 +36,14 @@
         <button type="submit" class="btn btn-primary">Submit</button>
         <a href="{% url 'diaperchange-list' %}" class="btn btn-default">Cancel</a>
     </form>
+{% endblock %}
+
+{% block javascript %}
+    <script type="text/javascript">
+        $(function () {
+            $('#id_time').datetimepicker({
+                format: 'YYYY-MM-DD HH:mm'
+            });
+        });
+    </script>
 {% endblock %}

core/templates/core/feeding_form.html

@@ -36,4 +36,18 @@
         <button type="submit" class="btn btn-primary">Submit</button>
         <a href="{% url 'feeding-list' %}" class="btn btn-default">Cancel</a>
     </form>
+{% endblock %}
+
+{% block javascript %}
+    <script type="text/javascript">
+        $(function () {
+            $('#id_start').datetimepicker({
+                format: 'YYYY-MM-DD HH:mm',
+                useCurrent: false
+            });
+            $('#id_end').datetimepicker({
+                format: 'YYYY-MM-DD HH:mm'
+            });
+        });
+    </script>
 {% endblock %}

core/templates/core/sleep_form.html

@@ -36,4 +36,18 @@
         <button type="submit" class="btn btn-primary">Submit</button>
         <a href="{% url 'sleep-list' %}" class="btn btn-default">Cancel</a>
     </form>
+{% endblock %}
+
+{% block javascript %}
+    <script type="text/javascript">
+        $(function () {
+            $('#id_start').datetimepicker({
+                format: 'YYYY-MM-DD HH:mm',
+                useCurrent: false
+            });
+            $('#id_end').datetimepicker({
+                format: 'YYYY-MM-DD HH:mm'
+            });
+        });
+    </script>
 {% endblock %}

core/templates/core/tummytime_form.html

@@ -36,4 +36,18 @@
         <button type="submit" class="btn btn-primary">Submit</button>
         <a href="{% url 'tummytime-list' %}" class="btn btn-default">Cancel</a>
     </form>
+{% endblock %}
+
+{% block javascript %}
+    <script type="text/javascript">
+        $(function () {
+            $('#id_start').datetimepicker({
+                format: 'YYYY-MM-DD HH:mm',
+                useCurrent: false
+            });
+            $('#id_end').datetimepicker({
+                format: 'YYYY-MM-DD HH:mm'
+            });
+        });
+    </script>
 {% endblock %}

core/views.py

@@ -7,7 +7,8 @@ from django.views.generic.edit import CreateView, UpdateView, DeleteView
 from django.views.generic.list import ListView
 
 from .models import Child, DiaperChange, Feeding, Note, Sleep, TummyTime
-from .forms import ChildAddForm
+from .forms import (ChildForm, DiaperChangeForm, FeedingForm, SleepForm,
+                    TummyTimeForm)
 
 
 class Dashboard(LoginRequiredMixin, TemplateView):
@@ -19,14 +20,14 @@ class ChildList(LoginRequiredMixin, ListView):
 
 
 class ChildAdd(LoginRequiredMixin, CreateView):
-    form_class = ChildAddForm
     model = Child
+    form_class = ChildForm
     success_url = '/children'
 
 
 class ChildUpdate(LoginRequiredMixin, UpdateView):
     model = Child
-    fields = ['first_name', 'last_name', 'birth_date']
+    form_class = ChildForm
     success_url = '/children'
 
 
@@ -41,13 +42,13 @@ class DiaperChangeList(LoginRequiredMixin, ListView):
 
 class DiaperChangeAdd(LoginRequiredMixin, CreateView):
     model = DiaperChange
-    fields = ['child', 'time', 'wet', 'solid', 'color']
+    form_class = DiaperChangeForm
     success_url = '/changes'
 
 
 class DiaperChangeUpdate(LoginRequiredMixin, UpdateView):
     model = DiaperChange
-    fields = ['child', 'time', 'wet', 'solid', 'color']
+    form_class = DiaperChangeForm
     success_url = '/changes'
 
 
@@ -62,13 +63,13 @@ class FeedingList(LoginRequiredMixin, ListView):
 
 class FeedingAdd(LoginRequiredMixin, CreateView):
     model = Feeding
-    fields = ['child', 'start', 'end', 'type', 'method']
+    form_class = FeedingForm
     success_url = '/feedings'
 
 
 class FeedingUpdate(LoginRequiredMixin, UpdateView):
     model = Feeding
-    fields = ['child', 'start', 'end', 'type', 'method']
+    form_class = FeedingForm
     success_url = '/feedings'
 
 
@@ -104,13 +105,13 @@ class SleepList(LoginRequiredMixin, ListView):
 
 class SleepAdd(LoginRequiredMixin, CreateView):
     model = Sleep
-    fields = ['child', 'start', 'end']
+    form_class = SleepForm
     success_url = '/sleep'
 
 
 class SleepUpdate(LoginRequiredMixin, UpdateView):
     model = Sleep
-    fields = ['child', 'start', 'end']
+    form_class = SleepForm
     success_url = '/sleep'
 
 
@@ -125,13 +126,13 @@ class TummyTimeList(LoginRequiredMixin, ListView):
 
 class TummyTimeAdd(LoginRequiredMixin, CreateView):
     model = TummyTime
-    fields = ['child', 'start', 'end', 'milestone']
+    form_class = TummyTimeForm
     success_url = '/tummy-time'
 
 
 class TummyTimeUpdate(LoginRequiredMixin, UpdateView):
     model = TummyTime
-    fields = ['child', 'start', 'end', 'milestone']
+    form_class = TummyTimeForm
     success_url = '/tummy-time'