Add validation event handler to calendar date picker for date field within a gridview

I have a date field as a column inside a gridview. I want to add a check to the date to make sure it is before today. I tried adding an event handler to the ontextchanged event but it only works if the user manually enters the date. If the user uses the calendar date picker, the event will not be triggered. How can I add the event handler to the calendar date picker as well?

The WFG data picker is based on a usercontrol from the eWorld library.
This control sets the value at the client side. So in order to capture the changes either from the calendar picker or from manual user entry, you need to capture 2 different events.

I have an example about how to capture the event for a regular datepicker on the form (not within a gridview). The implementation concept will be similar but you will need to attach the event at the gridview row databound.

I have a simple form like this:


The goal is when someone enters a value or pick a date in the Datetime field, a net method will be executed and set the date value to the 2nd TextBox field.

First, you need to edit the JS portion. Since the datepicker will set the date value at the client side we need javascript to capture this client side event and then trigger the .NET code (if your processing work is also at the client side then you don’t need the .NET portion.

image

In this jquery script I basically add the monitoring to the calendar picker event and the date text field change event.
The REQUEST_DATETIME the date text field has an onchange event. The REQUEST_DATE_TIME_CAL_calendar has the onclick client-side event on the calendar table cell (td).
For WFG datepicker the field is presented by the textbox ID. But there is an associated control which has a suffix “_CAL” which is the actual eWorld date picker control.
Both js events will trigger a postback and invoke the relevant .NET control event (if the processing happens in code behind).

To handle the event in code behind:

image

The event handler “CheckDate” is to do whatever you need.
This is attached to the REQUEST_DATETIME.TextChanged which is the text field of the date picker and the REQUEST_DATETIME_CAL.DateChanged event (which is the date picker).

This is just a sample implementation approach. It may not be the best or optimized but it does the job