How to disable manual input for JQuery UI Datepicker field?

Question

I decided to use the JQuery UI Datepicker script for picking dates. Below is part of my code, and the way I integrated it into my PHP page:

<link type="text/css" href="css/south-street/jquery-ui-1.8.6.custom.css" rel="stylesheet" />
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.6.custom.min.js"></script>
<script type="text/javascript">
$(function(){
    // Datepicker
    $('#datepicker').datepicker({ dateFormat: 'yy-mm-dd' });
    //hover states on the static widgets
    $('#dialog_link, ul#icons li').hover(
        function() { $(this).addClass('ui-state-hover'); }, 
        function() { $(this).removeClass('ui-state-hover'); }
    );
});
</script>

And:

    // date picker (embeds JQuery script)
echo '<label for="datepicker">Date: </label>';
echo '<input type="text" name="datepicker" id="datepicker" />';
echo '<div id="datepicker"></div>';

Pretty much according to the JQuery UI instructions.

Now my question is: how can I disable manual inputs in the text input field? I only want the JQuery Datepicker script to be able to fill the text field. As far as I can see, the script currently prevents the user from entering any non-numerical characters into the text field, but any combination of numbers is allowed (therefore, gibberish like "95460829468" is allowed).

score 317 · Accepted Answer · answered Nov 12 '10 at 12:31

317

When you make the input, set it to be readonly.

<input type="text" name="datepicker" id="datepicker" readonly="readonly" />

answered Nov 12 '10 at 12:31

Matthew Jacobs

4,344
1
20
20

Amazingly simple solution. Seems to be working just as intended, many thanks! – BeeDog Nov 12 '10 at 12:34
2

If you add 'background-color: #fff !important; cursor: text !important;' it'll look totally normal... – s.alem Aug 05 '14 at 12:51
17

I'd use a cursor pointer to make it look clickable `` – E Ciotti Aug 18 '14 at 12:27
This also works in an MVC page with new { @readonly="readonly" } – Dean.DePue Sep 09 '14 at 13:11
It works. But in my case, user can still change the date by hover on input and scrolling over it. I am using xdsoft datetimepicker, any solution for this problem?? – Rahul Sagore Nov 02 '15 at 10:49
This works, but I really wish the datepicker api had an option to do it – Haohmaru Aug 03 '16 at 12:52
2

This solution does not let me clear the selected date. – Anders Lindén Oct 06 '16 at 11:26
This solution doesn't work combined with jQuery validate, or atleast it disables validation of this field – GerritElbrink Jan 04 '21 at 16:50
is it possible to make it unscrollable. Now the user can scroll to change the date – SHENE May 07 '21 at 19:22

score 35 · Answer 2 · answered Jan 02 '13 at 20:04

35

I think you should add style="background:white;" to make looks like it is writable

<input type="text" size="23" name="dateMonthly" id="dateMonthly" readonly="readonly"   style="background:white;"/>

answered Jan 02 '13 at 20:04

Karim Samir

1,470
17
17

7

1. copy answer 2. add new attribute (I think you should add style="background:white;" to make looks like it is writable and "cursor: pointer" to make it look clickable) 3. ??????? 4. Profit – skmasq Jul 04 '16 at 16:33
To be fair, the CSS tip was actually pretty helpful so that the input doesn't appear disabled. – Hartley Brody Jul 31 '19 at 23:18

How to disable manual input for JQuery UI Datepicker field?

2 Answers2

Linked