I want to use a pick-date picker. I want to set the date format, but couldn't figure out how to do it. So can anyone give me an example how to set the date format ?
Here is the code of my date picker:
<label class="control-label my-label">From Date</label>
<div class="input-group">
<input tabindex="1" class="form-control" [owlDateTime]="fromDateOfConfirmation" [(ngModel)]="fromDate" name="fromDate" [owlDateTimeTrigger]="fromDateOfConfirmation"
>
<span class="input-group-addon trigger" [owlDateTimeTrigger]="fromDateOfConfirmation">
<span class="fa fa-calendar nopad2 fa-lg"></span>
</span>
<owl-date-time [pickerType]="'calendar'" #fromDateOfConfirmation></owl-date-time>
</div>
EDIT
I already tried this one.
export const MY_NATIVE_FORMATS = {
parseInput: 'LL LT',
fullPickerInput: 'LL LT',
datePickerInput: 'LL',
timePickerInput: 'LT',
monthYearLabel: 'MMM YYYY',
dateA11yLabel: 'LL',
monthYearA11yLabel: 'MMMM YYYY',
};
providers: [
{ provide: OWL_DATE_TIME_FORMATS, useValue: MY_NATIVE_FORMATS },
],
To Implement Date Picker on TextField() and TextFormField(): First of all, you need to add intl Flutter package in your dependency to get formatted date output from date picker. Add the following line in your pubspec. yaml file to add intl package to your project.
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
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With