CODEWITHSUNDEEP
angular
Aruna
Aruna

Reputation: 155

Binding mydatepicker angular2

I am using MydatePicker to show dates

 <my-date-picker [options]="myDatePickerOptions"
[(ngModel)]="startDate">
 </my-date-picker>

Component as:

 private myDatePickerOptions: IMyOptions = {
        dateFormat: 'mm/dd/yyyy',
    };

I want to bind the value I am getting from database to this control. I can get the startdate as string or datetime but both ways I am not able to bind it to the startDate element. How can I do that.

Upvotes: 1

Views: 7508

Answers (2)

Shekhar Patel
Shekhar Patel

Reputation: 671

I am facing the same issue,so after trying many solution, this is the simplest solution which works for me. your html should be like this,

 <my-date-picker name="LeaveFrom" [(ngModel)]="model.LeaveFrom [options]="myDatePickerOptions"></my-date-picker>

And in you ts file,first import IMyDpOptions form mydatepicker and interface for your model.

import { IMyDpOptions } from 'mydatepicker';
import { IAddEmployeeLeave,} from 'src/shared/interfaces/employeeleave'; 

 model = IAddEmployeeLeave;      
 public myDatePickerOptions: IMyDpOptions = {
    // other options...
    dateFormat: 'dd-mm-yyyy',
    disableWeekends: true,
    firstDayOfWeek : 'su' ,
  };

Now in ngOnInit method, you will get your date from databse through API, then bind that date in your model like this,

    // code for API call and subscribe that response here and get date from that response. 
    // i am taking static date here, but you can use response's date.
    // you can bind other mydatetimepicker's date-type also here, but i am using jsdate here.

    this.model.LeaveFrom   = {jsdate: new Date('7/08/2018')};

make sure, that in your model type of Fromdate should be any , if it is in date type then it will give conversion error with IMyday.

export interface IAddEmployeeLeave {
    LeaveFrom: any;
}

Upvotes: 1

CruelEngine
CruelEngine

Reputation: 2841

From the documentation , 

import {IMyOptions} from 'mydatepicker';

export class MyTestApp {

    private myDatePickerOptions: IMyOptions = {
        dateFormat: 'dd/mm/yyyy',
    };.
    private startDate: Object = { date: { year: 2008, month: 01, day: 01 }    };
}

And your template should be : 

<form #myForm="ngForm" novalidate>
    <my-date-picker name="mydate" [options]="myDatePickerOptions"
                    [(ngModel)]="startDate" required></my-date-picker>
</form>

Upvotes: 4

Related Questions