Introducing bootstrap's dateTimePickers

smash/web/forms.py

@@ -15,6 +15,10 @@ DATEPICKER_DATE_ATTRS = {
     'data-date-format':'yyyy-mm-dd',
     'data-date-orientation': 'bottom'
 }
+DATETIMEPICKER_DATE_ATTRS = {
+    'class':'datetimepicker',
+    'data-date-format':'Y-MM-DD HH:mm',
+}
 
 def validate_subject_nd_number(self):
     subject = self.cleaned_data
@@ -119,20 +123,27 @@ class AppointmentDetailForm(ModelForm):
         model = Appointment
         fields = '__all__'
 
+    datetime_when = forms.DateTimeField(label='Appointment on (YYYY-MM-DD HH:MM)',
+        widget=forms.DateTimeInput(DATETIMEPICKER_DATE_ATTRS)
+    )
 
 class AppointmentEditForm(ModelForm):
     class Meta:
         model = Appointment
         fields = '__all__'
 
-    datetime_when = forms.DateTimeField(label='Appointment on (YYYY-MM-DD HH:MM:SS)')
+    datetime_when = forms.DateTimeField(label='Appointment on (YYYY-MM-DD HH:MM)',
+        widget=forms.DateTimeInput(DATETIMEPICKER_DATE_ATTRS)
+    )
 
 class AppointmentAddForm(ModelForm):
     class Meta:
         model = Appointment
         exclude = ['is_finished']
 
-    datetime_when = forms.DateTimeField(label='Appointment on (YYYY-MM-DD HH:MM:SS)')
+    datetime_when = forms.DateTimeField(label='Appointment on (YYYY-MM-DD HH:MM)',
+        widget=forms.DateTimeInput(DATETIMEPICKER_DATE_ATTRS)
+    )
 
 class VisitDetailForm(ModelForm):
     datetime_begin = forms.DateField(label="Visit begins on",

smash/web/templates/appointments/add.html

@@ -6,6 +6,8 @@
 {{ block.super }}
 	<!-- DataTables -->
   <link rel="stylesheet" href="{% static 'AdminLTE/plugins/datatables/dataTables.bootstrap.css' %}">
+
+  {% include "includes/datetimepicker.css.html" %}
 {% endblock styles %}
 
 {% block ui_active_tab %}'appointments'{% endblock ui_active_tab %}
@@ -88,4 +90,6 @@
 			});
 		});
 	</script>
+
+  {% include "includes/datetimepicker.js.html" %}
 {% endblock scripts %}

smash/web/templates/appointments/details.html

 {% extends "_base.html" %}
 {% load static %}
+{% load filters %}
 
 {% block styles %}
 {{ block.super }}
 	<!-- DataTables -->
   <link rel="stylesheet" href="{% static 'AdminLTE/plugins/datatables/dataTables.bootstrap.css' %}">
+
+  {% include "includes/datetimepicker.css.html" %}
 {% endblock styles %}
 
 {% block ui_active_tab %}'appointments'{% endblock ui_active_tab %}
@@ -35,12 +38,12 @@
 		<div class="box-body">
 			{% for field in form %}
 				<div class="form-group">
-					<label for="{# TODO #}" class="col-sm-2 control-label">
+					<label class="col-sm-3 control-label">
 						{{ field.label }}
 					</label>
 
-					<div class="col-sm-10">
-						{{ field }}
+					<div class="col-sm-9">
+						{{ field|add_class:'form-control' }}
 					</div>
 
 					{% if field.help_text %}
@@ -81,4 +84,6 @@
 			});
 		});
 	</script>
+
+  {% include "includes/datetimepicker.js.html" %}
 {% endblock scripts %}

smash/web/templates/appointments/edit.html

@@ -6,6 +6,8 @@
 {{ block.super }}
 	<!-- DataTables -->
   <link rel="stylesheet" href="{% static 'AdminLTE/plugins/datatables/dataTables.bootstrap.css' %}">
+
+  {% include "includes/datetimepicker.css.html" %}
 {% endblock styles %}
 
 {% block ui_active_tab %}'appointments'{% endblock ui_active_tab %}
@@ -87,4 +89,6 @@
 			});
 		});
 	</script>
+
+  {% include "includes/datetimepicker.js.html" %}
 {% endblock scripts %}

smash/web/templates/includes/datetimepicker.css.html

+{% load static %}
+<!-- Bootstrap datepicker -->
+<link rel="stylesheet" href="{% static 'AdminLTE/plugins/bootstrap-datetimepicker/css/bootstrap-datetimepicker.min.css' %}">

smash/web/templates/includes/datetimepicker.js.html

+{% load static %}
+<script src="{% static 'AdminLTE/plugins/moment.js/moment.min.js' %}"></script>
+<script src="{% static 'AdminLTE/plugins/bootstrap-datetimepicker/js/bootstrap-datetimepicker.min.js' %}"></script>
+<script>
+  $(document).ready(function () {
+    $(".datetimepicker").datetimepicker({
+      'sideBySide': true
+    });
+  });
+</script>

todos.txt

 * TODO List
 
+** Notice
+Moved all the important stuff to gitlab issues
+
 ** Important
  - label for's => give them correct html id's (all html forms).
    Currently it works, but it's not valid HTML, as the ID (for labels) are all the same.