MOBILE-3947 datetime: Display placeholder if datetime value is undefined

moodlehq · Mar 11, 2024 · 7287a9b · 7287a9b
1 parent 864087c
commit 7287a9b
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 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
@@ -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
@@ -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;