RadDatePicker - User cannot set null / blank date with EnableTyping=false

2 posts, 0 answers
  1. Mich Meow
    Mich Meow avatar
    6 posts
    Member since:
    Jan 2010

    Posted 21 Aug 2012 Link to this post

    We are using RadDatePickers in our application and have a business requirement to force the user pick the date using the popup calendar rather than manually typing it in which is accomplished with the EnableTyping="false" flag. So far so good.

    The problem is once a date is picked the end user has no way to blank it out or undo it - i.e. intentionally set the date back to null using the popup calendar. Is there a way to do this? I was playing around with the popup calendar and could not find a way to set it blank from the popup date picker. In the past the user could highlight the date text and delete it but this is disabled due to the EnableTyping="false" flag. Below is a sample of how the picker is used in the applicaiton:
    <telerik:RadDatePicker ID="rdpDateTimeField" runat="server" Skin="Office2007" Width="150px" MinDate="1/1/1900" EnableTyping="false" ToolTip="Please select date using the calendar icon.">
              <Calendar ShowRowHeaders="false">
              </Calendar>
    </telerik:RadDatePicker>
  2. Kevin
    Kevin avatar
    360 posts
    Member since:
    Jul 2012

    Posted 22 Aug 2012 Link to this post

    Hello Andrew,

    One thing you can do is add a clear button to the Calendar popup. Like so:

    <telerik:RadDatePicker ID="rdpDateTimeField" runat="server" Skin="Office2007" Width="150px"
            MinDate="1/1/1900" EnableTyping="false" ToolTip="Please select date using the calendar icon.">
            <Calendar ShowRowHeaders="false">
                <FooterTemplate>
                    <telerik:RadButton ID="btnClear" runat="server" Text="Clear" Skin="Office2007" OnClientClicked="OnClientClicked"
                        RegisterWithScriptManager="false">
                    </telerik:RadButton>
                </FooterTemplate>
            </Calendar>
        </telerik:RadDatePicker>
      
        <script type="text/javascript">
            function OnClientClicked(sender, args) {
                var datePicker = $find("<%=rdpDateTimeField.ClientID %>");
                datePicker.clear();
                datePicker.hidePopup();
            }
        </script>

    I added a RadButton to the FooterTemplate of the Calendar control and attached an event that clears the datepicker control and hides the popup (you can remove this line, if you want it to remain open).

    I hope that helps.
  3. UI for ASP.NET Ajax is Ready for VS 2017
Back to Top