DateTimePicker: dropdown for time not handling AM/PM correctly

[c-eiser13]

[ ] Enhancement

[X ] Bug

[ ] Question

Version

Please specify what version of the library you are using: [ 1.15.0 ]

Expected / Desired Behavior / Question

Using the DateTimePicker with dropdown for time selection, AM and PM should be handled correctly.

Observed Behavior

When using TimeDisplayControlType.Dropdown, and choosing an hour value that is PM, when data is submitted to SharePoint Date/Time field, it is set as AM. Upon debugging the code, it looks like the issue is happening in the dropDownHoursChanged function. When the control loads, the value passed in is correct, where there is a space between the hours and AM or PM:

However, on subsequent changes of the hour value in the drop down, the value comes in with no spaces and causes the following logic to break when trying to split the hour portion and designator portion on " "

The hoursSplit array only has one value, "5PM" since the value is passed in without a space ("5PM"). The addition of 12 hours never happens since position 1 of the array is being looked at and the array does not have 2 items:

I cannot find how/why the value comes in as expected on the initial render of the component (10 PM instead of 10PM for instance), but can see why the values are loaded without spaces for subsequent changes. The HoursComponent is storing the 1PM, 2PM, 3PM etc in the text property of the choice objects for the drop down. I'd be happy to take a shot at fixing the issue, but need to understand how the initial value is formatted properly.

This is possibly related to #402 but was not positive so created a new issue.

Steps to Reproduce

Add the DateTimePicker control with TimeDisplayControlType.Dropdown and choose an hour value in PM, then update a list item with a date/time field, using the value returned from the DateTimePicker control. It will set the time portion incorrectly.

[ghost]

Thank you for reporting this issue. We will be triaging your incoming issue as soon as possible.

[c-eiser13]

I had a moment to debug this further and turns out what I was seeing with initial value being formatted correctly is because I had two date time pickers, and the second one was using the masked text field instead of drop down. The masked text field passes the value to the TimeHelper.hoursValue, which properly formats the value. The drop down never makes any calls to this function, so the value is not formatted as expected.

By passing the hours value to the TimeHelper.hoursValue function, the string passed to the DateTimePicker component is formatted properly with a space between the hours portion and designator.

I will submit a PR with this change, but if it should be implemented in a different way, I can help out there as well.

[AJIXuMuK]

Thank you @c-eiser13 for reporting and fixing the issue!
It is currently available in @next version and will be included in the next version.