AjaxToolkit CalendarExtender and MaskedEditExtender - Can Not Navigate Months

StackOverflow https://stackoverflow.com/questions/23503314

  •  16-07-2023
  •  | 
  •  

Question

I have become very frustrated with this issue and I have not found a workaround. I am using the latest ajaxtoolkit (4.5.7.1213). I did find another post with this issue but I have not found a resolution: http://forums.asp.net/t/1940137.aspx?Masked+Edit+Extender+and+Calendar+extender+issue

The issue can be seen by clicking the next or backwards arrow on the calendar control. It will work one time and then on the next click it will jump back to the current month. If I completely remove the MaskedEditExtender/Validator the functionality works perfectly fine.

Below is some basic code I used for a test.

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="Test.Default" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src="Scripts/jquery-2.1.0.js"></script>
</head>
<body>
<form id="form1" runat="server">
    <ajaxToolkit:ToolkitScriptManager ID="ScriptManager1" runat="server"></ajaxToolkit:ToolkitScriptManager>
    <div>

        <asp:TextBox ID="txtCDate1" runat="server" Text="" Width="100" MaxLength="10"></asp:TextBox>
        <ajaxToolkit:MaskedEditExtender runat="server" ID="MaskedEditExtender1" ClearMaskOnLostFocus="false" MaskType="None" Mask="9999/99/99" TargetControlID="txtCDate1" Filtered="/"></ajaxToolkit:MaskedEditExtender>
        <ajaxToolkit:MaskedEditValidator runat="server" ID="MaskedEditValidator1" ControlToValidate="txtCDate1" ControlExtender="MaskedEditExtender1" Display="dynamic" />
        <ajaxToolkit:CalendarExtender runat="server" ID="CalendarExtender1" TargetControlID="txtCDate1" Format="yyyy/MM/dd"></ajaxToolkit:CalendarExtender>
        <asp:Label ID="lblCDate2" runat="server" Text="～"></asp:Label>
        <asp:TextBox ID="txtCDate2" runat="server" Text="" Width="100" MaxLength="10"></asp:TextBox>
        <ajaxToolkit:MaskedEditExtender runat="server" ID="MaskedEditExtender2" ClearMaskOnLostFocus="false" MaskType="None" Mask="9999/99/99" TargetControlID="txtCDate2" Filtered="/"></ajaxToolkit:MaskedEditExtender>
        <ajaxToolkit:MaskedEditValidator runat="server" ID="MaskedEditValidator2" ControlToValidate="txtCDate2" ControlExtender="MaskedEditExtender2" Display="dynamic" />
        <ajaxToolkit:CalendarExtender runat="server" ID="CalendarExtender2" TargetControlID="txtCDate2" Format="yyyy/MM/dd"></ajaxToolkit:CalendarExtender>

    </div>
</form>

Was it helpful?

Solution

Here's one way that worked for me:

<asp:TextBox ID="txtCDate1" runat="server" Text="" Width="100" MaxLength="10"></asp:TextBox>
<ajaxToolkit:MaskedEditExtender runat="server" ID="MaskedEditExtender1" ClearMaskOnLostFocus="false"
    MaskType="Date" Mask="9999/99/99" TargetControlID="txtCDate1" UserDateFormat="YearMonthDay">
</ajaxToolkit:MaskedEditExtender>
<ajaxToolkit:MaskedEditValidator runat="server" ID="MaskedEditValidator1" ControlToValidate="txtCDate1"
    ControlExtender="MaskedEditExtender1" Display="dynamic" IsValidEmpty="False" InvalidValueMessage="*" />
<ajaxToolkit:CalendarExtender runat="server" ID="CalendarExtender1" TargetControlID="txtCDate1"
    Format="yyyy-MM-dd">
</ajaxToolkit:CalendarExtender>

CalendarExtender

Format="yyyy-MM-dd"

For some reason in the masked edit it shows dashes instead of slashes so when setting the date, there's a mismatch which can prevent dates from being set and I believe part of the issue when changing months. So change the format to use dashes.

MaskedEditValidator

IsValidEmpty="False" InvalidValueMessage="*"

Without IsValidEmpty set to false, I cannot change months more than one month if a date has not been set yet. Setting it to false makes it work... For InvalidValueMessage, put whatever error message.

MaskedEditExtender

MaskType="Date" UserDateFormat="YearMonthDay"

When you have a date set and you are trying to change months more than one month later/earlier, it seems like the masked edit extender prevents the months from changing. When you set the MaskType to Date, it seems to "accept" it.

Also I had to set UserDateFormat so that the error message set in MaskedEditValidator would not display everytime you change months or select a date. The error message would show just as you click but would hide once the change was made.

Conclusion

I'm not sure exactly what's causing this issue. From what I can tell from the "behaviour" the control seems to be setting a date into the mask which does not match causing the changing of months to "revert".

If anyone is interested and understands it better you can look at the source of CalendarExtender here. Switching of the months is done by the _switchMonth function.

Either way, ajax control toolkit has become even more buggy lately..

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top