Choose datetime datepicker formatting in ng-pick

Question

Choose datetime datepicker formatting in ng-pick

Currently, I am utilizing Angular and have incorporated the ng-pick-datetime npm. However, when attempting to adjust the format after selecting a date (dd/MM/yyyy), it consistently displays as (MM/dd/yyyy) instead. I am uncertain about how to rectify this situation.

To provide further clarity on my issue, refer to the screenshot below:

https://i.stack.imgur.com/zP3dK.jpg

HTML

<input
    [owlDateTime]="dt1"
    [owlDateTimeTrigger]="dt1"
    placeholder="Wedding Anniversary"
    formControlName="wedding"
    class="form-control"
    onkeydown="return false"
    id="text-input"
    name="wedding"
    max="{{ maxDate | date: 'yyyy-MM-dd' }}"
  />
  <owl-date-time #dt1 [pickerType]="'calendar'"></owl-date-time>

I am seeking to achieve the desired result of (dd/MM/yyyy). Thanks in advance for any assistance provided...

angular typescript npm

Answer 1

Answer №1

Integrate an object into your component that includes the desired date format.

For more details:

import { DateTimeAdapter, OWL_DATE_TIME_FORMATS, OWL_DATE_TIME_LOCALE } from 'ng-pick-datetime';
import { MomentDateTimeAdapter } from 'ng-pick-datetime-moment';

export const MY_CUSTOM_FORMATS = {
  parseInput: 'DD/MM/YYYY',
  fullPickerInput: 'DD/MM/YYYY hh:mm a',
  datePickerInput: 'DD/MM/YYYY',
  timePickerInput: 'hh:mm a',
  monthYearLabel: 'MMM-YYYY',
  dateA11yLabel: 'LL',
  monthYearA11yLabel: 'MMMM-YYYY'
};

@Component({
  selector: 'time-series',
  templateUrl: './time-series.component.html',
  styleUrls: ['./time-series.component.scss'],
  providers: [
    { provide: DateTimeAdapter, useClass: MomentDateTimeAdapter, deps: [OWL_DATE_TIME_LOCALE] },
    { provide: OWL_DATE_TIME_FORMATS, useValue: MY_CUSTOM_FORMATS }
  ]
})
@Injectable()
export class TimeSeriesComponent {
   ....
}

Answer 2

Integrate an object into your component that includes the desired date format.

For more details:

import { DateTimeAdapter, OWL_DATE_TIME_FORMATS, OWL_DATE_TIME_LOCALE } from 'ng-pick-datetime';
import { MomentDateTimeAdapter } from 'ng-pick-datetime-moment';

export const MY_CUSTOM_FORMATS = {
  parseInput: 'DD/MM/YYYY',
  fullPickerInput: 'DD/MM/YYYY hh:mm a',
  datePickerInput: 'DD/MM/YYYY',
  timePickerInput: 'hh:mm a',
  monthYearLabel: 'MMM-YYYY',
  dateA11yLabel: 'LL',
  monthYearA11yLabel: 'MMMM-YYYY'
};

@Component({
  selector: 'time-series',
  templateUrl: './time-series.component.html',
  styleUrls: ['./time-series.component.scss'],
  providers: [
    { provide: DateTimeAdapter, useClass: MomentDateTimeAdapter, deps: [OWL_DATE_TIME_LOCALE] },
    { provide: OWL_DATE_TIME_FORMATS, useValue: MY_CUSTOM_FORMATS }
  ]
})
@Injectable()
export class TimeSeriesComponent {
   ....
}

Answer 3

Answer №2

Utilizing picker with MomentJS Below is a demonstration of utilizing OwlMomentDateTimeModule with various date-time formats: (Please note that OwlMomentDateTimeModule relies on MomentJS)

Installation via npm:

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

Example Code:

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

// Refer to the Moment.js documentation for the explanation 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 AppDemoModule {
}

Answer 4

Utilizing picker with MomentJS Below is a demonstration of utilizing OwlMomentDateTimeModule with various date-time formats: (Please note that OwlMomentDateTimeModule relies on MomentJS)

Installation via npm:

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

Example Code:

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

// Refer to the Moment.js documentation for the explanation 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 AppDemoModule {
}

Answer 5

Answer №3

Currently, everything is functioning perfectly for me after reading the documentation. Insert the following code snippet into the module:

providers: [
    ClientService,
    DatePipe, 
    {provide: OWL_DATE_TIME_LOCALE, useValue: 'in'}
]

Answer 6

Currently, everything is functioning perfectly for me after reading the documentation. Insert the following code snippet into the module:

providers: [
    ClientService,
    DatePipe, 
    {provide: OWL_DATE_TIME_LOCALE, useValue: 'in'}
]

Answer 7

Answer №4

make changes in the app.module file

providers:[
{provide: DATE_TIME_LOCALE, useValue: 'en-GB'}
]

Answer 8

make changes in the app.module file

providers:[
{provide: DATE_TIME_LOCALE, useValue: 'en-GB'}
]

Choose datetime datepicker formatting in ng-pick

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Guide on implementing ng-if in an Ionic 2 HTML template

Creating a personalized NPM package: Converting and exporting TypeScript definitions

Guide on saving a PDF file after receiving a binary response using axios

Exploring the Module System of TypeScript

How can I call a global function in Angular 8?

Cannot find property '' within type 'never'. (Using TypeScript useState with mapped JSON data from a server)

I am currently working to resolve this particular wildcard issue with the help of TypeScript

What is the best way to retrieve the parameter of ng2-file-upload using endback?

Encountering a problem while trying to start a create-react-app using npm

Whenever I attempt to run `npm install`, I encounter the frustrating error message "access denied."

What causes this conditional type to function correctly in a static context while failing in a dynamic setting

Error: The argument begins with a non-ASCII dash, suggesting it is likely invalid: [ '- g', 'appium' ]

The Jest test encounters a SyntaxError due to an unexpected token Export causing it to fail

How can I populate an array using values from a different array in Angular?

Encountering an Angular schematics issue while utilizing an external schematic ng-new, the specified version is

Uh-oh! Looks like we hit a roadblock - npm encountered an error due to exceeding the

I keep encountering the same error message whenever I attempt to install expo using the "npm install -g expo-cli" command. Does anyone know how to troubleshoot and resolve this issue?

Exploring the process of iterating over asynchronous data in Angular

Navigating nested data structures in reactive forms

It is not possible to utilize a JavaScript function once the script has been loaded through