Using CompareValidator and CalenderExtender with unsupported date-format

asp.net, calendarextender

Solution

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>

Problem

Original source