ensure 0 hour in datepicker is midnight not noon

fixes CORE-48

test plan:
- test with assignments quizzes and discussions
- test with a 12 hour time locale (en is fine)
- enter "0" or "00" for hour in the datepicker
- it should show "12" and select "am" (if am/pm is not already
  selected)
- date should show and save correctly
- all other hours should select "pm" automatically if empty
- test with a 24 hour time locale (i.e. fr)
- shoule work normally

Change-Id: I94a39661624083584cef47469819faf95c9f51bc
Reviewed-on: https://gerrit.instructure.com/142322
Reviewed-by: Clay Diffrient <cdiffrient@instructure.com>
Tested-by: Jenkins
QA-Review: Tucker McKnight <tmcknight@instructure.com>
Product-Review: Brent Burgoyne <bburgoyne@instructure.com>

public/javascripts/jquery.instructure_date_and_time.js

@@ -210,7 +210,21 @@ import 'jqueryui/widget'
       $(document).delegate(".ui-datepicker-time-hour", 'change keypress focus blur', function(event) {
         var cur = $.datepicker._curInst;
         if(cur) {
-          var val = $(this).val();
+          const $this = $(this)
+          let val = $this.val();
+          const $ampm = $this.closest('.ui-datepicker-time').find(".ui-datepicker-time-ampm")
+          if (event.type === 'change' && val && $ampm.length && !$ampm.val()) {
+            let ampmVal
+            if (parseInt(val, 10) === 0) {
+              ampmVal = I18n.t('#time.am')
+              val = '12'
+              $this.val(val)
+            } else {
+              ampmVal = I18n.t('#time.pm')
+            }
+            $ampm.val(ampmVal)
+            cur.input.data('time-ampm', ampmVal);
+          }
           cur.input.data('time-hour', val);
         }
       }).delegate(".ui-datepicker-time-minute", 'change keypress focus blur', function(event) {

spec/coffeescripts/instructureDateAndTimeSpec.js

@@ -271,3 +271,39 @@ test('should accept localized strings and return them fudged', () => {
   const fudged = $.fudgeDateForProfileTimezone('2015-08-03 22:06:00Z')
   equal(+parsed, +fudged)
 })
+
+QUnit.module('$.datepicker time picker', {
+  setup () {
+    this.container = document.createElement('div')
+    this.field = document.createElement('input')
+    this.container.appendChild(this.field)
+    document.body.appendChild(this.container)
+    $(this.field).datepicker({ timePicker: true })
+    $(this.field).focus()
+    this.$hour = $('.ui-datepicker-time-hour')
+    this.$ampm = $('.ui-datepicker-time-ampm')
+  },
+  teardown () {
+    document.body.removeChild(this.container)
+  }
+})
+
+test('sets ampm select to am if empty and hour is changed to 0', function () {
+  this.$hour.val('0').trigger('change')
+  equal(this.$ampm.val(), 'am')
+})
+
+test('sets ampm select to am if empty and hour is changed to 00', function () {
+  this.$hour.val('00').trigger('change')
+  equal(this.$ampm.val(), 'am')
+})
+
+test('sets ampm select to pm if empty and hour is changed to > 0', function () {
+  this.$hour.val('1').trigger('change')
+  equal(this.$ampm.val(), 'pm')
+})
+
+test('sets hour to 12 if ampm exists and hour is changed to 0', function () {
+  this.$hour.val('0').trigger('change')
+  equal(this.$hour.val(), '12')
+})