fix(TimePicker): localize minutes and seconds

Author: mrholek

js/src/time-picker.js

@@ -16,7 +16,8 @@ import {
   convert24hTo12h,
   getAmPm,
   getListOfHours,
-  getMinutesOrSeconds,
+  getListOfMinutes,
+  getListOfSeconds,
   isAmPm,
   isValidTime
 } from './util/time'
@@ -347,9 +348,9 @@ class TimePicker extends Picker {
     this._timePickerBody.append(
       this._createSelect('hours', getListOfHours(this._config.locale)),
       timeSeparatorEl.cloneNode(true),
-      this._createSelect('minutes', getMinutesOrSeconds()),
+      this._createSelect('minutes', getListOfMinutes(this._config.locale, true)),
       timeSeparatorEl,
-      this._createSelect('seconds', getMinutesOrSeconds())
+      this._createSelect('seconds', getListOfSeconds(this._config.locale, true))
     )
 
     if (isAmPm(this._config.locale)) {
@@ -362,8 +363,8 @@ class TimePicker extends Picker {
   _createTimePickerRoll() {
     this._timePickerBody.append(
       this._createTimePickerRollCol(getListOfHours(this._config.locale), 'hours'),
-      this._createTimePickerRollCol(getMinutesOrSeconds(), 'minutes'),
-      this._createTimePickerRollCol(getMinutesOrSeconds(), 'seconds')
+      this._createTimePickerRollCol(getListOfMinutes(this._config.locale), 'minutes'),
+      this._createTimePickerRollCol(getListOfSeconds(this._config.locale), 'seconds')
     )
 
     if (isAmPm(this._config.locale)) {

js/src/util/time.js

@@ -34,16 +34,47 @@ export const getListOfHours = locale => Array.from({ length: isAmPm(locale) ? 12
     label: (isAmPm(locale) ? i + 1 : i).toLocaleString(locale)
   }
 })
-export const getMinutesOrSeconds = locale => Array.from({ length: 60 }, (_, i) => {
+
+export const getListOfMinutes = (locale, valueAsString = false) => Array.from({ length: 60 }, (_, i) => {
+  const d = new Date()
+  d.setMinutes(i)
+  return {
+    value: valueAsString ? i.toString() : i,
+    label: d
+          .toLocaleTimeString(locale, {
+            hour: '2-digit',
+            hour12: false,
+            minute: '2-digit',
+            second: '2-digit'
+          })
+          .split(':')[1]
+  }
+})
+
+export const getListOfSeconds = (locale, valueAsString = false) => Array.from({ length: 60 }, (_, i) => {
+  const d = new Date()
+  d.setSeconds(i)
   return {
-    value: i,
-    label: i.toLocaleString(locale).padStart(2, (0).toLocaleString(locale))
+    value: valueAsString ? i.toString() : i,
+    label: d
+          .toLocaleTimeString(locale, {
+            hour: '2-digit',
+            hour12: false,
+            minute: '2-digit',
+            second: '2-digit'
+          })
+          .split(':')[2]
   }
 })
+
 export const getSelectedHour = (date, locale) => date ? (isAmPm(locale) ? convert24hTo12h(date.getHours()) : date.getHours()) : ''
+
 export const getSelectedMinutes = date => (date ? date.getMinutes() : '')
+
 export const getSelectedSeconds = date => (date ? date.getSeconds() : '')
+
 export const isAmPm = locale => ['am', 'AM', 'pm', 'PM'].some(el => new Date().toLocaleString(locale).includes(el))
+
 export const isValidTime = time => {
   const d = new Date(`1970-01-01 ${time}`)
   return d instanceof Date && d.getTime()