feat(DatePicker, DateRangePicker): add the ability to set custom name attributes for input elements

Author: mrholek

docs/content/forms/date-picker.md

@@ -234,6 +234,7 @@ const datePickerList = datePickerElementList.map(datePickerEl => {
 | `locale` | string | `'default'` | Sets the default locale for components. If not set, it is inherited from the navigator.language. |
 | `maxDate` | date \| string \| null | `null` | Max selectable date. |
 | `minDate` | date \| string \| null | `null` | Min selectable date. |
+| `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. |
 | `selectAdjacementDays` | boolean | `false` | Set whether days in adjacent months shown before or after the current month are selectable. This only applies if the `showAdjacementDays` option is set to true. |
 | `showAdjacementDays` | boolean | `true` | Set whether to display dates in adjacent months (non-selectable) at the start and end of the current month. |

docs/content/forms/date-range-picker.md

@@ -294,6 +294,7 @@ const dateRangePickerList = dateRangePickerElementList.map(dateRangePickerEl =>
 | `disabled` | boolean | `false` | Toggle the disabled state for the component. |
 | `disabledDates` | array \| null | `null` | Specify the list of dates that cannot be selected. |
 | `endDate` | date \| string \| null | `null` | Initial selected to date (range). |
+| `endName` | string | `null` | Set the name attribute for the end date input element. |
 | `firstDayOfWeek` | number | `1` | <p>Sets the day of start week.</p>  <ul><li>`0` - Sunday</li><li>`1` - Monday</li><li>`2` - Tuesday</li><li>`3` - Wednesday</li><li>`4` - Thursday</li><li>`5` - Friday</li><li>`6` - Saturday</li></ul> |
 | `footer` | boolean | `false` | Toggle visibility of footer element. |
 | `format` | string | | Set date format. We use date-fns to format dates. Visit <a href="https://date-fns.org/v2.28.0/docs/format" target="_blank" rel="nofollow">https://date-fns.org/v2.28.0/docs/format</a> to check accepted patterns. |
@@ -311,6 +312,7 @@ const dateRangePickerList = dateRangePickerElementList.map(dateRangePickerEl =>
 | `showAdjacementDays` | boolean | `true` | Set whether to display dates in adjacent months (non-selectable) at the start and end of the current month. |
 | `size` | `'sm'` \| `'lg'` | `null` | Size the component small or large. |
 | `startDate` | date \| string \| null | `null` | Initial selected date. |
+| `startName` | string | `null` | Set the name attribute for the start date input element. |
 | `timepicker` | boolean | `false` | Provide an additional time selection by adding select boxes to choose times. |
 | `todayButton` | string | `'Today'` | Today button inner HTML |
 | `todayButtonClasses` | array \| string | `['btn', 'btn-sm', 'me-2']` | CSS class names that will be added to the today button |

js/src/date-range-picker.js

@@ -81,6 +81,7 @@ const Default = {
   disabled: false,
   disabledDates: null,
   endDate: null,
+  endName: null,
   firstDayOfWeek: 1,
   footer: false,
   format: null,
@@ -89,6 +90,7 @@ const Default = {
   locale: 'default',
   maxDate: null,
   minDate: null,
+  name: null,
   placeholder: ['Start date', 'End date'],
   range: true,
   ranges: {},
@@ -97,6 +99,7 @@ const Default = {
   separator: true,
   size: null,
   startDate: null,
+  startName: null,
   selectAdjacementDays: false,
   selectEndDate: false,
   showAdjacementDays: true,
@@ -118,6 +121,7 @@ const DefaultType = {
   disabledDates: '(array|null)',
   disabled: 'boolean',
   endDate: '(date|string|null)',
+  endName: 'string',
   firstDayOfWeek: 'number',
   footer: 'boolean',
   format: '(string|null)',
@@ -126,6 +130,7 @@ const DefaultType = {
   locale: 'string',
   maxDate: '(date|string|null)',
   minDate: '(date|string|null)',
+  name: 'string',
   placeholder: '(array|string)',
   range: 'boolean',
   ranges: 'object',
@@ -134,6 +139,7 @@ const DefaultType = {
   separator: 'boolean',
   size: '(string|null)',
   startDate: '(date|string|null)',
+  startName: 'string',
   selectAdjacementDays: 'boolean',
   selectEndDate: 'boolean',
   showAdjacementDays: 'boolean',
@@ -445,8 +451,21 @@ class DateRangePicker extends BaseComponent {
     const inputGroupEl = document.createElement('div')
     inputGroupEl.classList.add(CLASS_NAME_INPUT_GROUP)
 
-    const startInputEl = this._createInput(this._config.range ? 'date-range-picker-start-date' : 'date-picker', this._getPlaceholder()[0], this._setInputValue(this._startDate))
-    const endInputEl = this._createInput('date-range-picker-end-date', this._getPlaceholder()[1], this._setInputValue(this._endDate))
+    let startInputName = null
+
+    if (this._config.name || this._config.startName || this._element.id) {
+      startInputName = this._config.name || this._config.startName || (this._config.range ? `date-range-picker-start-date-${this._element.id}` : `date-picker-${this._element.id}`)
+    }
+
+    const startInputEl = this._createInput(startInputName, this._getPlaceholder()[0], this._setInputValue(this._startDate))
+
+    let endInputName = null
+
+    if (this._config.endName || this._element.id) {
+      endInputName = this._config.endName || `date-range-picker-end-date-${this._element.id}`
+    }
+
+    const endInputEl = this._createInput(endInputName, this._getPlaceholder()[1], this._setInputValue(this._endDate))
 
     const inputGroupTextSeparatorEl = document.createElement('div')
     inputGroupTextSeparatorEl.classList.add(CLASS_NAME_SEPARATOR)
@@ -717,8 +736,8 @@ class DateRangePicker extends BaseComponent {
     inputEl.type = 'text'
     inputEl.value = value
 
-    if (this._element.id) {
-      inputEl.name = `${name}-${this._element.id}`
+    if (name) {
+      inputEl.name = name
     }
 
     const events = ['change', 'keyup', 'paste']