Merge pull request #445 from ox-it/new-datetime-picker

New datetime picker

static/js/event-form.js

@@ -1,6 +1,10 @@
 var animationTime = 200; // ms
 
 $(function() {
+
+    var today_eleven_am = new Date();
+    today_eleven_am.setHours(11);
+
     // Register event to show event group forms
     $('#id_event-group-enabled').on('change', function(ev) {
         if (ev.target.checked) {
@@ -12,27 +16,28 @@ $(function() {
         }
     });
 
-    var today_eleven_am = new Date();
-    today_eleven_am.setHours(11);
     // Initialise datetimepicker's
+
     $('.js-datetimepicker').datetimepicker({
-        format: 'dd/mm/yyyy hh:ii',
-        autoclose: true,
-        initialDate: today_eleven_am
+        format: 'DD/MM/YYYY HH:mm',
+        sideBySide : true,
+        allowInputToggle : true,
+        stepping : 5
+    }).each(function(i,v){
+        $(v).data("DateTimePicker").ignoreReadonly(true);
+        if (typeof $('input', v).attr('value') !== 'undefined') {
+			$(v).data("DateTimePicker").defaultDate(moment($('input', v).attr('value')));
+		}
+		else {
+
+		}
     });
 
-    $('#event-start.js-datetimepicker').on('changeDate', function(ev) {
-        //correct for daylight savings - the widget assumes we're picking in GMT
-        var date = new Date(ev.date);
-        var gmt_offset = date.getTimezoneOffset();
-        date.setMinutes( date.getMinutes() + gmt_offset );
-        var picker = $(ev.target).data('datetimepicker');
-        picker.setDate(date);
-
-        //set the end time to 1 hour later
-        var end_date = new Date(date);
-        date.setHours(date.getHours()+1, date.getMinutes());
-        $('#event-end.js-datetimepicker').data('datetimepicker').setDate(date);
+    $('#event-start.js-datetimepicker').on("dp.change", function(e) { 
+        var date = new Date(e.date);
+        var endDate = date.setHours(date.getHours()+1, date.getMinutes());
+
+        $('#event-end.js-datetimepicker').data('DateTimePicker').minDate(e.date).date(moment(endDate));
     });
 
     //prepend a message div to the given element, containing the given text.

talks/contributors/forms.py

@@ -24,10 +24,10 @@ def valid_value(self, value):
 class BootstrappedDateTimeWidget(forms.DateTimeInput):
     def render(self, name, value, attrs=None):
         html = super(BootstrappedDateTimeWidget, self).render(name, value, attrs)
-        html = """<div class="input-group date js-datetimepicker" id='""" + name + """'>
-                <span class="input-group-addon">
-                    <span class="glyphicon glyphicon-calendar"></span>
-                </span>
+        html = """<div class='input-group date js-datetimepicker' id='""" + name + """'>
+                    <span class="input-group-addon">
+                        <span class="glyphicon glyphicon-calendar"></span>
+                    </span>
         """ + html + "</div>"
 
         return mark_safe(html)

talks/templates/contributors/event_form.html

@@ -9,7 +9,7 @@
 
 <!-- Date picker -->
 <link href="{% static "css/bootstrap-datetimepicker.css"%}" rel="stylesheet">
-
+<script src="{% static "js/moment-with-locales.min.js"%}"></script>
 <script src="{% static "js/bootstrap-datetimepicker.js"%}"></script>
 
 <!-- Typeahead.js -->

talks/templates/contributors/event_group_form.html

@@ -8,7 +8,7 @@
 
 <!-- Date picker -->
 <link href="{% static "css/bootstrap-datetimepicker.css"%}" rel="stylesheet">
-
+<script src="{% static "js/moment-with-locales.min.js"%}"></script>
 <script src="{% static "js/bootstrap-datetimepicker.js"%}"></script>
 
 <!-- Typeahead.js -->

talks/templates/events/browse.html

@@ -8,7 +8,7 @@
 
 <!-- Date picker -->
 <link href="{% static "css/bootstrap-datetimepicker.css"%}" rel="stylesheet">
-
+<script src="{% static "js/moment-with-locales.min.js"%}"></script>
 <script src="{% static "js/bootstrap-datetimepicker.js"%}"></script>
 
 <!-- Typeahead.js -->
@@ -40,7 +40,7 @@ <h3>Filters</h3>
       <ul class="nav nav-list well">
         <form action="{% url 'browse_events' %}" method="get">
             {{ browse_events_form.start_date | bootstrap }}
-            <a class="clear-datepicker pull-right" href="#">clear</a>
+            <a id="clear-datepicker" class="pull-right" href="#">clear</a>
             {{ browse_events_form.to | bootstrap }}
             {{ browse_events_form.organising_department | bootstrap }}
             {{ browse_events_form.include_subdepartments | bootstrap }}
@@ -52,12 +52,26 @@ <h3>Filters</h3>
         </form>
 
         <script type="text/javascript">
-          $(function() {
+
+
+
+          $(document).ready(function(){
+
+            $('#clear-datepicker').click(function(e){
+              $('#to').data("DateTimePicker").clear();  
+            });
+
             $('.js-datetimepicker').datetimepicker({
-              format: 'yyyy-mm-dd',
-              minView: 2,
-              autoclose: true
+              format : 'YYYY-MM-DD',
+              allowInputToggle : true
+            }).each(function(i,v){
+              $(v).data("DateTimePicker").ignoreReadonly(true);  
             });
+
+            $('#start_date').on('dp.change', function(e){
+              $('#to').data('DateTimePicker').minDate(e.date);
+            });
+
           });
         </script>
 

tests/add_talk.robot

@@ -15,13 +15,9 @@ Scenario: Add the simplest talk
     type "something" into ${title field}
     type "something else" into ${abstract field}
     click on ${start field}
-    ${datetimepicker[0]} should appear
-    Select current date and time for ${datetimepicker[0]}
-    ${datetimepicker[0]} should disappear
+    Select current date and time for ${datetimepicker}
     click on ${end field}
-    ${datetimepicker[1]} should appear
-    Select current date and time for ${datetimepicker[1]}
-    ${datetimepicker[1]} should disappear
+    Select current date and time for ${datetimepicker}
     click on ${button done}
     current page should be ${talk page}
     ${success message} should be displayed
@@ -41,13 +37,9 @@ Scenario: Add talk to existing group of talks
     Select from list  ${group field.locator}  foo
     page should appear text "Chemical Biology"
     click on ${start field}
-    ${datetimepicker[0]} should appear
-    Select current date and time for ${datetimepicker[0]}
-    ${datetimepicker[0]} should disappear
+    Select current date and time for ${datetimepicker}
     click on ${end field}
-    ${datetimepicker[1]} should appear
-    Select current date and time for ${datetimepicker[1]}
-    ${datetimepicker[1]} should disappear
+    Select current date and time for ${datetimepicker}
     click on ${button done}
     ${success message} should appear
     ${success message} should contain text "New talk has been created"
@@ -197,13 +189,9 @@ Scenario: Save and add another
     go to ${add talk page}
     type "something" into ${title field}
     click on ${start field}
-    ${datetimepicker[0]} should appear
-    Select current date and time for ${datetimepicker[0]}
-    ${datetimepicker[0]} should disappear
+    Select current date and time for ${datetimepicker}
     click on ${end field}
-    ${datetimepicker[1]} should appear
-    Select current date and time for ${datetimepicker[1]}
-    ${datetimepicker[1]} should disappear
+    Select current date and time for ${datetimepicker}
     click on ${button save add another}
     current page should be ${add talk page}
     ${success message} should be displayed
@@ -267,8 +255,6 @@ Scenario: Preserve form data after validation
 Fill in required fields
     type "${TEST_NAME}" into ${field('Title')}
     click on ${start field}
-    ${datetimepicker[0]} should appear
-    Select current date and time for ${datetimepicker[0]}
+    Select current date and time for ${datetimepicker}
     click on ${end field}
-    ${datetimepicker[1]} should appear
-    Select current date and time for ${datetimepicker[1]}
+    Select current date and time for ${datetimepicker}

tests/keywords.robot

@@ -69,10 +69,8 @@ ${element} selected item should be "${label}"
     should be equal  ${v}  ${label}
 
 Select current date and time for ${widget}
-    ${widget} should appear
     click on ${datetimepicker current day.in_('widget')}
-    click on ${datetimepicker current hour.in_('widget')}
-    click on ${datetimepicker current minute.in_('widget')}
+    click on ${body}
 
 Login as ${username} ${password}
     go to ${login_page}

tests/pages.py

@@ -66,7 +66,7 @@ def in_(self, other):
 show_talk_page = lambda slug: Page('/talks/id/%s/' % slug)
 
 # elements
-
+body = Element('//body')
 abstract_field = Element('css=#id_event-description')
 title_field = Element('css=#id_event-title')
 start_field = Element('css=#id_event-start')
@@ -84,10 +84,9 @@ def in_(self, other):
 modal_dialog = Element('//*[@id="form-modal"]')
 modal_dialog_title = Element('//*[@id="form-modal-label"]')
 modal_dialog_submit_button = Element('//*[@id="form-modal"]//input[@type="submit"]')
-datetimepicker = Element('//div[contains(@class,"datetimepicker ")]')
-datetimepicker_current_day = Element('//*[@class="datetimepicker-days"]//*[contains(@class, "active")]')
-datetimepicker_current_hour = Element('//*[@class="datetimepicker-hours"]//*[contains(@class, "active")]')
-datetimepicker_current_minute = Element('//*[@class="datetimepicker-minutes"]//*[contains(@class, "active")]')
+datetimepicker = Element('css=.bootstrap-datetimepicker-widget')
+datetimepicker_current_day = Element('css=.datepicker-days')
+datetimepicker_time = Element('css=.timepicker-picker')
 button_login = Element('//input[@type="submit"]')
 username_field = Element('css=#id_username')
 password_field = Element('css=#id_password')