diff --git a/angular/src/directives/proxies.ts b/angular/src/directives/proxies.ts
index f7c23a9a8e..00c90c7a42 100644
--- a/angular/src/directives/proxies.ts
+++ b/angular/src/directives/proxies.ts
@@ -193,7 +193,7 @@ proxyMethods(IonContent, ['getScrollElement', 'scrollToTop', 'scrollToBottom', '
proxyInputs(IonContent, ['color', 'fullscreen', 'forceOverscroll', 'scrollX', 'scrollY', 'scrollEvents']);
export declare interface IonDatetime extends StencilComponents<'IonDatetime'> {}
-@Component({ selector: 'ion-datetime', changeDetection: 0, template: '', inputs: ['mode', 'name', 'disabled', 'min', 'max', 'displayFormat', 'pickerFormat', 'cancelText', 'doneText', 'yearValues', 'monthValues', 'dayValues', 'hourValues', 'minuteValues', 'monthNames', 'monthShortNames', 'dayNames', 'dayShortNames', 'pickerOptions', 'placeholder', 'value'] })
+@Component({ selector: 'ion-datetime', changeDetection: 0, template: '', inputs: ['mode', 'name', 'disabled', 'readonly', 'min', 'max', 'displayFormat', 'pickerFormat', 'cancelText', 'doneText', 'yearValues', 'monthValues', 'dayValues', 'hourValues', 'minuteValues', 'monthNames', 'monthShortNames', 'dayNames', 'dayShortNames', 'pickerOptions', 'placeholder', 'value'] })
export class IonDatetime {
ionCancel!: EventEmitter;
ionChange!: EventEmitter;
@@ -207,7 +207,7 @@ export class IonDatetime {
}
}
proxyMethods(IonDatetime, ['open']);
-proxyInputs(IonDatetime, ['mode', 'name', 'disabled', 'min', 'max', 'displayFormat', 'pickerFormat', 'cancelText', 'doneText', 'yearValues', 'monthValues', 'dayValues', 'hourValues', 'minuteValues', 'monthNames', 'monthShortNames', 'dayNames', 'dayShortNames', 'pickerOptions', 'placeholder', 'value']);
+proxyInputs(IonDatetime, ['mode', 'name', 'disabled', 'readonly', 'min', 'max', 'displayFormat', 'pickerFormat', 'cancelText', 'doneText', 'yearValues', 'monthValues', 'dayValues', 'hourValues', 'minuteValues', 'monthNames', 'monthShortNames', 'dayNames', 'dayShortNames', 'pickerOptions', 'placeholder', 'value']);
export declare interface IonFab extends StencilComponents<'IonFab'> {}
@Component({ selector: 'ion-fab', changeDetection: 0, template: '', inputs: ['horizontal', 'vertical', 'edge', 'activated'] })
diff --git a/core/api.txt b/core/api.txt
index 04267b17a9..73688f306c 100644
--- a/core/api.txt
+++ b/core/api.txt
@@ -297,6 +297,7 @@ ion-datetime,prop,name,string,this.inputId,false,false
ion-datetime,prop,pickerFormat,string | undefined,undefined,false,false
ion-datetime,prop,pickerOptions,undefined | { columns?: PickerColumn[] | undefined; buttons?: PickerButton[] | undefined; cssClass?: string | string[] | undefined; backdropDismiss?: boolean | undefined; animated?: boolean | undefined; mode?: "ios" | "md" | undefined; keyboardClose?: boolean | undefined; id?: string | undefined; enterAnimation?: AnimationBuilder | undefined; leaveAnimation?: AnimationBuilder | undefined; },undefined,false,false
ion-datetime,prop,placeholder,null | string | undefined,undefined,false,false
+ion-datetime,prop,readonly,boolean,false,false,false
ion-datetime,prop,value,null | string | undefined,undefined,false,false
ion-datetime,prop,yearValues,number | number[] | string | undefined,undefined,false,false
ion-datetime,method,open,open() => Promise
diff --git a/core/src/components.d.ts b/core/src/components.d.ts
index 939287478a..994dbe12be 100644
--- a/core/src/components.d.ts
+++ b/core/src/components.d.ts
@@ -1190,6 +1190,10 @@ export namespace Components {
*/
'placeholder'?: string | null;
/**
+ * If `true`, the datetime appears normal but is not interactive.
+ */
+ 'readonly': boolean;
+ /**
* The value of the datetime as a valid ISO 8601 datetime string.
*/
'value'?: string | null;
@@ -1292,6 +1296,10 @@ export namespace Components {
*/
'placeholder'?: string | null;
/**
+ * If `true`, the datetime appears normal but is not interactive.
+ */
+ 'readonly'?: boolean;
+ /**
* The value of the datetime as a valid ISO 8601 datetime string.
*/
'value'?: string | null;
diff --git a/core/src/components/datetime/datetime.scss b/core/src/components/datetime/datetime.scss
index e4603de209..e663835926 100644
--- a/core/src/components/datetime/datetime.scss
+++ b/core/src/components/datetime/datetime.scss
@@ -43,6 +43,10 @@
pointer-events: none;
}
+:host(.datetime-readonly) {
+ pointer-events: none;
+}
+
button {
@include input-cover();
}
diff --git a/core/src/components/datetime/datetime.tsx b/core/src/components/datetime/datetime.tsx
index 94f5945fc5..aec4c3d438 100644
--- a/core/src/components/datetime/datetime.tsx
+++ b/core/src/components/datetime/datetime.tsx
@@ -44,6 +44,11 @@ export class Datetime implements ComponentInterface {
*/
@Prop() disabled = false;
+ /**
+ * If `true`, the datetime appears normal but is not interactive.
+ */
+ @Prop() readonly = false;
+
@Watch('disabled')
protected disabledChanged() {
this.emitStyle();
@@ -544,7 +549,7 @@ export class Datetime implements ComponentInterface {
}
hostData() {
- const { inputId, disabled, isExpanded, el, placeholder } = this;
+ const { inputId, disabled, readonly, isExpanded, el, placeholder } = this;
const addPlaceholderClass =
(this.getText() === undefined && placeholder != null) ? true : false;
@@ -563,6 +568,7 @@ export class Datetime implements ComponentInterface {
'aria-labelledby': labelId,
class: {
'datetime-disabled': disabled,
+ 'datetime-readonly': readonly,
'datetime-placeholder': addPlaceholderClass,
'in-item': hostContext('ion-item', el)
}
diff --git a/core/src/components/datetime/readme.md b/core/src/components/datetime/readme.md
index f9b841b930..f67459220f 100644
--- a/core/src/components/datetime/readme.md
+++ b/core/src/components/datetime/readme.md
@@ -453,6 +453,7 @@ customPickerOptions.pickerOptions = customPickerButtons;
| `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` | `undefined` |
| `pickerOptions` | -- | Any additional options that the picker interface can accept. See the [Picker API docs](../../picker/Picker) for the picker options. | `undefined \| { columns?: PickerColumn[] \| undefined; buttons?: PickerButton[] \| undefined; cssClass?: string \| string[] \| undefined; backdropDismiss?: boolean \| undefined; animated?: boolean \| undefined; mode?: "ios" \| "md" \| undefined; keyboardClose?: boolean \| undefined; id?: string \| undefined; enterAnimation?: AnimationBuilder \| undefined; leaveAnimation?: AnimationBuilder \| undefined; }` | `undefined` |
| `placeholder` | `placeholder` | The text to display when there's no date selected yet. Using lowercase to match the input attribute | `null \| string \| undefined` | `undefined` |
+| `readonly` | `readonly` | If `true`, the datetime appears normal but is not interactive. | `boolean` | `false` |
| `value` | `value` | The value of the datetime as a valid ISO 8601 datetime string. | `null \| string \| undefined` | `undefined` |
| `yearValues` | `year-values` | Values used to create the list of selectable years. By default the year values range between the `min` and `max` datetime inputs. However, to control exactly which years to display, the `yearValues` input can take a number, an array of numbers, or string of comma separated numbers. For example, to show upcoming and recent leap years, then this input's value would be `yearValues="2024,2020,2016,2012,2008"`. | `number \| number[] \| string \| undefined` | `undefined` |
diff --git a/core/src/components/datetime/test/preview/index.html b/core/src/components/datetime/test/preview/index.html
index 2531d7f117..a7ca9377dd 100644
--- a/core/src/components/datetime/test/preview/index.html
+++ b/core/src/components/datetime/test/preview/index.html
@@ -42,6 +42,11 @@
+
+ Readonly
+
+
+
YYYY