2

I have a web form which several date fields in it, I am using Ajax calender for the user to enter the date, I want to restrict the user from typing in extra info other than the date or even not being able to type anything in the textbox apart the value from the calender extender. I am using ASP.NET, VB.NET and SQL Server 2008 database

My date format is dd-MMM-yy

I tried:

Enable = false

but it is not saving the date to database

Below is a sample of my code:

<asp:TextBox ID="TextBox5" runat="server" Width="150px" style="margin-top: 0px" 
                            ReadOnly="False" CausesValidation="True"></asp:TextBox>

<asp:CalendarExtender ID="TextBox5_CalendarExtender" runat="server" Format="dd-MMM-yy" PopupButtonID="ImageButton1" TargetControlID="TextBox5">
</asp:CalendarExtender>

Appreciate your help

Thank you

Magnus
  • 45,362
  • 8
  • 80
  • 118
user3373775
  • 39
  • 1
  • 5
  • Do you want this validated on the client or the server? If on the client, which is what you should do, you need to write some JavaScript to validate the control for you. http://stackoverflow.com/questions/6177975/how-to-validate-date-with-format-mm-dd-yyyy-in-javascript has a couple examples of how to do this. – Steve Mar 03 '14 at 18:12
  • I'm not sure if I understand what you are are trying to do. Are you looking to get the correct value saved into the database? Or are you looking to implement an input mask so users can only enter date, which only allows users to only enter integers and have slashes (/) be added automatically? – Imad S. Mar 03 '14 at 19:08
  • I am trying to see if the user can only enter the date through the ajax calender and not be able to type anything in the textbox – user3373775 Mar 03 '14 at 19:19
  • I want to validate on the server – user3373775 Mar 03 '14 at 19:23

3 Answers3

1

Don't set ReadOnly = True or Enabled = False that will prevent the value from being posted back. You need to only prevent user interaction while allowing value to be updateable otherwise. One way is to prevent field from obtaining focus, try adding this attribute:

onfocus = "this.blur();"

For more take a look at this post.

Yuriy Galanter
  • 38,833
  • 15
  • 69
  • 136
  • 6 Years later: Good solution but will cause the date picker to be treated as a dialog. Nothing can be done on the page until the date picker is dismissed. – AngelicCore May 03 '20 at 16:44
1

First you'll need to set the textbox as 'read only' in code behind, usually in Page_Load event like this:

TxtDate.Attributes.Add("readonly","readonly");

Next, modify the design of the textbox to be like this in markup:

   <asp:TextBox ID="TxtDate" runat="server" Width="150px"></asp:TextBox>

    <a href="JavaScript:clearText('<%=TxtDate.ClientID %>')">
    <img alt="" src="../clear.png"></img></a>
    <asp:CalendarExtender ID="CalendarExtender1" runat="server" Enabled="True" 
    Format="dd-MMM-yy" PopupPosition="Right" TargetControlID="TxtDate">      
</asp:CalendarExtender>

And finally add this small script to clear the date:

   <script type="text/javascript">
        function clearText(ctrl) {
            document.getElementById(ctrl).value = "";
        };

By doing this, you will have a textbox when clicking on it it will pop up the calendar, it will not allow users to type in, and when the user click on the "clear" image associated with the textbox, it will clear the text.

jack
  • 1,103
  • 2
  • 10
  • 18
  • Yuriy is right, ReadOnly prevents posting back and "this.blur()" often confuses the cal popup. What worked best for me was adding a asp:CompareValidator set to Date. They can type in the textbox but it has to be a valid date. – Jester Jul 16 '18 at 17:50
0

Setting Readonly attribute will not cause server side process . we can use contentEditable="false" it will be available on server side

Priyanka Bhootra
  • 1