I have 2 date pickers that are serving as a date range. When the user picks a date in the first one, I want to set the minValue property of the 2nd one based on the value chosen in the first one.
I'm using the valueChanging (and also tried the valueChanged property as well), and the timing of it is not working out well. You can see in the attached example, when I do the following it is not working the way I want.
1. Using the drop down button, pick today's date in the first editor.
2. Immediately afterwards click the drop down button on the 2nd editor, and you will see that the 2nd editor does not have the minValue updated correctly.
Note that if you make the calendar disappear and then click on the 2nd drop down AGAIN, the minValue is set correctly - so I know it is a timing issue. Also note that if you tab out of the first editor after picking date, and THEN click 2nd drop down, the min date is set correctly as well.
Is there another way around this?
Hello Ryan Rupp,
Thanks for post on our forums. I will be happy to assist you.
Please note, according to the igDatePicker API (Link), the valueChanging and valueChanged events are raised when the value for the editor changes. When performing the steps you provided, the value doesn't change until you click on the second igDatePicker. Instead of using these events that fire on Blur, I recommend using either the textChanged or hideDropDown event for setting the minValue for the second igDatePicker. You can test this with the sample I've attached.
Please let me know if you have any questions regarding this matter.
I had thought about doing it with the text changed event, but there are all sorts of pitfalls with this: 1) I have to check whether the user has entered in the entire date/time yet if they are typing and not choosing from drop down, 2) the format of the text could be different depending on the users culture/region, so there could be some work there.
What do you suggest I do about these issues with the text changed event? It would be a lot easier if there was a valueChanged event that was guaranteed to fire before the event on the next control.
Hi Ryan Rupp,
Thank you for the update.
In this case, I recommend using the hideDropDown event and check to see if the igDatePicker has a value other than null. If so, you can pass that value is the minValue for the second igDatePicker.
Yes I have tried that as well and am using both events (valuedChanging and hideDropDown). However there are still scenarios where it doesn't quite work. The remaining scenario that doesn't work is if you type in the first date with keyboard, and then immediately click on drop down of 2nd date picker. In that case hideDropDown is never fired for first date and valueChanging is fired too late.
For the keyboard scenario, you should use the textChanged event. Once the textChanged event fires, if the current value is valid, set the minValue of the second igDatePicker. Please note, if you wish to have a single event that enables you to handle this scenario, you may submit a product idea for a new event using the Infragistics Product Ideas page:http://ideas.infragistics.com/
Changing the text doesn't change the value of the date picker though. I've tried to do this through the textChanged event and the text has all of the limitations I mentioned before (language, culture, locale, etc.). I had hoped to pull the value out when the text was changed, but the value is empty until you lose focus on the editor, because as you stated, that's when the valueChanging and valueChanged events fire. So it never quite got me where I wanted to be.
I can submit an idea for this. Thanks!