Using CompareValidator and CalenderExtender with unsupported date-format

Question

I have a start date and end date field in a form. I have specified format for calender extender. since then, the compare validator is not working. It is always displaying the 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>

Answer 1

For date format MM/dd/yyyy

put this in Web.Config

<globalization culture="en-us"/> 

under

<system.web>

Answer 2

In addition to Tim's answer, for the ones who want 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);
}

Answer 3

I assume that the CompareValidator does not accept your format.

The CompareValidator is pretty particular about the dates that it will accept. For example, the following dates are not considered valid:

• January 1, 2001
• Jan 1, 2001
• Fri 04 May 2012

The 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 having tested it, you could try to use a hidden TextBox(display:none) with the accepted date format as Text. Then set the Validator's ControlToValidate to the "hiddenfield". You need to synchronize both TextBoxes' Text properties with their hiddenfields. Maybe this gives you an idea.

Edit: Ok, i've tried to get it working what i've said and actually it is working :) Maybe there's some refactoring possible, but have a look yourself.

To hide the TextBox with the working date format i've used CSS:

<style type="text/css">
    .hidden
    {
        display:none;   
    }
</style>

These JS-functions are called when the user changes a 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>