asp.nettextboxajaxcontroltoolkitmaskededitextendermaskededitvalidator

Backspace key not working while using Ajaxtoolkit masked edit extender and validator (ASP.NET, Microsoft Edge, Ajaxtoolkit)


I have 2 textboxes using ajaxtoolkit's masked edit extender and validator to input dates using a calendar extender as well as to ensure that dates are entered in the proper format for the db. For some reason within both textboxes you cannot backspace or delete, you can only overwrite, similar to the insert function on a keyboard.

Currently I haven't seen much on this issue except for some really old posts on GitHub that don't have responses, I'm using Microsoft Edge with this ASP.NET project if you are trying to recreate the problem.

I'm currently on Ajax toolkit version 1.0.20229, as this is not my own site but for the business I work for so I cannot update it.

Any help or insight would be greatly appreciated, thanks.

<asp:TextBox ID="tbStartDt" runat="server" width="100" placeholder="00/00/0000" />
      <asp:ImageButton ID="StDateButton" runat="server" ImageUrl="~/images/Calendar_scheduleHS.png" />  
      <ajaxToolkit:MaskedEditValidator ID="MaskedEditValidator8" runat="server" ControlExtender="MaskedEditExtender8"
      ControlToValidate="tbStartDt" Display="Dynamic" InvalidValueMessage="Date is invalid"
      ToolTip="Input a Date">
      </ajaxToolkit:MaskedEditValidator>
      <asp:Label ID="FrDateLabel" runat="server" ForeColor="Red"></asp:Label>
      <ajaxToolkit:MaskedEditExtender ID="MaskedEditExtender8" runat="server" Mask="99/99/9999"
        MaskType="Date" TargetControlID="tbStartDt">
      </ajaxToolkit:MaskedEditExtender>
      <ajaxToolkit:CalendarExtender ID="CalendarExtender8" runat="server" CssClass="MyCalendar"
        PopupButtonID="" TargetControlID="tbStartDt">
      </ajaxToolkit:CalendarExtender>
      <ajaxToolkit:CalendarExtender ID="CalendarExtender10" runat="server" CssClass="MyCalendar"
        PopupButtonID="StDateButton" TargetControlID="tbStartDt">
      </ajaxToolkit:CalendarExtender>

Solution

  • Ok, now that I can try/test the markup with the newer version of the AjaxToolkit?

    When I paste in your sample markup, then the backspace does work fine.

    However, that is sure quite a bit of markup for a simple date picker.

    I mean, you can drop in a standard textbox, and set the textmode = "Date".

    So, with this markup:

            <asp:TextBox ID="tbStartDt" runat="server" 
                TextMode="Date"/>
    

    The above will output a correct HTML5 compatible date picker. So, no mask required, no date extender is required either.

    The date format will ALSO of course respect the client side (user's browser settings), since as a general rule the end user should set and pick and choose THEIR own regional settings on THEIR computer - not you attempting to force some date format that is 100% different then what your users have and use every day.

    The result of the above simple markup is this:

    enter image description here

    Note close in above:

    No icon was specified - it is automatic placed for you.

    No date formatting was specified - again automatic and based on the user's regional settings - not you the developer.

    No JavaScript, and no additional masking is required, it just works, and requires a rather limited amount of markup. In fact, you only have to drop in the text box, and then set TextMode="Date".

    I should also point out that there is also a time picker, and it will show an "watch/time" icon if you set TextMode="Time".

    So, all in all, a super simple amount of markup without requiring a mask, nor an extender, and does not require the AJ toolkit at all.

    As a FYI, pasting in your existing markup (and using latest version of the AJ toolkit) then the masking etc. works, and the backspace works, however the default date did seem to "disappear" when I clicked into the text box (I'm sure with some tweaking it would work fine).

    However, I would consider using a standard text box, and setting TextMode="Date", as that produces a rather nice date picker, and one with the least amount of markup, code and efforts. In other words, I would consider giving the built in date picker a try by a simple setting of TextMode="Date" for the text box, and see how well that works.