Time Picker w/ Time Picker Select - How To Implement

[masonkieth]

I'm a little confused on how the <TimePickerSelect> is intended to be implemented. The onChange()function for <TimePicker> only fires for input changes to the text field. The <TimePickerSelect>, and <SelectItem>, don't have onChange() functions in their component API on the storyboard. TimePicker Storyboard

What was the intended implementation for this, how am I expected to update my time value in memory with "AM/PM"? Or maybe, what is a way to implement it better than my hacky, and now broken, implementation.

Here's the implantation I had that was working, and still is on Mozilla Firefox, but recently stopped working in Chromium browsers:

              <TimePicker
                id="start_time_actual"
                labelText="Start Time (Actual)"
                onChange={handleInput} //Assign value to job_json
                value={job_json.actual_start_time} //set value if one is returned from database
                pattern={timeReg}
                maxLength={8}
                onBlur={timeOnBlur} //update time values if focus is removed from input. 
              >
                <TimePickerSelect id="time-picker-select-sta">
                  <SelectItem
                    id="tps-sta"
                    text={meridian[0] ? meridian[0] : "am"}
                    onClick={updateTimeSelect}
                  />
                  <SelectItem
                    id="tps-sta"
                    text={antiMeridian[0]}
                    onClick={updateTimeSelect}
                  />
                </TimePickerSelect>

It's a bit hacky in a few different ways, but specifically the Carbon implementation doesn't list onClick() in the component API, I assume it wasn't intended for use. Like i said, this works and the onClick() fires in Firefox, and was working in Chrome. But recently stopped.

Also, I found that there is an onChange() function for <TimePickerSelect onChange={}> that will also fire, but the event doesn't appear to have any information to tell you what item was selected.

[masonkieth]

So, through further experimentation, and reading up on <select> tags. There IS a onChange() function for the <TimePickerSelect> and I was able to get event.target.value to work, I must have had a typo when testing before because it was returning nothing in console, not even "emptyString" or undefined... Idk.

Even though it's not listed in the component API, it appears the intended implementation based on how others have implemented <select> tags with React is like so:

              <TimePicker
                id="start_time_actual"
                labelText="Start Time (Actual)"
                onChange={handleInput}
                value={job_json.actual_start_time}
                pattern={timeReg}
                maxLength={8}
                onBlur={timeOnBlur}
              >
                <TimePickerSelect id="time-picker-select-sta" onChange={updateTimeSelect}>
                  <SelectItem
                    id="tps-sta"
                    text={meridian[0] ? meridian[0] : "am"}
                    value={meridian[0] ? meridian[0] : "am"}
                  />
                  <SelectItem
                    id="tps-sta"
                    text={antiMeridian[0]}
                    value={antiMeridian[0]}
                  />
                </TimePickerSelect>
              </TimePicker>

I think I likely have some architectural problems with my component in general. A refactor may be needed, when initially writing the component I had zero intention of using AM/PM and I ended up hacking all of that together and the whole time it has felt like pushing spaghetti around a plate.

I think I've answered my question, but if anyone is looking to feel smart I would love to hear how other people accomplish time pickers and building time strings to send back to a database. I'm obviously pretty inexperienced.