MOBILE-2795 date: Fix format for datetime inputs

src/addon/mod/data/fields/date/component/date.ts

@@ -13,6 +13,7 @@
 // limitations under the License.
 import { Component } from '@angular/core';
 import { FormBuilder } from '@angular/forms';
+import { TranslateService } from '@ngx-translate/core';
 import { CoreTimeUtilsProvider } from '@providers/utils/time';
 import { AddonModDataFieldPluginComponent } from '../../../classes/field-plugin-component';
 
@@ -27,7 +28,7 @@ export class AddonModDataFieldDateComponent extends AddonModDataFieldPluginCompo
 
     format: string;
 
-    constructor(protected fb: FormBuilder, protected timeUtils: CoreTimeUtilsProvider) {
+    constructor(protected fb: FormBuilder, protected timeUtils: CoreTimeUtilsProvider, protected translate: TranslateService) {
         super(fb);
     }
 
@@ -40,7 +41,10 @@ export class AddonModDataFieldDateComponent extends AddonModDataFieldPluginCompo
         }
 
         let val;
-        this.format = this.timeUtils.getLocalizedDateFormat('LL');
+
+        // Calculate format to use. ion-datetime doesn't support escaping characters ([]), so we remove them.
+        this.format = this.timeUtils.convertPHPToMoment(this.translate.instant('core.strftimedatefullshort'))
+                .replace(/[\[\]]/g, '');
 
         if (this.mode == 'search') {
             this.addControl('f_' + this.field.id + '_z');

src/addon/userprofilefield/datetime/component/datetime.ts

@@ -14,6 +14,7 @@
 
 import { Component, Input, OnInit } from '@angular/core';
 import { FormGroup, FormBuilder, Validators } from '@angular/forms';
+import { TranslateService } from '@ngx-translate/core';
 import { CoreTimeUtilsProvider } from '@providers/utils/time';
 import { CoreUtilsProvider } from '@providers/utils/utils';
 
@@ -30,7 +31,8 @@ export class AddonUserProfileFieldDatetimeComponent implements OnInit {
     @Input() disabled = false; // True if disabled. Defaults to false.
     @Input() form?: FormGroup; // Form where to add the form control.
 
-    constructor(private fb: FormBuilder, private timeUtils: CoreTimeUtilsProvider, protected utils: CoreUtilsProvider) { }
+    constructor(private fb: FormBuilder, private timeUtils: CoreTimeUtilsProvider, protected utils: CoreUtilsProvider,
+            private translate: TranslateService) { }
 
     /**
      * Component being initialized.
@@ -44,7 +46,10 @@ export class AddonUserProfileFieldDatetimeComponent implements OnInit {
 
             // Check if it's only date or it has time too.
             const hasTime = this.utils.isTrueOrOne(field.param3);
-            field.format = hasTime ? this.timeUtils.getLocalizedDateFormat('LLL') : this.timeUtils.getLocalizedDateFormat('LL');
+
+            // Calculate format to use. ion-datetime doesn't support escaping characters ([]), so we remove them.
+            field.format = this.timeUtils.convertPHPToMoment(this.translate.instant('core.' +
+                    (hasTime ? 'strftimedatetimeshort' : 'strftimedatefullshort'))).replace(/[\[\]]/g, '');
 
             // Check min value.
             if (field.param1) {

src/providers/utils/time.ts

@@ -278,6 +278,7 @@ export class CoreTimeUtilsProvider {
 
     /**
      * Return the localized ISO format (i.e DDMMYY) from the localized moment format. Useful for translations.
+     * DO NOT USE this function for ion-datetime format. Moment escapes characters with [], but ion-datetime doesn't support it.
      *
      * @param {any} localizedFormat Format to use.
      * @return {string} Localized ISO format