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://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.
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>
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.
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.
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.
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.