Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

ng-pick-date picker : How to set date format?

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 },
],
like image 709
Aarsh Avatar asked Jun 13 '18 09:06

Aarsh


People also ask

How do I show date picker on TextField tap and get formatted date in flutter?

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.


2 Answers

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

like image 65
Armen Stepanyan Avatar answered Oct 13 '22 02:10

Armen Stepanyan


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

like image 23
Sachila Ranawaka Avatar answered Oct 13 '22 01:10

Sachila Ranawaka