Using CompareValidator and CalenderExtender with unsupported date format
I have a start date and an end date on a form. I have specified the format for the calendar expander. since then the comparison validator is not working. It always displays an error message. Please help. I need to show the date in the format "Fri 04 May 2012".
Start date field:
<asp:TextBox ID="txtStartDate" ReadOnly="true" runat="server"
CssClass="textBoxWidth TPRValue" Text='<%#DataBinder.Eval(Container.DataItem, "StartDate", "{0: ddd MM dd, yyyy}")%>'>
</asp:TextBox>
<asp:ImageButton ID="imgBtnStartDate" runat="server" ImageUrl="~/Common/Images/Calendar.GIF" CausesValidation="false" ImageAlign="AbsMiddle" />
<ajax:CalendarExtender ID="StartDateCalendar" TargetControlID="txtStartDate" PopupButtonID="imgBtnStartDate" runat="server"
Format="ddd MM dd, yyyy">
</ajax:CalendarExtender>
<asp:CompareValidator ID="startDateCompareValidator" runat="server" ControlToValidate="txtStartDate" ControlToCompare="txtEndDate" Enabled="true"
Type="Date" Display="Dynamic" Operator="LessThanEqual"
Text="Startdate should be <= enddate">
</asp:CompareValidator>
EndDate field:
<asp:TextBox ID="txtEndDate" ReadOnly="true" runat="server"
CssClass="textBoxWidth TPRValue" Text='<%#DataBinder.Eval(Container.DataItem, "EndDate", "{0: ddd MM dd, yyyy}")%>'>
</asp:TextBox>
<asp:ImageButton ID="imgBtnEndDate" runat="server" ImageUrl="~/Common/Images/Calendar.GIF" CausesValidation="false" ImageAlign="AbsMiddle" />
<ajax:CalendarExtender ID="EndDateCalendar" TargetControlID="txtEndDate" PopupButtonID="imgBtnEndDate" runat="server"
Format="ddd MM dd, yyyy">
</ajax:CalendarExtender>
Compare validator:
<asp:CompareValidator ID="startDateCompareValidator" runat="server" ControlToValidate="txtStartDate"
ControlToCompare="txtEndDate" Enabled="true" Type="Date" Display="Dynamic" Operator="LessThanEqual"
Text="Startdate should be <= enddate">
</asp:CompareValidator>
source to share
I guess it CompareValidator
doesn't accept your format.
CompareValidator is pretty detailed about the dates it will accept. For example, the following dates are not considered valid:
- January 1, 2001
- January 1, 2001
- Fri 04 May 2012
CompareValidator requires a date that looks like this:
- 1/1/2001
- 1-1-2001
- 5/4/2012
http://www.informit.com/articles/article.aspx?p=25461&seqNum=5
Without testing it, you can try using a hidden TextBox ( display:none
) with the accepted date format as text. Then set Validator ControlToValidate
to "hidden field". You need to keep both text properties of TextBoxes in sync with their hidden boxes. Perhaps this gives you an idea.
Edit : Ok, I was trying to get it to work, what I said, and it actually works :) There might be a refactoring option, but see for yourself.
To hide the TextBox with the working date format I used CSS:
<style type="text/css">
.hidden
{
display:none;
}
</style>
These JS functions are called when the user changes the date via CalendarExtenders:
<script type="text/javascript">
function dateChangedStart(sender, args) {
var selectedDate = sender.get_selectedDate();
var hiddenStart = $get("txtStartDateHidden");
var validator = $get("startDateCompareValidator");
hiddenStart.value = dateToString(selectedDate);
ValidatorValidate(validator);
}
function dateChangedEnd(sender, args) {
var selectedDate = sender.get_selectedDate();
var hiddenEnd = $get("txtEndDateHidden");
var validator = $get("startDateCompareValidator");
hiddenEnd.value = dateToString(selectedDate);
ValidatorValidate(validator);
}
function dateToString(d) {
var year = d.getFullYear();
var month = d.getMonth() + 1; //months are zero based
var day = d.getDate();
return year + "/" + month + "/" + day;
}
</script>
This is the rest of the sample page:
<div>
<asp:TextBox ID="txtStartDate" CausesValidation="false" ReadOnly="true" runat="server">
</asp:TextBox>
<asp:TextBox ID="txtStartDateHidden" CssClass="hidden" ValidationGroup="DateCheck" CausesValidation="true" ReadOnly="false" runat="server">
</asp:TextBox>
<ajax:CalendarExtender ID="StartDateCalendar" TargetControlID="txtStartDate" runat="server"
OnClientDateSelectionChanged="dateChangedStart"
Format="ddd MM dd, yyyy">
</ajax:CalendarExtender>
<asp:CompareValidator ID="startDateCompareValidator" runat="server" EnableClientScript="true"
ControlToValidate="txtStartDateHidden" Display="Static" Operator="LessThanEqual" ValidationGroup="DateCheck"
ControlToCompare="txtEndDateHidden" Enabled="true" Type="Date" Text="Startdate should be <= enddate">
</asp:CompareValidator>
<asp:TextBox ID="TxtEndDate" CausesValidation="false" ReadOnly="true" runat="server">
</asp:TextBox>
<asp:TextBox ID="txtEndDateHidden" CssClass="hidden" ValidationGroup="DateCheck" CausesValidation="true" ReadOnly="false" runat="server">
</asp:TextBox>
<ajax:CalendarExtender ID="EndDateCalendar" TargetControlID="txtEndDate" runat="server"
OnClientDateSelectionChanged="dateChangedEnd"
Format="ddd MM dd, yyyy">
</ajax:CalendarExtender>
<asp:Button ID="BtnSubmit" CausesValidation="true" ValidationGroup="DateCheck" runat="server" Text="Submit" />
</div>
source to share
In addition to Tim's answer for those looking to use jQuery:
function dateChangedStart(sender, args) {
var selectedDate = sender.get_selectedDate();
var hiddenStart = $('input[id$=txtStartDateHidden]');
var validator = $('span[id$=startDateCompareValidator]');
hiddenStart.val(dateToString(selectedDate));
var validatorAsDOM = validator.get(0);
ValidatorValidate(validatorAsDOM);
}
source to share