diff --git a/angular/src/directives/proxies.ts b/angular/src/directives/proxies.ts
index eed5677668..a807cb6c6d 100644
--- a/angular/src/directives/proxies.ts
+++ b/angular/src/directives/proxies.ts
@@ -213,7 +213,7 @@ export class Content {
}
export declare interface Datetime extends StencilComponents<'IonDatetime'> {}
-@Component({ selector: 'ion-datetime', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: '', inputs: ['mode', 'disabled', 'min', 'max', 'displayFormat', 'pickerFormat', 'cancelText', 'doneText', 'yearValues', 'monthValues', 'dayValues', 'hourValues', 'minuteValues', 'monthNames', 'monthShortNames', 'dayNames', 'dayShortNames', 'pickerOptions', 'placeholder', 'value'] })
+@Component({ selector: 'ion-datetime', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: '', inputs: ['mode', 'name', 'disabled', 'min', 'max', 'displayFormat', 'pickerFormat', 'cancelText', 'doneText', 'yearValues', 'monthValues', 'dayValues', 'hourValues', 'minuteValues', 'monthNames', 'monthShortNames', 'dayNames', 'dayShortNames', 'pickerOptions', 'placeholder', 'value'] })
export class Datetime {
ionCancel: EventEmitter;
ionChange: EventEmitter;
@@ -222,7 +222,7 @@ export class Datetime {
constructor(r: ElementRef) {
const el = r.nativeElement;
proxyMethods(this, el, ['open']);
- proxyInputs(this, el, ['mode', 'disabled', 'min', 'max', 'displayFormat', 'pickerFormat', 'cancelText', 'doneText', 'yearValues', 'monthValues', 'dayValues', 'hourValues', 'minuteValues', 'monthNames', 'monthShortNames', 'dayNames', 'dayShortNames', 'pickerOptions', 'placeholder', 'value']);
+ proxyInputs(this, el, ['mode', 'name', 'disabled', 'min', 'max', 'displayFormat', 'pickerFormat', 'cancelText', 'doneText', 'yearValues', 'monthValues', 'dayValues', 'hourValues', 'minuteValues', 'monthNames', 'monthShortNames', 'dayNames', 'dayShortNames', 'pickerOptions', 'placeholder', 'value']);
proxyOutputs(this, el, ['ionCancel', 'ionChange', 'ionStyle']);
}
}
diff --git a/core/src/components.d.ts b/core/src/components.d.ts
index 7c916df39c..e5455874cf 100644
--- a/core/src/components.d.ts
+++ b/core/src/components.d.ts
@@ -1275,6 +1275,10 @@ export namespace Components {
*/
'monthValues'?: number[] | number | string;
/**
+ * The name of the control, which is submitted with the form data.
+ */
+ 'name': string;
+ /**
* Opens the datetime overlay.
*/
'open': () => Promise;
@@ -1361,6 +1365,10 @@ export namespace Components {
*/
'monthValues'?: number[] | number | string;
/**
+ * The name of the control, which is submitted with the form data.
+ */
+ 'name'?: string;
+ /**
* Emitted when the datetime selection was cancelled.
*/
'onIonCancel'?: (event: CustomEvent) => void;
diff --git a/core/src/components/datetime/datetime.tsx b/core/src/components/datetime/datetime.tsx
index 3afeea4668..37416c72df 100644
--- a/core/src/components/datetime/datetime.tsx
+++ b/core/src/components/datetime/datetime.tsx
@@ -1,7 +1,7 @@
import { Component, ComponentInterface, Element, Event, EventEmitter, Method, Prop, State, Watch } from '@stencil/core';
import { DatetimeOptions, InputChangeEvent, Mode, PickerColumn, PickerColumnOption, PickerOptions, StyleEvent } from '../../interface';
-import { clamp } from '../../utils/helpers';
+import { clamp, renderHiddenInput } from '../../utils/helpers';
import { hostContext } from '../../utils/theme';
import { DatetimeData, LocaleData, convertDataToISO, convertFormatToKey, convertToArrayOfNumbers, convertToArrayOfStrings, dateDataSortValue, dateSortValue, dateValueRange, daysInMonth, getValueFromFormat, parseDate, parseTemplate, renderDatetime, renderTextFormat, updateDate } from './datetime-util';
@@ -35,6 +35,11 @@ export class Datetime implements ComponentInterface {
*/
@Prop() mode!: Mode;
+ /**
+ * The name of the control, which is submitted with the form data.
+ */
+ @Prop() name: string = this.inputId;
+
/**
* If `true`, the user cannot interact with the datetime. Defaults to `false`.
*/
@@ -523,6 +528,7 @@ export class Datetime implements ComponentInterface {
if (datetimeText == null) {
datetimeText = this.placeholder != null ? this.placeholder : '';
}
+ renderHiddenInput(this.el, this.name, this.value, this.disabled);
return [
{datetimeText}
,
@@ -534,7 +540,8 @@ export class Datetime implements ComponentInterface {
onClick={this.open.bind(this)}
class="datetime-cover"
>
-
+ ,
+
];
}
}
diff --git a/core/src/components/datetime/readme.md b/core/src/components/datetime/readme.md
index 386ede718e..bef017b850 100644
--- a/core/src/components/datetime/readme.md
+++ b/core/src/components/datetime/readme.md
@@ -221,6 +221,7 @@ dates in JavaScript.
| `monthNames` | `month-names` | Full names for each month name. This can be used to provide locale month names. Defaults to English. | `string \| string[] \| undefined` |
| `monthShortNames` | `month-short-names` | Short abbreviated names for each month name. This can be used to provide locale month names. Defaults to English. | `string \| string[] \| undefined` |
| `monthValues` | -- | Values used to create the list of selectable months. By default the month values range from `1` to `12`. However, to control exactly which months to display, the `monthValues` input can take a number, an array of numbers, or a string of comma separated numbers. For example, if only summer months should be shown, then this input value would be `monthValues="6,7,8"`. Note that month numbers do *not* have a zero-based index, meaning January's value is `1`, and December's is `12`. | `number \| number[] \| string \| undefined` |
+| `name` | `name` | The name of the control, which is submitted with the form data. | `string` |
| `pickerFormat` | `picker-format` | The format of the date and time picker columns the user selects. A datetime input can have one or many datetime parts, each getting their own column which allow individual selection of that particular datetime part. For example, year and month columns are two individually selectable columns which help choose an exact date from the datetime picker. Each column follows the string parse format. Defaults to use `displayFormat`. | `string \| undefined` |
| `pickerOptions` | -- | Any additional options that the picker interface can accept. See the [Picker API docs](../../picker/Picker) for the picker options. | `Partial \| undefined` |
| `placeholder` | `placeholder` | The text to display when there's no date selected yet. Using lowercase to match the input attribute | `null \| string \| undefined` |
diff --git a/core/src/utils/helpers.ts b/core/src/utils/helpers.ts
index 7c65fc2d3d..17edf10157 100644
--- a/core/src/utils/helpers.ts
+++ b/core/src/utils/helpers.ts
@@ -21,7 +21,7 @@ export function hasShadowDom(el: HTMLElement) {
return !!el.shadowRoot && !!(el as any).attachShadow;
}
-export function renderHiddenInput(container: HTMLElement, name: string, value: string, disabled: boolean) {
+export function renderHiddenInput(container: HTMLElement, name: string, value: string | undefined | null, disabled: boolean) {
if (hasShadowDom(container)) {
let input = container.querySelector('input.aux-input') as HTMLInputElement | null;
if (!input) {
@@ -32,7 +32,7 @@ export function renderHiddenInput(container: HTMLElement, name: string, value: s
}
input.disabled = disabled;
input.name = name;
- input.value = value;
+ input.value = value || '';
}
}