When using 12 hour format in timepicker you must select PM twice

[Israel-ICM]

Hi, I have the following problem:

As you can see in the previous gif, in order to select the time 14:11:00, PM must be selected twice, which makes the user confused since he put PM at the beginning. Why should I select it again?

When it is not selected the second time it resets to AM as you can see below:

Is this operation correct?

I am using version 18.3.4

[nzbin]

@JelleBruisten @CnxAtanasIliev Do you know this issue?

[JelleBruisten]

Nope and I tried reproducing it on a few production applications, does not seem to reproduce for me.

From a empty field, selecting AM/PM -> selecting hour -> then selecting minute
From a empty field, selecting hour -> selecting AM/PM -> then selecting minute

Repeated it with pre-filled ones.

[Israel-ICM]

@JelleBruisten, the same thing happens on the demo website.

[JelleBruisten]

Yeah I see it happening on a time input only datetime for me seems weirdly okay in some cases.

[JelleBruisten]

@nzbin The clock emits a date in the correct time but, after that it emits again with the timeSelected event. This will within the calendar call this:

  _updateDate(date: D): D {
    if (this.twelvehour) {
      const HOUR = this._adapter.getHour(date);
      if (HOUR === 12) {
        if (this._AMPM === 'AM') {
          return this._adapter.addCalendarHours(date, -12);
        }
      } else if (this._AMPM === 'PM' && !this.actionsPortal) {
        return this._adapter.addCalendarHours(date, 12);
      }
    }
    return date;
  }

Note that the clock does seem to emit it in for example 1 PM ( hour = 13 ) and this function sets it back to hour = 1.

Then:

  set _activeDate(value: D) {
   const oldActiveDate = this._clampedActiveDate;
   this._clampedActiveDate = this._adapter.clampDate(value, this.minDate, this.maxDate);

   // whenever active date changed, and possibly got clamped we should adjust the am/pm setting
   this._selectAMPM(this._clampedActiveDate);

and finally:

  _selectAMPM(date: D) {
   const hour = this._adapter.getHour(date); // with our example of 1 PM ( hour 13 selected ) after the previous function this will be 1 )
   if (hour > 11) {
     this._AMPM = 'PM';
   } else {
     this._AMPM = 'AM'; // 1 > 11 = false, so we're resetting it here back to AM
   }
   if (this.actionsPortal && this._selected && !this._adapter.sameHour(date, this._selected)) {
     this.selectedChange.emit(date);
   }
 }

Commenting out the _updateDate to be:

  _updateDate(date: D): D {
    // if (this.twelvehour) {
    //   const HOUR = this._adapter.getHour(date);
    //   if (HOUR === 12) {
    //     if (this._AMPM === 'AM') {
    //       return this._adapter.addCalendarHours(date, -12);
    //     }
    //   } else if (this._AMPM === 'PM' && !this.actionsPortal) {
    //     return this._adapter.addCalendarHours(date, 12);
    //   }
    // }
    return date;
  }

Does not seem to reproduce the error anymore, question is though do we need this for any case I could not find any errors with this commented out.

[nzbin]

18.4.0 has fixed.