Fixing start date / end date bug. Fixes #81

virtualcommons · Feb 11, 2015 · a12eae4 · a12eae4
1 parent 4682dc0
commit a12eae4
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 18 deletions.
diff --git a/vcweb/core/templates/experimenter/subject-pool-index.html b/vcweb/core/templates/experimenter/subject-pool-index.html
@@ -138,7 +138,7 @@ <h3 style="display: inline"></h3>
                                 <td>
 				                    <span >
                                         <div class="input-group input-group-sm">
-                                            <input name="start_date" type="text" class="form-control date-start" data-date-format="YYYY-MM-DD HH:mm" data-bind="datepicker: start_date, value: start_date, enable: isEditable" />
+                                            <input name="start_date" type="text" class="form-control date-start" data-bind="datetimepicker: start_date, enable: isEditable" />
                                             <span class="input-group-addon"><i class="fa fa-calendar"></i></span>
                                         </div>
                                     </span>
@@ -204,7 +204,7 @@ <h3 style="display: inline"></h3>
                                 <td>
                                     <span>
                                         <div class="input-group input-group-sm">
-                                            <input name="end_date" type="text" class="form-control date-end" data-date-format="YYYY-MM-DD HH:mm" data-bind="datepicker : end_date, value: end_date, enable: isEditable" />
+                                            <input name="end_date" type="text" class="form-control date-end" data-bind="datetimepicker: end_date, enable: isEditable" />
                                             <span class="input-group-addon"><i class="fa fa-calendar"></i></span>
                                         </div>
                                     </span>
@@ -323,9 +323,10 @@ <h3 style="display: inline"></h3>
                 ];
 
                 model.addSession = function() {
-                    var tom_date_time = moment().add(1, 'days').format('YYYY-MM-DD HH:mm');
+                    var initial_start_date = moment().add(1, 'days').hour(10).minute(0).format('YYYY-MM-DD HH:mm');
+                    var initial_end_date = moment().add(1, 'days').hour(11).minute(0).format('YYYY-MM-DD HH:mm');
                     model.session_list.push(
-                        new SessionModel({ pk: -1, experiment_metadata: -1, start_date: tom_date_time, end_date: tom_date_time, capacity:10, invite_count: 0, location: "Online", isEditable: true, signup_count: 0})
+                        new SessionModel({ pk: -1, experiment_metadata: -1, start_date: initial_start_date, end_date: initial_end_date, capacity:10, invite_count: 0, location: "Online", isEditable: true, signup_count: 0})
                     );
                 };
 
@@ -443,6 +444,7 @@ <h3 style="display: inline"></h3>
                     self.isEditable(true);
                 };
             }
+            console.log(viewModelJson)
             ko.applyBindings(new SessionListViewModel(viewModelJson));
         });
     </script>

diff --git a/vcweb/static/js/ko/knockout.helper.js b/vcweb/static/js/ko/knockout.helper.js
@@ -65,23 +65,27 @@ ko.bindingHandlers.slideVisible = {
     }
 };
 
-ko.bindingHandlers.datepicker = {
-    init: function(element, valueAccessor, allBindingsAccessor) {
+ko.bindingHandlers.datetimepicker = {
+    init: function(element, valueAccessor, allBindings) {
         //initialize datepicker with some optional options
-        var options = { minDate: moment(), sideBySide: true };
-        $(element).datetimepicker(options);
-
-        ko.utils.registerEventHandler(element, "dp.show", function(event) {
-            var value = ko.utils.unwrapObservable(valueAccessor());
-            $(element).data("DateTimePicker").date(value);
-        });
-
-        ko.utils.registerEventHandler(element, "dp.change", function(event) {
-            if($(element).hasClass("date-start")) {
-                $(element).parents("tbody").find(".date-end").data("DateTimePicker").minDate(event.date);
-                $(element).parents("tbody").find(".date-end").data("DateTimePicker").date(event.date);
+        var options = {
+            format: 'YYYY-MM-DD HH:mm',
+            defaultDate: ko.unwrap(valueAccessor()),
+            sideBySide: true,
+        };
+        ko.utils.extend(options, allBindings.dateTimePickerOptions);
+        $(element).datetimepicker(options).on("dp.change", function (evntObj) {
+            var observable = valueAccessor();
+            if (evntObj.timeStamp !== undefined) {
+                var picker = $(this).data("DateTimePicker");
+                var d = picker.date();
+                observable(d.format(options.format));
             }
         });
+    },
+    update: function (element, valueAccessor) {
+        var value = ko.unwrap(valueAccessor());
+        $(element).datetimepicker('date', value || '');
     }
 };