MIT: CCX. Handle setting dates for blocks

Add date widget for setting start and due dates for the course sections, plus simple server side validation for avoiding db corruption from bad dates

Add immediate feedback for date validation errors

lms/djangoapps/pocs/views.py

@@ -231,6 +231,22 @@ def set_grading_policy(request, course):
     return redirect(url)
 
 
+def validate_date(year, month, day, hour, minute):
+    # avoid corrupting db if bad dates come in
+    valid = True
+    if year < 0:
+        valid = False
+    if month < 1 or month > 12:
+        valid = False
+    if day < 1 or day > 31:
+        valid = False
+    if hour < 0 or hour > 23:
+        valid = False
+    if minute < 0 or minute > 59:
+        valid = False
+    return valid
+
+
 def parse_date(datestring):
     """
     Generate a UTC datetime.datetime object from a string of the form
@@ -240,8 +256,9 @@ def parse_date(datestring):
         date, time = datestring.split(' ')
         year, month, day = map(int, date.split('-'))
         hour, minute = map(int, time.split(':'))
-        return datetime.datetime(
-            year, month, day, hour, minute, tzinfo=pytz.UTC)
+        if validate_date(year, month, day, hour, minute):
+            return datetime.datetime(
+                year, month, day, hour, minute, tzinfo=pytz.UTC)
 
     return None
 

lms/templates/pocs/coach_dashboard.html

@@ -14,6 +14,16 @@
   <%static:css group='style-course'/>
 </%block>
 
+<%block name="jsextra">
+  <script src="${static.url('js/vendor/timepicker/jquery.timepicker.js')}"></script>
+  <link rel="stylesheet" type="text/css" href="${static.url('js/vendor/timepicker/jquery.timepicker.css')}" />
+  <style>
+    .ui-timepicker-list { z-index: 100000; }
+    .ui-datepicker { z-index: 100000 !important; }
+    input.date, input.time { width: auto !important; display: inline !important; }
+  </style>
+</%block>
+
 <%include file="/courseware/course_navigation.html" args="active_page='poc_coach'" />
 
 <section class="container">

lms/templates/pocs/schedule.html

@@ -70,10 +70,10 @@
       <h2></h2>
     </header>
     <form role="form">
-      <div class="field">
+      <div class="field" id="datepair">
         <label></label>
-        <input type="date" name="date"/>
-        <input type="time" name="time"/>
+        <input placeholder="Date" class="date" type="text" name="date"/ size="11">
+        <input placeholder="Time" class="time" type="text" name="time"/ size="6">
       </div>
       <div class="field">
         <button type="submit" class="btn btn-primary">${_('Set date')}</button>
@@ -138,6 +138,15 @@
 </div>
 
 <script>
+$('#datepair .time').timepicker({
+    'showDuration': true,
+    'timeFormat': 'G:i'
+});
+$('#datepair .date').datepicker({
+    'dateFormat': 'yy-mm-dd',
+    'autoclose': true
+});
+
 var poc_schedule = (function () {
   var save_url = '${save_url}';
   var schedule = ${schedule};
@@ -350,6 +359,16 @@ var poc_schedule = (function () {
         event.preventDefault();
         var date = $(this).find('input[name=date]').val(),
             time = $(this).find('input[name=time]').val();
+        var valid_date = new Date(date);
+        if (isNaN(valid_date.valueOf())) {
+          alert('Please enter a valid date');
+          return;
+        }
+        var valid_time = /^\d{1,2}:\d{2}?$/;
+        if (!time.match(valid_time)) {
+          alert('Please enter a valid time');
+          return;
+        }
         unit[what] = date + ' ' + time;
         modal.find('.close-modal').click();
         self.dirty = true;