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

Question

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 },
],

Kinesthesia

Answer 1

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

Smoothen

Yes i did this but not working. How to set dateformat from html like [owlDateTime]="fromDateOfConfirmation" ?? – Kinesthesia

i think they didn't provide a input parameter to change it like this – Smoothen

So how can we know that which one from MY_CUSTOM_FORMATS is applied ? And how ?? – Kinesthesia

inside the component we are using the provider. so for that component only custom formats gonna add. – Smoothen

But my question is which one ?? – Kinesthesia

if u are using multiple pickers inside the component then it's gonna effect all – Smoothen

I want to set one format in my whole application so that won't matter. – Kinesthesia

yes. then instead of component add the povider object under app module privoder list – Smoothen

But that is not working. I already did that earlier. That's why i am looking for a solution. – Kinesthesia

create a a demo – Smoothen

Should I because It's same to same as stackblitz demo that you provided. – Kinesthesia

stackblitz.com/edit/angular-zewtf6?file=src/styles.css Here is demo link pls check it out and let me know. @Sachila Ranawaka – Kinesthesia

Let us continue this discussion in chat. – Kinesthesia

I Need like this 06-05-2020 11:22 AM GMT. I tried but i am able to get timezone like +05:30 only. But i need to show it like String(IST). Please help regarding this – Bartley

Cant see private chats or any sort of solution when the links are broken so this answer isnt so useful – Heliostat

Answer 2

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

Janenejanenna

Best answer here. The documentation for owl-date-time is extremely poor and the moment.js solution to format in the module has zero documentation can you can see that everyone is using the same OWL_MOMENT_FORMATS value because it is not clear what other values could look like. Personally, i regret using owl-date-time, but i am happy that i found this answer – Heliostat

Awesome! Your are hired! – Droit

Answer 3

I think you forgot to import the OwlMomentDateTimeModule.

@NgModule({
    imports: [
        OwlDateTimeModule,
        OwlNativeDateTimeModule,
        OwlMomentDateTimeModule
    ],
    providers: [
        {
            provide: OWL_DATE_TIME_FORMATS, useValue: OWL_MOMENT_FORMATS
        }
    ]
})

Dvinsk

Answer 4

If you want to use that type of formats, you need to use a separate module called

OwlMomentDateTimeModule

But it requires an aditional NPM package ( MoementJS )

First step, install MomentJS

npm install ng-pick-datetime-moment moment --save;

Then you can use your formats

import { NgModule } from '@angular/core';
import { OwlDateTimeModule, OWL_DATE_TIME_FORMATS} from 'ng-pick-datetime';
import { OwlMomentDateTimeModule } from 'ng-pick-datetime-moment';

// See the Moment.js docs for the meaning of these formats:
// https://momentjs.com/docs/#/displaying/format/
export const MY_MOMENT_FORMATS = {
    parseInput: 'l LT',
    fullPickerInput: 'l LT',
    datePickerInput: 'l',
    timePickerInput: 'LT',
    monthYearLabel: 'MMM YYYY',
    dateA11yLabel: 'LL',
    monthYearA11yLabel: 'MMMM YYYY',
};

@NgModule({
    imports: [OwlDateTimeModule, OwlMomentDateTimeModule],
    providers: [
        {provide: OWL_DATE_TIME_FORMATS, useValue: MY_MOMENT_FORMATS},
    ],
})
export class AppExampleModule {
}

As an alternative you can use standard formatters

import { NgModule } from '@angular/core';
import { OwlDateTimeModule, OwlNativeDateTimeModule, OWL_DATE_TIME_FORMATS} from 'ng-pick-datetime';

// learn more about this from
// https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/DateTimeFormat
export const MY_NATIVE_FORMATS = {
    fullPickerInput: {year: 'numeric', month: 'numeric', day: 'numeric', hour: 'numeric', minute: 'numeric'},
    datePickerInput: {year: 'numeric', month: 'numeric', day: 'numeric'},
    timePickerInput: {hour: 'numeric', minute: 'numeric'},
    monthYearLabel: {year: 'numeric', month: 'short'},
    dateA11yLabel: {year: 'numeric', month: 'long', day: 'numeric'},
    monthYearA11yLabel: {year: 'numeric', month: 'long'},
};

@NgModule({
    imports: [OwlDateTimeModule, OwlNativeDateTimeModule],
    providers: [
        {provide: OWL_DATE_TIME_FORMATS, useValue: MY_NATIVE_FORMATS},
    ],
})
export class AppExampleModule {
}

Read more about Ng Date Time Picker here

Polymerism