Can I change default for MaskedEditExtender am/pm?

2.2k Views Asked by At

The MaskedEditExtender control that I am using is set up for a MaskType="DateTime" and the AcceptAMPM="true" but I need to know how a user can change the am/pm without having to type in A for AM and P for PM? Is there a way I can add arrows or something to this control so that it is more user-friendly when changing from AM to PM? My users aren't going to know that they need to type out the value for it to change.

 <asp:TextBox ID="txtDateTime" runat="server"></asp:TextBox>
      <asp:MaskedEditExtender ID="MaskedEditExtender1" runat="server"
       TargetControlID="txtDateTime" MaskType="DateTime" Mask="99/99/9999 99:99" 
       MessageValidatorTip="true" CultureName="en-US" ErrorTooltipEnabled="True"
       AcceptAMPM="true">
      </asp:MaskedEditExtender>
2

There are 2 best solutions below

3
On BEST ANSWER

I don't believe there is any way to change the functionality, at least not without a significant amount of work. If you need something that's a little more flexible, I would suggest looking at a jQuery Timepicker.

0
On
<script type="text/javascript">
    //Set the default text to "PM"
    var mee;
    function pageLoad() {
        //Please use your MaskedEditExtender's id or behaviorId.
        mee = $find("MaskedEditExtender3");

        //The target textbox control
        var e = mee.get_element();

        //Remove the focus event handler
        if (mee._focusHandler) {
            $removeHandler(e, "focus", mee._focusHandler);
        }
        //Add a new focus event handler which inherits from the old one.
        mee._focusHandler = Function.createDelegate(mee, newFocus);
        $addHandler(e, "focus", mee._focusHandler);
    }
    function newFocus() {
        mee._onFocus();
        if ((mee._MaskType == AjaxControlToolkit.MaskedEditType.Time || mee._MaskType == AjaxControlToolkit.MaskedEditType.DateTime) && mee.get_CultureAMPMPlaceholder() != "" && mee._getClearMask() == "") {
            if (mee._AcceptAmPm) {
                //The original code of default AM/PM text in function _onFocus() is:
                //this.InsertAMPM(this.get_CultureAMPMPlaceholder().substring(0,1));

               mee.InsertAMPM(meeTueEndCorp.get_CultureFirstLetterPM());
               mee.setSelectionRange(0, 0);
            }
        }
    }
</script>
<div>
    <strong>Enter Time (format: <em>99:99:99</em>):</strong>
    <br />
    <asp:TextBox ID="TextBox3" runat="server" Width="130px" Height="16px" />
    <ajaxToolkit:MaskedEditExtender ID="MaskedEditExtender3" runat="server" TargetControlID="TextBox3"
        Mask="99:99:99" MessageValidatorTip="true" OnFocusCssClass="MaskedEditFocus"
        OnInvalidCssClass="MaskedEditError" MaskType="Time" AcceptAMPM="True" ErrorTooltipEnabled="True" />
    <ajaxToolkit:MaskedEditValidator ID="MaskedEditValidator3" runat="server" ControlExtender="MaskedEditExtender3"
        ControlToValidate="TextBox3" IsValidEmpty="False" EmptyValueMessage="Time is required"
        InvalidValueMessage="Time is invalid" Display="Dynamic" TooltipMessage="Input a time"
        EmptyValueBlurredText="*" InvalidValueBlurredMessage="*" />
    <br />
    <em><span style="font-size: 8pt">Tip: Type 'A' or 'P' to switch AM/PM</span></em>
</div>
</form>

Check this link, may be this will help. http://forums.asp.net/t/1339632.aspx Or if you want to set the default value to PM. I have modified the code in the ajax control tool kit code and compile it again to work of default to PM. Check this code on my blog.

http://blog.sumedh.in/post/2011/12/16/Ajax-Net-35-Control-Toolkit-MaskedEditExtender-Default-to-PM.aspx