ng-pick-date picker : How to set date format?
You need to create another input which will display formated date value. In your html create one input for [ngModel] and another one to display formatted date value.
<div class="date-container">
<!-- Invisible input keep ngModel value -->
<input
class="shadow-input"
name="date_time"
[(ngModel)]="currentDate"
[owlDateTime]="dt1"
>
<!-- Trigger owl-datepicker, display formatted date value -->
<input
type="text"
[owlDateTimeTrigger]="dt1"
placeholder="Date Time"
[value]="currentDate | dateFilter:dateFormat"
>
<owl-date-time #dt1></owl-date-time>
</div>
See demo on stackblitz
you have to pass the custom object to the service through provider useValue
export const MY_CUSTOM_FORMATS = {
parseInput: 'LL LT',
fullPickerInput: 'LL LT',
datePickerInput: 'LL',
timePickerInput: 'LT',
monthYearLabel: 'MMM YYYY',
dateA11yLabel: 'LL',
monthYearA11yLabel: 'MMMM YYYY',
};
selector: 'app-custom-format-example',
templateUrl: './custom-format.component.html',
providers: [
{provide: OWL_DATE_TIME_FORMATS, useValue: MY_CUSTOM_FORMATS},
],
check the demo