From 7287a9b298f262fb1b4f372e83fb2a7cc54af08b Mon Sep 17 00:00:00 2001
From: Dani Palou <dani@moodle.com>
Date: Mon, 11 Mar 2024 12:56:58 +0100
Subject: [PATCH] MOBILE-3947 datetime: Display placeholder if datetime value
 is undefined

---
 .../component/addon-user-profile-field-datetime.html       | 7 ++++++-
 src/theme/theme.base.scss                                  | 5 +++++
 2 files changed, 11 insertions(+), 1 deletion(-)

diff --git a/src/addons/userprofilefield/datetime/component/addon-user-profile-field-datetime.html b/src/addons/userprofilefield/datetime/component/addon-user-profile-field-datetime.html
index 08e8498a2ce..5c4aaaa7014 100644
--- a/src/addons/userprofilefield/datetime/component/addon-user-profile-field-datetime.html
+++ b/src/addons/userprofilefield/datetime/component/addon-user-profile-field-datetime.html
@@ -19,7 +19,12 @@
         </label>
     </ion-label>
 
-    <ion-datetime-button datetime="profile-field-datetime-{{field.shortname}}" id="profile-field-datetime-{{field.shortname}}-button" />
+    <ion-datetime-button datetime="profile-field-datetime-{{field.shortname}}" id="profile-field-datetime-{{field.shortname}}-button">
+        <ng-container *ngIf="control?.value === undefined">
+            <span slot="date-target">{{ 'core.choosedots' | translate }}</span>
+            <span slot="time-target">{{ 'core.choosedots' | translate }}</span>
+        </ng-container>
+    </ion-datetime-button>
     <ion-modal [keepContentsMounted]="true">
         <ng-template>
             <ion-datetime id="profile-field-datetime-{{field.shortname}}" [formControlName]="modelName"
diff --git a/src/theme/theme.base.scss b/src/theme/theme.base.scss
index 0203630d7d6..9f00d3572da 100644
--- a/src/theme/theme.base.scss
+++ b/src/theme/theme.base.scss
@@ -2022,6 +2022,11 @@ ion-item.item-label-stacked ion-datetime-button {
     align-self: self-end;
 }
 
+ion-datetime-button p {
+    margin-top: 4px;
+    margin-bottom: 4px;
+}
+
 // Table App styles
 table.core-table {
     border-collapse: collapse;