feat(TimePicker): add the ability to set a custom name attribute for the input element

Author: mrholek

docs/content/forms/time-picker.md

@@ -173,6 +173,7 @@ const timePickerList = timePickerElementList.map(timePickerEl => {
 | `inputReadOnly` | boolean | `false` | Toggle the readonly state for the component. |
 | `invalid` | boolean | `false` | Toggle the invalid state for the component. |
 | `locale` | string | `'default'` | Sets the default locale for components. If not set, it is inherited from the navigator.language. |
+| `name` | string | `null` | Set the name attribute for the input element. |
 | `placeholder` | string | `'Select time'` | Specifies a short hint that is visible in the input. |
 | `size` | `'sm'` \| `'lg'` | `null` | Size the component small or large. |
 | `time` | date \| string \| null | `null` | Default value of the component |

js/src/time-picker.js

@@ -84,6 +84,7 @@ const Default = {
   inputReadOnly: false,
   invalid: false,
   locale: 'default',
+  name: null,
   placeholder: 'Select time',
   required: true,
   size: null,
@@ -105,6 +106,7 @@ const DefaultType = {
   inputReadOnly: 'boolean',
   invalid: 'boolean',
   locale: 'string',
+  name: 'string',
   placeholder: 'string',
   required: 'boolean',
   size: '(string|null)',
@@ -334,8 +336,8 @@ class TimePicker extends BaseComponent {
     inputEl.type = 'text'
     inputEl.value = this._date ? this._date.toLocaleTimeString(this._config.locale) : ''
 
-    if (this._element.id) {
-      inputEl.name = `time-picker-${this._element.id}`
+    if (this._config.name || this._element.id) {
+      inputEl.name = this._config.name || `time-picker-${this._element.id}`
     }
 
     const events = ['change', 'keyup', 'paste']