[Solved] Ajax CalendarExtender not working with MaskedEditExtender in ASP.Net

Last Reply one month ago By pandeyism

Posted one month ago

I have to textboxes with calender extender i want to mask textboxes

but not able to select date from calender extender.

Below i have attached code which i have tried:

        <table style="align-content: center">
            <tr>
                <td>
                    <table border="0" style="align-content: center">
                        <tr>
                            <td align="right" class="auto-style5">
                                <asp:Label ID="lblStartDateFrom" Text="Start Date" runat="server" CssClass="label"></asp:Label>
                            </td>
                            <td> 
                                <asp:TextBox ID="txtStartDateFrom" runat="server" onclick="this.focus();this.select()"  
                                    PlaceHolder="mm/dd/yyyy" ValidationGroup="Group1" autocomplete="off" AutoCompleteType="Disabled" MaxLength="10" ValidateRequestMode="Inherit" Width="90px" />
                                <ajax:CalendarExtender ID="calEndDate" TargetControlID="txtStartDateFrom" Format="MM/dd/yyyy" runat="server">
                                </ajax:CalendarExtender> 
                                <asp:RequiredFieldValidator ID="rfvDOH" runat="server" ControlToValidate="txtStartDateFrom" ValidationGroup="Group1"
                                    ErrorMessage="Required." ForeColor="Red" SetFocusOnError="true" Display="Dynamic"></asp:RequiredFieldValidator>
                                <br />
                            </td>
                            <td align="right" class="auto-style5">
                                <asp:Label ID="lblEndDateFrom" Text="End Date" runat="server" CssClass="label"></asp:Label>
                            </td>
                            <td class="auto-style1">
                                <asp:TextBox ID="txtEndDateFrom" runat="server" onclick="this.focus();this.select()"  
                                    PlaceHolder="mm/dd/yyyy" ValidationGroup="Group1" autocomplete="off" AutoCompleteType="Disabled" MaxLength="10" ValidateRequestMode="Inherit" Width="90px" />
                                <ajax:CalendarExtender ID="CalendarExtender1" TargetControlID="txtEndDateFrom" Format="MM/dd/yyyy" runat="server">
                                </ajax:CalendarExtender> 
                                <asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" ControlToValidate="txtEndDateFrom" ValidationGroup="Group1"
                                    ErrorMessage="Required." ForeColor="Red" SetFocusOnError="true" Display="Dynamic"></asp:RequiredFieldValidator>  
                                <br />
                                 </td>
                        </tr>
                        <tr>
                            <td></td>
                            <td>
                                <asp:RegularExpressionValidator runat="server" ControlToValidate="txtStartDateFrom" ValidationGroup="Group1" ValidationExpression="^(((0?[1-9]|1[012])/(0?[1-9]|1\d|2[0-8])|(0?[13456789]|1[012])/(29|30)|(0?[13578]|1[02])/31)/(19|[2-9]\d)\d{2}|0?2/29/((19|[2-9]\d)(0[48]|[2468][048]|[13579][26])|(([2468][048]|[3579][26])00)))$"
                                    ErrorMessage="Invalid date format." Display="Dynamic" ForeColor="Red" />
                            </td>
                            <td></td>
                            <td>
                                <asp:RegularExpressionValidator runat="server" ControlToValidate="txtEndDateFrom" ValidationGroup="Group1" ValidationExpression="^(((0?[1-9]|1[012])/(0?[1-9]|1\d|2[0-8])|(0?[13456789]|1[012])/(29|30)|(0?[13578]|1[02])/31)/(19|[2-9]\d)\d{2}|0?2/29/((19|[2-9]\d)(0[48]|[2468][048]|[13579][26])|(([2468][048]|[3579][26])00)))$"
                                    ErrorMessage="Invalid date format." Display="Dynamic" ForeColor="Red" />
                            </td>
                        </tr>

                    </table>
                </td>
            </tr>
            <tr>
                <td></td>
            </tr>
        </table>

Plz help me as soon as possible.

You are viewing reply posted by: pandeyism one month ago.
Posted one month ago Modified on one month ago

Hi JennyD6856,

For masking in calendar extender use below sample.

HTML

<ajax:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
</ajax:ToolkitScriptManager>
<asp:TextBox ID="txtCDate1" runat="server" Text="" Width="100" MaxLength="10"></asp:TextBox>
<ajax:MaskedEditExtender runat="server" ID="MaskedEditExtender1" ClearMaskOnLostFocus="false"
    MaskType="None" Mask="9999/99/99" TargetControlID="txtCDate1" Filtered="/">
</ajax:MaskedEditExtender>
<ajax:MaskedEditValidator runat="server" ID="MaskedEditValidator1" ControlToValidate="txtCDate1"
    ControlExtender="MaskedEditExtender1" Display="dynamic" />
<ajax:CalendarExtender runat="server" ID="CalendarExtender1" TargetControlID="txtCDate1"
    Format="yyyy/MM/dd">
</ajax:CalendarExtender>

Screenshot