jQuery UI Datepicker field disallow change manually

Question

My condition:
enter image description here :
My code:

$('#' + '<%=txtFrom.ClientID%>').datepicker({ dateFormat: 'yy-mm-dd' });

I only want to choose a date in 'yy-mm-dd' format.If it chosen from Datepicker its work.But textbox allow to enter date manually which is not in a format. How can i force user to select date from Datepicker not manually?

@Stefan if i disable the text box its not allow to click and without clicking on text box `datepicker` is not appear. :( — 4b0, Feb 27 '12 at 08:47
Why you don't use this `$('#<%=txtFrom.ClientID%>')` approach? This makes your JS more readable. — Oybek, Feb 27 '12 at 08:48

score 2 · Answer 1 · answered Feb 27 '12 at 09:02

2

protected void Page_PreRender(object sender, EventArgs e)
{
    txtFrom.Attributes["readonly"] = "readonly";
}

answered Feb 27 '12 at 09:02

Yuriy Rozhovetskiy

22,270
4
37
68

score 0 · Answer 2 · answered Oct 27 '12 at 18:26

You can use jquery tool's library date picker. Its very simple to use and its automatically disable manual input.

<script src="src="http://cdn.jquerytools.org/1.2.7/full/jquery.tools.min.js"></script>

<!-- dateinput styling -->
<link rel="stylesheet" type="text/css" href="dateinput.css"/>

<!-- HTML5 date input -->
<input type="date" />

<!-- make it happen -->
<script>
  $(":date").dateinput();
</script>

For more info please refer jquery tools

score 0 · Accepted Answer · edited May 23 '17 at 12:30

0

I guess you are wanting to disable text input for the input box, is it? If so, this has been already discussed earlier. Please refer this.

edited May 23 '17 at 12:30

Community

1
1

answered Feb 27 '12 at 08:50

PCoder

2,165
3
23
32

Oybek · Answer 4 · 2012-02-27T09:04:28.070

I could suggest you to mask it also.

Here is the code.

<input type="text" id="dtp" />

and javascript:

$("#dtp")
    .datepicker({ dateFormat: 'yyyy-mm-dd' })
    .mask("9999-99-99");

I used this library.

This is a working demo. You can play with it to fit your needs.

EDIT

I've updated the demo. There is a caveat with mixing these two plugins. However I've managed correct it somehow. Not the most elegant solution but works. ))

score 0 · Answer 5 · answered Feb 27 '12 at 09:10

you can use that function for that text box. write that jquery in your script file.

  <script type="text/javascript" >
    $(document).ready(function ($) {
         $('#<%=txtFrom.ClientID%>').keypress(function () {
            return false;
        });
    });
 </script>

paste that code it will not allow u to press any key from keyboard when your focus is in your text box. 100% tested code.

score 0 · Answer 6 · answered Feb 27 '12 at 09:34

0

Add readonly attribute to this input

readonly="readonly"

answered Feb 27 '12 at 09:34

y.selivonchyk

8,987
8
54
77

jQuery UI Datepicker field disallow change manually

6 Answers6