Fix on-call edit form formatting issue

ee/app/assets/javascripts/oncall_schedules/components/rotations/components/add_edit_rotation_form.vue

@@ -198,12 +198,6 @@ export default {
                 class="gl-w-full"
                 :value="formattedDate"
                 :placeholder="__(`YYYY-MM-DD`)"
-                @blur="
-                  $emit('update-rotation-form', {
-                    type: 'startsAt.date',
-                    value: $event.target.value,
-                  })
-                "
               />
             </template>
           </gl-datepicker>
@@ -261,12 +255,6 @@ export default {
                   class="gl-w-full"
                   :value="formattedDate"
                   :placeholder="__(`YYYY-MM-DD`)"
-                  @blur="
-                    $emit('update-rotation-form', {
-                      type: 'endsAt.date',
-                      value: $event.target.value,
-                    })
-                  "
                 />
               </template>
             </gl-datepicker>
@@ -326,7 +314,7 @@ export default {
               class="gl-px-3"
             >
               <gl-dropdown-item
-                v-for="time in $options.HOURS_IN_DAY"
+                v-for="(_, time) in $options.HOURS_IN_DAY"
                 :key="time"
                 :is-checked="form.restrictedTo.startTime === time"
                 is-check-item
@@ -346,7 +334,7 @@ export default {
               class="gl-px-3"
             >
               <gl-dropdown-item
-                v-for="time in $options.HOURS_IN_DAY"
+                v-for="(_, time) in $options.HOURS_IN_DAY"
                 :key="time"
                 :is-checked="form.restrictedTo.endTime === time"
                 is-check-item

ee/app/assets/javascripts/oncall_schedules/utils/common_utils.js

@@ -73,7 +73,7 @@ export const parseRotationDate = (dateTimeString, scheduleTimezone) => {
     month: '2-digit',
     day: '2-digit',
     hour: '2-digit',
-    hour12: false, // The time picker uses 24 hour time
+    hourCycle: 'h23',
     timeZone: scheduleTimezone,
     timeZoneName: 'long',
   };

ee/spec/frontend/oncall_schedule/common_utils_spec.js

@@ -31,14 +31,21 @@ describe('getParticipantsForSave', () => {
 });
 
 describe('parseRotationDate', () => {
+  const scheduleTimezone = 'Pacific/Honolulu'; // UTC -10
+
   it('parses a rotation date according to the supplied timezone', () => {
     const dateTimeString = '2021-01-12T05:04:56.333Z';
-    const scheduleTimezone = 'Pacific/Honolulu';
-
     const rotationDate = parseRotationDate(dateTimeString, scheduleTimezone);
 
     expect(rotationDate).toStrictEqual({ date: new Date('2021-01-11T00:00:00.000Z'), time: 19 });
   });
+
+  it('parses a rotation date at midnight without exceeding 24 hours', () => {
+    const dateTimeString = '2021-01-12T10:00:00.000Z';
+    const rotationDate = parseRotationDate(dateTimeString, scheduleTimezone);
+
+    expect(rotationDate).toStrictEqual({ date: new Date('2021-01-12T00:00:00.000Z'), time: 0 });
+  });
 });
 
 describe('parseHour', () => {

ee/spec/frontend/oncall_schedule/rotations/components/add_edit_rotation_form_spec.js

@@ -227,8 +227,8 @@ describe('AddEditRotationForm', () => {
         findRestrictedToOptions().at(timeTo).vm.$emit('click');
         const emittedEvent = wrapper.emitted('update-rotation-form');
         expect(emittedEvent).toHaveLength(2);
-        expect(emittedEvent[0][0]).toEqual({ type: 'restrictedTo.startTime', value: timeFrom + 1 });
-        expect(emittedEvent[1][0]).toEqual({ type: 'restrictedTo.endTime', value: timeTo + 1 });
+        expect(emittedEvent[0][0]).toEqual({ type: 'restrictedTo.startTime', value: timeFrom });
+        expect(emittedEvent[1][0]).toEqual({ type: 'restrictedTo.endTime', value: timeTo });
       });
 
       it('should add a checkmark to a selected restricted FROM time', async () => {
@@ -241,16 +241,8 @@ describe('AddEditRotationForm', () => {
             },
           },
         });
-        expect(
-          findRestrictedFromOptions()
-            .at(timeFrom - 1)
-            .props('isChecked'),
-        ).toBe(true);
-        expect(
-          findRestrictedToOptions()
-            .at(timeTo - 1)
-            .props('isChecked'),
-        ).toBe(true);
+        expect(findRestrictedFromOptions().at(timeFrom).props('isChecked')).toBe(true);
+        expect(findRestrictedToOptions().at(timeTo).props('isChecked')).toBe(true);
       });
     });
   });