Hi everyone,
Just bringing something up that is important for the documentation of the TimePicker React component
I was a bit confused on the TimePicker documentation here:
Time Picker component | Vaadin components
The React implementation doesn’t include a method to use AM-PM format, while the flow implementation defaults to AM-PM. I was inclined to believe that formatting to AM-PM was possible due to the documentation here:
vaadin-time-picker Examples
The Custom formatter clearly gives a way of achieving the AM PM format in html, but nothing for the wrapped React component in the ui library. Clearly, I was missing something. It turns out, the formatting object prop actually existed on the React component the entire time. This should be documented in a more obvious way.
Here is my template code example:
<TimePicker
// ... other props
i18n={{
// A function to format given `Object` as
// time string. Object is in the format `{ hours: ..., minutes: ..., seconds: ..., milliseconds: ... }`
formatTime: function (timeObject) {
if (timeObject) {
const pad = function (n: any) {
n = parseInt(n || 0);
return n < 10 ? "0" + n : n;
};
const period = (timeObject.hours as number) > 12 ? "PM" : "AM";
const hours = (timeObject.hours as number) % 12 || 12;
return pad(hours) + ":" + pad(timeObject.minutes) + " " + period;
}
},
parseTime: function (timeString) {
if (timeString) {
const parts = /^(\d{1,2})(?::(\d{1,2}))?(?:\s(\w{2}))?$/.exec(
timeString
);
return (
parts && {
hours: parseInt(parts[1]) + (parts[3] == "PM" ? 12 : 0),
minutes: parts[2],
}
);
}
},
// Translation of the time selector icon button title.
}}
/>
the i18n prop gives us the ability to convert to am pm format. Furthermore, it’d be nice if the complete set of component props were shown in the documentation. Hope we can fix this soon! For now, this should suffice.