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?
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://es.infragistics.com//angularsite/components/calendar.html#disabled-dates
Here are more samples for the ig-date-picker:
https://es.infragistics.com//angularsite/components/date_picker.html
Here is the documentation for the ig-date-picker:
https://es.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.
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
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:
<ig-date-picker #igwidget [(ngModel)]="model.plannedStartDate" (ngModelChange)="modifyProject('plannedStartDate', $event)" [datepickerOptions]="dpOpts" [regional]="language"> </ig-date-picker>
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.
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.
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?
stackblitz what you have created do not support regional (localization) for date-picker.
we face problem when we set max/min with regional.
It seems that stackblitz has some asynchronous loading of the scripts from the index file.
Here's a working one.
the stackbitz you have created not working.
it shows " jQuery is not defined" error.
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.