Unable to bind Date object to mdb datepicker

Topic: Unable to bind Date object to mdb datepicker

Subrata Paul pro asked 6 years ago

Hi support, I'm trying to bind Date object in mdb Date Picker using ngModel but it is not working, when i'm using date format as dd/mm/yyyy. Please provide me the proper solution. My code sample.. Html :

<mdb-date-picker

name="TODT"

[options]="myDatePickerOptions"

[placeholder]="'Holiday End'"

[(ngModel)]="holiday.TODT"

required ></mdb-date-picker>

Component :

public myDatePickerOptions: IMyOptions = {

closeAfterSelect:true,

minYear:1975,

maxYear:2075,

};

holiday : Holiday;

Holiday Interface :

TODT: Date;

HOLIDAY: string;

Add comment

Damian Gemza staff answered 6 years ago

0 0 Best answer

Dear Subrata, Could you please provide me the code with which you're assigning the date object to holiday variable? Best Regards, Damian

Add comment

Subrata Paul pro answered 6 years ago

0 0 Best answer

Dear Damian, When I'm selecting first time it is showing correct date - 10/10/2018 but when I'm assigning holiday.TODT from database , it is showing - 20/0-1/-1 My code sample -

In component.ts :

export class HolidayComponent implements OnInit {

public myDatePickerOptions: IMyOptions = {
    
closeAfterSelect:true,
    
minYear:1975,
    
maxYear:2075,
    
dateFormat: 'dd/mm/yyyy'

};




holiday: Holiday= new Holiday();

constructor(private HService: HolidayService) {
  }
 

ngOnInit() {

this.showHolidayLoader = true;

this.HService.GetHolidays().subscribe(res => {

this.showHolidayLoader = false;

this.holiday = res;

},err => {

this.showHolidayLoader = false;

})

}


}


In Html :

<mdb-date-picker name="TODT" [options]="myDatePickerOptions" [placeholder]="'Holiday End'" [(ngModel)]="holiday.TODT" required ></mdb-date-picker>

Holiday Interface :

export class Holiday

{  
TODT: Date;  
HOLIDAY: string;

}

Regards, Subrata Paul

Add comment

Damian Gemza staff answered 6 years ago

0 0 Best answer

Dear Subrata Paul, Could you please try with this approach? put startDate option in myDatePickerOptions, and then after getting data from backend, change the value of startDate option to the newest data from backend.

public myDatePickerOptions:IMyOptions= {

closeAfterSelect:true,

minYear:1975,

maxYear:2075,

dateFormat:'yyyy-mm-dd',

startDate:'2018-11-11'

};

ngOnInit() {

constd=newDate();

this.myDatePickerOptions.startDate=`${d.getFullYear()}-${d.getMonth() + 1}-${d.getDate()}`;

}

Best Regards, Damian

Add comment

Write

Create snippet

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue

User: Pro
Premium support: No
Technology: MDB Angular
MDB Version: 6.2.3
Device: Windows
Browser: Chrome
OS: Windows
Provided sample code: No
Provided link: No

Subrata Paul

Pro User

121Support score
11Questions 6Answers

0Snippets likes 0Snippets