TimePicker with use-12-hours: AM/PM selection inverted on first click from null value

[tarekabiramia]

Describe the bug

When using n-time-picker with use-12-hours enabled and an initial null value, the AM/PM selector is inverted on the first click. Clicking "AM" selects a PM time, and clicking "PM" selects an AM time.
Subsequent clicks work correctly only the initial selection from a null/empty state is affected.

Steps to reproduce

Steps to Reproduce

1. Setup the time picker:

<script setup lang="ts"> import { ref } from 'vue'; const examTime = ref(null); </script>

2. Test the bug:
   - Open the time picker (field starts empty/null)
   - Click on AM in the period selector
   - Expected: Picker shows an AM time (e.g., 09:21)
   - Actual: Picker shows a PM time (e.g., 17:21)
3. Or click PM instead:
   - Click on PM in the period selector
   - Expected: Picker shows a PM time (e.g., 21:21)
   - Actual: Picker shows an AM time (e.g., 09:21)
4. Note:
   - After the first selection, toggling between AM/PM works correctly
   - Using the Clear button and selecting again reproduces the bug
   - Only the first click from null is affected

Expected Behavior

Clicking AM should select an AM time, and clicking PM should select a PM time.

Actual Behavior

The first AM/PM click when the value is null is inverted - clicking AM gives PM, clicking PM gives AM.

Additional Context

This appears to be an issue with the picker's internal state initialization when transitioning from null to a selected time value with 12-hour format enabled.

Screen.Recording.2025-10-17.172748.mp4

Link to minimal reproduction

https://www.naiveui.com/en-US/os-theme/playground

System Info

System Info

  System:
    OS: Windows 11 10.0.22631
    CPU: (14) x64 Intel(R) Core(TM) Ultra 5 135U
    Memory: 1.63 GB / 15.46 GB
  Binaries:
    Node: 20.16.0
    npm: 10.8.1
  Browsers:
    Chrome: 141.0.7390.108
    Edge: Chromium (140.0.3485.54)
  npmPackages:
    naive-ui: 2.41.0
    vue: 3.5.13

Used Package Manager

npm

Validations

• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Check that this is a concrete bug. For Q&A open a GitHub Discussion.
• The provided reproduction is a minimal reproducible example of the bug.