Set ig-date-picker Min and Max Dates Dynamically in Angular

Hi,

I am using ig-date-picker. i want to set min and max value dynamically. but its not taking it.

HTML:

<ig-date-picker #igwidget  testClass=”dtPicker-project-plannedStartDate” name=”QProject/QProject/PlannedStartDate”
[(ngModel)]=”model.plannedStartDate” (valueChanged)=”modifyProject(‘plannedStartDate’, $event)” [options]=”datePickerOptions”></ig-date-picker>

TS:

this.datePickerOptions ={ regional: this.language,

datepickerOptions: {

maxDate: new Date(this.maxDate) } }

but max date do not change dynamically.

Could you please help?

Hi,

ig-date-picker does not have option maxDate. You can set disabled dates instead.

You can look for this calendar sample about the disabled dates:

https://ko.infragistics.com//angularsite/components/calendar.html#disabled-dates

Here are more samples for the ig-date-picker:

https://ko.infragistics.com//angularsite/components/date_picker.html

Here is the documentation for the ig-date-picker:

https://ko.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxdatepickercomponent.html

Hi Nadia,

Thanks for your response.

maxDate is working fine for me. it is present under datepickerOptions.

My issue is when i make change in maxDate dynamically and try to select date using ig-date-picker.

it emits events twice 1st time it takes correct value but 2nd time it takes todays date.

HTML code :

<ig-date-picker #igwidget  
[(ngModel)]="model.plannedStartDate"

(ngModelChange)="modifyProject('plannedStartDate', $event)"

[datepickerOptions]="{maxDate:model.plannedEndDate}"

[regional]="language">

</ig-date-picker>

"model.plannedEndDate" i set dynamically. when i change this and try to select date it creates issue and select todays date.

Hi,

I am not able to reproduce the issue.

I am sending you a small sample with date picker. Can you please modify it to your scenario?

Hi Nadia,

I have made changes what need to do, but its not running as i use "ig-date-picker" with package "igniteui-angular2": "4.0.4". 

could you please check this issue?

Hi,

The igniteui-angular has many changes as we supports the latest angular.

If this issue is not reproducible in the latest igniteui-angular version it is recommended to use it.

Here is the link for the latest release:

https://www.npmjs.com/package/igniteui-angular

Hi Nadia,

We already have license for "igniteui-angular2": "4.0.4".

is it not possible to fix this issue for this version?

Can we use latest version with license what we have?

Hello Jeetendra,

 

Changing a property into complex objects is not going to trigger Angular change detection.

In order to change dynamically date picker options you'll have to dedicate specific property for those options and reapply the whole dpOpts object:

 

 

changepd() {
  this.model.plannedEndDate = new Date();
  this.dpOpts = { maxDate: this.model.plannedEndDate };
}

Hi Deyank,

I have tried same thing.

but when i change value of "this.model.plannedEndDate" and try to select date from date-picker it takes todays date.

When i debug this i found it makes call for modyProject('plannedStartDate', $event) twice. first is takes selected value but second time it takes todays date.

If i remove "regional" it works fine,but i have to keep it.

Hello Jeetendra,

 

Are you sure you are not changing the model or the plannedStartDate into your modifyProject method?

You could also attach a sample demonstrating this, so we can investigate it.

Hi ,

I have two ig-datepicker.

html:

<ig-date-picker #igwidget
[(ngModel)]="model.plannedStartDate" [datepickerOptions]="maxDateOption" (ngModelChange)="modifyProject('plannedStartDate', $event)" [regional]="'en'" ></ig-date-picker>

<ig-date-picker #igwidget
[(ngModel)]="model.plannedEndDate" [datepickerOptions]="minDateOption" (ngModelChange)="modifyProject('plannedEndDate', $event)" [regional]="'en'" ></ig-date-picker>

TS:

public modifyProject(modified?: string, obj?: any) {
if (modified === 'plannedStartDate') {

this.minDateOption = { minDate: obj };
} else if (modified === 'plannedEndDate') {

this.maxDateOption = { maxDate: obj };
}

}

if first date selected i set minDate and use it for second datePicker.

if second date selected i set maxDate and use it for firstdatePicker.

but issue is once i select date in first datePicker it set min value for second datePicker. after that i try to select date in second datePicker, but it takes todays date.

Hi,

I tried running the template you are providing, but I'm getting the following error:

Error: Template parse errors:
Reference "#igwidget" is defined several times ("
[regional]="'en'" ></ig-date-picker>

Maybe you should use different references to date picker. I changed them to be different and then the date pickers work as expected.

Hi,

I removed template "#igwidget", but still its not working.

Hello,

I created a stackblitz to demonstrate it. Seems to be working as expected. Please review it and let me know if you need further assistance on this.

Hi, 

the stackbitz you have created not working.

it shows " jQuery is not defined" error.

Hello,

It seems that stackblitz has some asynchronous loading of the scripts from the index file.

Here's a working one.

Hi,

stackblitz what you have created do not support regional (localization) for date-picker.

we face problem when we set max/min with regional.

Hello,

 

I modified the sample to use German regional setting and the max and min dates are applied as expected.

Here's the stackblitz sample.

Can you modify that sample to demonstrate the issue you are facing?