How to change the past date background color

[rrohitesh]

i am facing a issue in customizing the ng2-datepicker past dates back-ground color. As i see in the .css only current and selected dates selectors is there. There is no .css selector for the past dates. Does anybody know how we can change the color of background for past dates.

[dixitk13]

Try this:

:host /deep/ ng2-datepicker {

.datetpicker-container .datepicker-calendar .datepicker-calendar-container { background: white !important; }

}

do it for other classes too!

[rrohitesh]

Hi,

Thanks for the help but i want to disable the past date color like all days from today should show different color. Also what is the meaning of:host /deep/ ng2-datepicker

[dixitk13]

You can read more about deep here. https://angular.io/docs/ts/latest/guide/component-styles.html

I believe you can override that as well. Look at the CSS

.datepicker-calendar-days-container => .day => &.today

Like a today can definitely be of a different style.

[rrohitesh]

Hi is there any way to open the date picker or set the date from outside on click.

On May 4, 2017 10:07 PM, "Dixit Patel" notifications@github.com wrote:

You can read more about deep here. https://angular.io/docs/ts/latest/guide/component-styles.html

I believe you can override that as well. Look at the CSS

.datepicker-calendar-days-container => .day => &.today

Like a today can definitely be of a different style.

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/jkuri/ng2-datepicker/issues/185#issuecomment-299240569, or mute the thread https://github.com/notifications/unsubscribe-auth/AYTL9FtPzuBj1zr_WaabzJCH94TB0SRVks5r2f7IgaJpZM4MHGSQ .

[dixitk13]

Yep, Try

.ts

@ViewChild('startDate') startDatePicker;

.html

<div (click)="startDatePicker.open()">
        <ng2-datepicker #startDate ....other attributes .... ></ng2-datepicker>
</div>

[rrohitesh]

Ok... Thanks I'll try this.

On May 4, 2017 10:26 PM, "Dixit Patel" notifications@github.com wrote:

Yep, Try

.ts

@ViewChild('startDate') startDatePicker;

.html

<div (click)="startDatePicker.open()"> <ng2-datepicker #startDate ....other attributes .... >

[rrohitesh]

@dixitk13 i have implemented the above approch and its working for me. Now, how can we set the date of the calender from out side lets say today is 5-5-2017 now i want to set 5-5-2016 to calender and when i click on the calender i should open with the new date not the default date.

Can we use #startDate for this or DateModel constructor can be used?

Please suggest.

[dixitk13]

I would use the ngModel binding and set the date as new DateModel(...)

Using the same example:

in html

<div (click)="startDatePicker.open()">
        <ng2-datepicker #startDate [(ngModel)]="start_date"....other attributes .... ></ng2-datepicker>
</div>

in ts

start_date = new DateModel(...)

[rrohitesh]

@dixitk13 hi i have tried this but the problem is its setting in the data-model but not reflecting once i am clicking on the datepicker. The date-picker is populated with the current date only.