How to change date format dynamically ?

[armenstepanyan]

Is it possible to change date format dynamically ? As mentioned at documentation I need to setup date format in angular module, but for my case I need to change displayed date format dynamically when I change select value, so is it possible ?

Example

<select [(ngModel)]="dateFormat">
<option value="y/M/d">y/M/d</option>
<option value="dd-MM-yy">dd-MM-yy</option>
......
</select>

<input [owlDateTime]="dt1" [owlDateTimeTrigger]="dt1" placeholder="Date Time">
<owl-date-time #dt1></owl-date-time>

[Ghostbird]

Yes, you can use the injectable DateTimeAdapter. See: https://danielykpan.github.io/date-time-picker/#locale-formats

EDIT: I misunderstood your use case. It might not work unless you do a little extra work. See: https://github.com/DanielYKPan/date-time-picker/issues/355#issuecomment-390946995

[spd789562]

I use a directive to solve my input display problem

import { Directive, Input, HostListener } from "@angular/core";
import * as moment from "moment";

interface OwlDateChangeEventPayload {
    soruce: any;
    value: moment.Moment;
    input: HTMLInputElement;
}

@Directive({
    selector: "input[owlDateFormat]",
})
export class OwlDateFormatDirective {
    private _dateFormat: string = "YYYY/MM/DD";

    @Input()
    set dateFormat(value: string) {
        this._dateFormat = value;
    }

    // override owl date formate
    @HostListener("dateTimeChange", ["$event"])
    dateTimeChange(payload: OwlDateChangeEventPayload) {
        const input = payload.input;
        input.value = payload.value.format(this._dateFormat);
    }
}

And add corresponding attribute on input

<input
    [owlDateTime]="dt1" 

    owlDateFormat
    [dateFormat]="'YYYY/MM/DD HH:mm'"
>

[SanjidHaque]

I use a directive to solve my input display problem

import { Directive, Input, HostListener } from "@angular/core";
import * as moment from "moment";

interface OwlDateChangeEventPayload {
    soruce: any;
    value: moment.Moment;
    input: HTMLInputElement;
}

@Directive({
    selector: "input[owlDateFormat]",
})
export class OwlDateFormatDirective {
    private _dateFormat: string = "YYYY/MM/DD";

    @Input()
    set dateFormat(value: string) {
        this._dateFormat = value;
    }

    // override owl date formate
    @HostListener("dateTimeChange", ["$event"])
    dateTimeChange(payload: OwlDateChangeEventPayload) {
        const input = payload.input;
        input.value = payload.value.format(this._dateFormat);
    }
}

And add corresponding attribute on input

<input
    [owlDateTime]="dt1" 

    owlDateFormat
    [dateFormat]="'YYYY/MM/DD HH:mm'"
>

This helped me to resolve the issue, thanks a lot!