Calendar: AM/PM does not work properly if minDate and maxDate validations are provided as prop

[shubhsaur]

Describe the bug

When we are using minDate and maxDate validation as prop in the two separate input (which is shown in the demo as From and To fields), then changing the AM to PM does not work. The detailed steps have been provided below to recreate this issue.

Reproducer

https://stackblitz.com/edit/stackblitz-starters-aemkru?file=src%2FApp.tsx

PrimeReact version

10.5.1

React version

17.x

Language

ES6

Build / Runtime

Create React App (CRA)

Browser(s)

Edge 121

Steps to reproduce the behavior

1. Go to the above stackblitz demo
2. Change the time in the "From:" field (For example, put time as 02:30 PM)
3. Change the time in the "To:" field (For example, put the time as 06:30 PM)
4. Now, change the "From" field PM to AM and then AM to PM just after it.
5. You can see that while changing it from PM to AM works, but reversing it to original state, which is from AM to PM does not work.

While changing it to its original state - AM to PM still holds the validation true, that is, the FROM time should be less than TO field max time (02:30 AM / 02:30 PM < 06:30 PM)

Expected behavior

The From field time should be able to change from AM to PM
FROM: 02:30 AM -> 02:30 PM should work if we have provided TO time as 06:30 PM.

[shubhsaur]

Hello @melloware , have checked the code and seems like issue is within getCurrentDateTime() function which we are calling to store the currentTime and currentHour.

`

        const toggleAmPm = (event) => {

                  const currentTime = getCurrentDateTime();
                  const currentHour = currentTime.getHours();
                  const newHour = currentHour >= 12 ? currentHour - 12 : currentHour + 12;
  
              if (validateHour(convertTo24Hour(newHour, !(currentHour > 11)), currentTime)) {
                  updateTime(event, newHour, currentTime.getMinutes(), currentTime.getSeconds(), currentTime.getMilliseconds());
              }
  
                event.preventDefault();
         };

`

So as a workaround if am changing this parameter !(currentHour > 11) to (currentHour > 11) in validateHour conditional check , then the maxDate validation is working as expected.

But the main issues lies in getCurrentDateTime() fn as we need to return the props.value same as the value which we are selecting in time picker, but its the other way around, the value we are getting is the previous one, ie toggling AM/PM for 2 PM gives 2 AM and vice versa.

`

const getCurrentDateTime = () => {
          if (isSingleSelection()) {
              return **props.value** && props.value instanceof Date ? cloneDate(props.value) : getViewDate();
          } else if (isMultipleSelection()) {
              if (props.value && props.value.length) {
                  return cloneDate(props.value[props.value.length - 1]);
              }
          } else if (isRangeSelection()) {
              if (props.value && props.value.length) {
                  let startDate = cloneDate(props.value[0]);
                  let endDate = cloneDate(props.value[1]);

                  return endDate || startDate;
              }
          }

          return new Date();
      };

`

[melloware]

@shubhsaur feel free to submit a PR.