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

Is there a way in NodeJS to preview the contents of a file in a browser before initiating the download process?

Encountering difficulties with installing npm dependencies on Windows 7 when using the "npm install" command

Dexie is alerting us to a problem with a call that occurs before initialization

The element is not defined in the Document Object Model

The Angular ReactiveForm encounters issues with recognizing the parent formGroup directive when working with a recursive template

My goal is to prevent users from using the Backspace key within the input field

Angular does not receive events from Socket.io

Limit the number of cards displayed per row using Angular Flexbox

There are no HTTP methods available in the specified file path. Make sure to export a distinct named export for each HTTP method

Experiencing difficulties with npm while trying to install cordova

Angular 2 error: "unknown element" issue persists despite exhausting all attempted solutions

material-icons appear differently when letter-spacing is applied in iOS browsers

CRITICAL ERROR: CALL_AND_RETRY_LAST Memory allocation failed - JavaScript heap exhausted

The method options.domAPI is not a valid function in this context

Refreshing Form after Saving in Angular 4

Filtering JSON array data in Typescript can help streamline and optimize data

Utilizing Angular's Dependency Injection to Provide Services to External Libraries

What is the best method for releasing an NX library along with all its bundled dependencies?

Reviewing for the presence of "Undefined" in the conditional statement within Transpiled Javascript code for

Error encountered during the deployment of Ionic 3 with TypeScript