How to use ion-datetime?

Ionic Framework
1

Hi,

I’m quite confused about ion-datetime. I’m using ion-datetime in a wrapper component called ko-datetime to keep settings generic across the app because i could not figure out a way to globally set translations for months and days.

The problem i’m struggling with goes into the 2 way binding. I have to capture the “done event” myself to emit the change via the an @Output like this.

import { Component, OnInit, Input, Output, EventEmitter, ApplicationRef } from '@angular/core';
import { TranslateService } from '@ngx-translate/core';

@Component({
  selector: 'ko-datetime',
  templateUrl: './ko-datetime.component.html',
  styleUrls: ['./ko-datetime.component.scss']
})
export class KoDatetimeComponent implements OnInit {
  @Input() date;
  @Output() dateChange = new EventEmitter<string>();
  @Input() displayFormat;

  customMonthNames;

  constructor(public translate: TranslateService, public appRef: ApplicationRef) { }

  ngOnInit() {}

  getCustomMonthNames(){
    this.customMonthNames = [];

    this.customMonthNames.push(this.translate.instant('months.full.jan'));
    this.customMonthNames.push(this.translate.instant('months.full.feb'));
    this.customMonthNames.push(this.translate.instant('months.full.mar'));
    this.customMonthNames.push(this.translate.instant('months.full.apr'));
    this.customMonthNames.push(this.translate.instant('months.full.may'));
    this.customMonthNames.push(this.translate.instant('months.full.jun'));
    this.customMonthNames.push(this.translate.instant('months.full.jul'));
    this.customMonthNames.push(this.translate.instant('months.full.aug'));
    this.customMonthNames.push(this.translate.instant('months.full.sep'));
    this.customMonthNames.push(this.translate.instant('months.full.oct'));
    this.customMonthNames.push(this.translate.instant('months.full.nov'));
    this.customMonthNames.push(this.translate.instant('months.full.dec'));

    return this.customMonthNames;
  }

  getCustomPickerOptions(){
    return {
      buttons: [{
        text: this.translate.instant('general.cancel'),
        handler: () => {
          return false;
        }
      },{
        text: this.translate.instant('general.done'),
        handler: (value) => {
          this.date = value;
          this.dateChange.emit(value);
          this.appRef.tick();
        }
      }]
    }
  }
}

When i capture the “done event” like this it no longer changes the input value unless i put in the ApplicationRef.tick() function. Which seems a bit dirty to me but it works.

Also the value being returned is a object with month, day, year values but i was under the impression a iso string was going to be returned. This way i can’t pre define a value myself.

Maybe i’m going at this entirely wrong so if anyone could help me out here ?

With best regards,
Robin