Monday, May 20, 2024
 Popular · Latest · Hot · Upcoming
152
rated 0 times [  155] [ 3]  / answers: 1 / hits: 23098  / 5 Years ago, tue, march 12, 2019, 12:00:00

hi i am using ngbDatePicker and my format is YYYY-MM-DD
and i am trying to change it but cant seem to change the format to MM/DD/YYYY.



here is my html code



    <div class=form-group datepicker>
<label for=dob>Date of Birth*</label>
<div class=row input-group>
<input
ngbDatepicker
#d=ngbDatepicker
#dobF=ngModel
class=form-control input-underline input-lg
id=dob
[(ngModel)]=dateOfBirth
placeholder=mm-dd-yyyy
name=dp
[ngClass]={
invalid:
(dobF.value === null || isString(dobF.value) || futureDate) && dobF.touched
}
required
/>
<div class=input-group-append>
<button
class=btn btn-outline-secondary calendar
(click)=d.toggle()
type=button
></button>
</div>
</div>
<div
*ngIf=
(dobF.value === null || isString(dobF.value) || futureDate) && dobF.touched

class=error
>
Please enter a valid date of birth.
</div>
</div>


here is my ts file code



  public dateOfBirth: { year: number; month: number; day: number };

public currentDate = moment().format(YYYY-MM-DD);



constructor(
private config: NgbDatepickerConfig
) {
// customize default values of datepickers used by this component tree
const currentDate = new Date();
const day = currentDate.getDate();
const month = currentDate.getMonth() + 1;
const year = currentDate.getFullYear();

this.config.minDate = {year: 1900, month: 1, day: 1};
this.config.maxDate = {year, month, day};

this.config.outsideDays = hidden;
}

ngOninit() {

this.subscriptions[patient] = this.store
.select(patient)
.subscribe(data => {
this.patient = Object.assign({}, this.patient, data);
const dob = this.patient.Dob ? this.patient.Dob.split(-) : null;
dob !== null
? (this.dateOfBirth = {
year: Number(dob[0]),
month: Number(dob[1]),
day: Number(dob[2])
})
: (this.dateOfBirth = null);
});
}

ngAfterContentChecked() {
let currentDateObject = this.currentDate.split(-);
this.dobYear = Number(currentDateObject[0]);
this.dobMonth = Number(currentDateObject[1]);
this.dobDay = Number(currentDateObject[2]);
if (this.dateOfBirth) {
this.futureDate = this.dateOfBirth.year > this.dobYear || (this.dateOfBirth.year == this.dobYear && this.dateOfBirth.month > this.dobMonth)
|| (this.dateOfBirth.year == this.dobYear && this.dateOfBirth.month == this.dobMonth && this.dateOfBirth.day > this.dobDay);
}
}


i cannot seem to find any help to change the format.
how can i change the format from YYYY/DD/MM toMM/DD/YYYY.
is there any help thanks


More From » angular

 Answers
42

You need to extend NgbDateParserFormatter and override the default provider:



Below is an example for dd/mm/yyyy, you'll just need to alter the parse() and format() functions to change to mm/dd/yyyy.



Add the following class:



import { NgbDateParserFormatter, NgbDateStruct } from @ng-bootstrap/ng-bootstrap;
import { Injectable } from @angular/core;

@Injectable()
export class NgbDateCustomParserFormatter extends NgbDateParserFormatter {
parse(value: string): NgbDateStruct {
if (value) {
const dateParts = value.trim().split(/);
if (dateParts.length === 1 && isNumber(dateParts[0])) {
return { day: toInteger(dateParts[0]), month: null, year: null };
} else if (dateParts.length === 2 && isNumber(dateParts[0]) && isNumber(dateParts[1])) {
return {
day: toInteger(dateParts[0]),
month: toInteger(dateParts[1]),
year: null
};
} else if (dateParts.length === 3 && isNumber(dateParts[0]) && isNumber(dateParts[1]) && isNumber(dateParts[2])) {
return {
day: toInteger(dateParts[0]),
month: toInteger(dateParts[1]),
year: toInteger(dateParts[2])
};
}
}
return null;
}

format(date: NgbDateStruct): string {
return date
? `${isNumber(date.day) ? padNumber(date.day) : }/${isNumber(date.month) ? padNumber(date.month) : }/${
date.year
}`
: ;
}
}
export function toInteger(value: any): number {
return parseInt(`${value}`, 10);
}

export function isNumber(value: any): value is number {
return !isNaN(toInteger(value));
}

export function padNumber(value: number) {
if (isNumber(value)) {
return `0${value}`.slice(-2);
} else {
return ;
}
}





Modify app.module.ts to override the default provider:





import { NgbDateCustomParserFormatter } from ./YOURPATH/date-formatter.service;

@NgModule({
declarations: [
...
],
imports: [
...
],
providers: [
... ,
{ provide: NgbDateParserFormatter, useClass: NgbDateCustomParserFormatter } // <-- add this
],
bootstrap: [AppComponent]
})
export class AppModule {}




[#52439] Wednesday, March 6, 2019, 5 Years  [reply] [flag answer]
Only authorized users can answer the question. Please sign in first, or register a free account.
dylondaytond

Total Points: 92
Total Questions: 88
Total Answers: 96

Location: China
Member since Fri, Jan 15, 2021
3 Years ago
dylondaytond questions
Tue, Jun 22, 21, 00:00, 3 Years ago
Thu, May 7, 20, 00:00, 4 Years ago
;