I have two textboxes which are start and end date fields. I want to change the calendar control that I display to jQuery UI's datepicker. Problem is when I select a date from the datapicker, OnTextChanged event or validations do not fire as it does when
I type values in the textboxes or select it from a calendar control and tab out. CausesValidation attribute supposed to help out but didn't. Anybody know a solution? Of course, I can just keep the calendar control.
Thanks, did not know that but I need to have the validators incase javascript is disabled. Also, I need to be able to compare the two dates. I am not worried about the validators as much since I don't let the user enter data without validation. But I
desperately need to figure out a way to fire the onTextChanged event when user selects a date from the datapicker.
I've been on and off of this but I made progress. Turns out the problem is the validators. When I took them out, OnTextChanged event fired as expected after the postback.
Here is an explanation. Also, here is the
bug log. I neither got an error regarding vals, nor an empty onSelect function worked for me. If I understand correctly, empty onSelect function prevents the validators from being triggered via preventing the change event from being fired.
Last three explanations on the bug log was helpful for me. I used
I am having more or less the same problem myself. http://forums.asp.net/t/1772877.aspx/1?Calculate+difference+of+two+dates+using+dropdown+and+manual+date+entry
In my case, i cant get the validations and calculations to work, if i key in the dates.
ivegotanerro...
Member
16 Points
25 Posts
jQuery datepicker with validation and OnTextChanged event
May 14, 2010 03:16 PM|LINK
Hi,
I have two textboxes which are start and end date fields. I want to change the calendar control that I display to jQuery UI's datepicker. Problem is when I select a date from the datapicker, OnTextChanged event or validations do not fire as it does when I type values in the textboxes or select it from a calendar control and tab out. CausesValidation attribute supposed to help out but didn't. Anybody know a solution? Of course, I can just keep the calendar control.
<script type="text/javascript">
$(document).ready(function() {
//Associate jQuery UI datepicker
$('.dateField').datepicker({
dateFormat: 'mm/dd/yy',
appendText: ' (mm/dd/yyyy)',
changeMonth: true,
changeYear: true,
selectOtherMonths: true,
showOtherMonths: true,
showStatus: true,
showButtonPanel: true,
showOn: 'button',
buttonImage: '/App_Themes/Images/SmallCalendar.gif',
buttonImageOnly: true,
buttonText: 'Choose a Date',
onClose: function() {
this.focus();
}
});
});
</script>
<InsertItemTemplate> <asp:TextBox ID="startDate" runat="server" AutoPostBack="true" Text='<%# Bind("START_DATE", "{0:MM/dd/yyyy}") %>' OnTextChanged="startDate_TextChanged" CausesValidation="true" ValidationGroup="vgPage" CssClass="dateField"></asp:TextBox> <asp:RequiredFieldValidator ID="RqrdInsertStartDate" runat="server" Display="Dynamic" ErrorMessage="Please enter the Date it becomes valid!" ControlToValidate="startDate" ValidationGroup="vgPage" SetFocusOnError="true"></asp:RequiredFieldValidator> <asp:RegularExpressionValidator ID="rglrInsertStartDate" runat="server" Display="Dynamic" ErrorMessage="Please enter a valid date!" ControlToValidate="startDate" ValidationExpression="((0?[1-9]|1[012])/(0?[1-9]|[12][0-9]|3[01])/\d{4})|((0?[1-9]|[12][0-9]|3[01])-(Jan|Feb|Mar|Apr|May|Ju[nl]|Aug|Sep|Oct|Nov|Dec)-\d{4})" ValidationGroup="vgPage" SetFocusOnError="true"></asp:RegularExpressionValidator> </InsertItemTemplate> <InsertItemTemplate> <asp:TextBox ID="endDate" runat="server" AutoPostBack="true" Text='<%# Bind("END_DATE", "{0:MM/dd/yyyy}") %>' OnTextChanged="endDate_TextChanged" CausesValidation="true" ValidationGroup="vgPage" CssClass="dateField"></asp:TextBox> <asp:CompareValidator ID="cmprDate" runat="server" Display="Dynamic" ErrorMessage="Expiration Date Must Be Equal To or Greater Than Start Date!" ValidationGroup="vgPage" Type="Date" ControlToValidate="endDate" ControlToCompare="startDate" Operator="GreaterThanEqual" SetFocusOnError="true"></asp:CompareValidator> <asp:RegularExpressionValidator ID="rglrInsertEndDate" runat="server" Display="Dynamic" ErrorMessage="Please enter a valid date!" ControlToValidate="endDate" ValidationExpression="((0?[1-9]|1[012])/(0?[1-9]|[12][0-9]|3[01])/\d{4})|((0?[1-9]|[12][0-9]|3[01])-(Jan|Feb|Mar|Apr|May|Ju[nl]|Aug|Sep|Oct|Nov|Dec)-\d{4})" ValidationGroup="vgPage" SetFocusOnError="true"></asp:RegularExpressionValidator> </InsertItemTemplate>Validation Controls ontextchanged server side event jquery UI datepicker
Steelymar
All-Star
15283 Points
2239 Posts
Re: jQuery datepicker with validation and OnTextChanged event
May 17, 2010 11:20 AM|LINK
add onSelect:
<script type="text/javascript">
$(document).ready(function() {
//Associate jQuery UI datepicker
$('.dateField').datepicker({
dateFormat: 'mm/dd/yy',
appendText: ' (mm/dd/yyyy)',
changeMonth: true,
changeYear: true,
selectOtherMonths: true,
showOtherMonths: true,
showStatus: true,
showButtonPanel: true,
showOn: 'button',
buttonImage: '/App_Themes/Images/SmallCalendar.gif',
buttonImageOnly: true,
buttonText: 'Choose a Date',
onSelect: function() { startDate_TextChanged();},
onClose: function() {
this.focus();
}
});
});
</script>
Stefan Uzunov
MCTS: .NET Framework 3.5 ASP.NET Applications
ivegotanerro...
Member
16 Points
25 Posts
Re: jQuery datepicker with validation and OnTextChanged event
May 17, 2010 02:38 PM|LINK
I am getting "Object expected" error on onSelect every time I select a date. I am installing Firefox to debug it.
Steelymar
All-Star
15283 Points
2239 Posts
Re: jQuery datepicker with validation and OnTextChanged event
May 17, 2010 02:45 PM|LINK
try with:
onSelect: function(selectedDate) {alert(selectedDate);},
Stefan Uzunov
MCTS: .NET Framework 3.5 ASP.NET Applications
ivegotanerro...
Member
16 Points
25 Posts
Re: jQuery datepicker with validation and OnTextChanged event
May 17, 2010 03:29 PM|LINK
When I click OK on the alert box, the datepicker closes.
I tried it with Firefox and datepicker worked as in my initial post without the onSelect. Of course, I need to run it on IE 7.
rsmaloney
Member
20 Points
5 Posts
Re: jQuery datepicker with validation and OnTextChanged event
May 18, 2010 03:45 PM|LINK
you could just use the masked input pluggin and not even worry about client side validation since it enforces it for you.
control.datepicker().mask('99/99/9999');
see:
http://digitalbush.com/projects/masked-input-plugin/
ivegotanerro...
Member
16 Points
25 Posts
Re: jQuery datepicker with validation and OnTextChanged event
May 18, 2010 05:56 PM|LINK
Thanks, did not know that but I need to have the validators incase javascript is disabled. Also, I need to be able to compare the two dates. I am not worried about the validators as much since I don't let the user enter data without validation. But I desperately need to figure out a way to fire the onTextChanged event when user selects a date from the datapicker.
ivegotanerro...
Member
16 Points
25 Posts
Re: jQuery datepicker with validation and OnTextChanged event
May 28, 2010 07:30 PM|LINK
I've been on and off of this but I made progress. Turns out the problem is the validators. When I took them out, OnTextChanged event fired as expected after the postback. Here is an explanation. Also, here is the bug log. I neither got an error regarding vals, nor an empty onSelect function worked for me. If I understand correctly, empty onSelect function prevents the validators from being triggered via preventing the change event from being fired.
Last three explanations on the bug log was helpful for me. I used
onSelect: function() { this.fireEvent && this.fireEvent('onchange') || $(this).change(); }rather than the last one which rewrites the ValidatorOnChange.
PHEW
Tommy13
Member
57 Points
63 Posts
Re: jQuery datepicker with validation and OnTextChanged event
Mar 02, 2012 05:33 AM|LINK
Hi,
I am having more or less the same problem myself. http://forums.asp.net/t/1772877.aspx/1?Calculate+difference+of+two+dates+using+dropdown+and+manual+date+entry
In my case, i cant get the validations and calculations to work, if i key in the dates.
Can you help?
Thanks