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

Please insert min. 20 characters.

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

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 -
<pre class="code-toolbar grey lighten-2 p-3 mb-3">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;

}</pre>
Regards,

Subrata Paul

Please insert min. 20 characters.

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