jQuery Datepicker with text input that doesn't allow user input

You should be able to use the readonly attribute on the text input, and jQuery will still be able to edit its contents.

<input type='text' id='foo' readonly='true'>

try

$("#my_txtbox").keypress(function(event) {event.preventDefault();});

To datepicker to popup on gain focus:

$(".selector").datepicker({ showOn: 'both' })

If you don't want user input, add this to the input field

<input type="text" name="date" readonly="readonly" />

I know this thread is old, but for others who encounter the same problem, that implement @Brad8118 solution (which i prefer, because if you choose to make the input readonly then the user will not be able to delete the date value inserted from datepicker if he chooses) and also need to prevent the user from pasting a value (as @ErikPhilips suggested to be needed), I let this addition here, which worked for me: $("#my_txtbox").bind('paste',function(e) { e.preventDefault(); //disable paste }); from here https://www.dotnettricks.com/learn/jquery/disable-cut-copy-and-paste-in-textbox-using-jquery-javascript and the whole specific script used by me (using fengyuanchen/datepicker plugin instead):

$('[data-toggle="datepicker"]').datepicker({
    autoHide: true,
    pick: function (e) {
        e.preventDefault();
        $(this).val($(this).datepicker('getDate', true));
    }
}).keypress(function(event) {
    event.preventDefault(); // prevent keyboard writing but allowing value deletion
}).bind('paste',function(e) {
    e.preventDefault()
}); //disable paste;

Instead of adding readonly you can also use onkeypress="return false;"

This demo sort of does that by putting the calendar over the text field so you can't type in it. You can also set the input field to read only in the HTML to be sure.

<input type="text" readonly="true" />

I've found that the jQuery Calendar plugin, for me at least, in general just works better for selecting dates.

$('.date').each(function (e) {
    if ($(this).attr('disabled') != 'disabled') {
        $(this).attr('readOnly', 'true');
        $(this).css('cursor', 'pointer');
        $(this).css('color', '#5f5f5f');
    }
});

replace the ID of time picker: IDofDatetimePicker to your id.

This will prevent the user from entering any further keyboard inputs but still, the user will be able to access the time popup.

$("#my_txtbox").keypress(function(event) {event.preventDefault();});

Try this source: https://github.com/jonthornton/jquery-timepicker/issues/109

This question has a lot of older answers and readonly seems to be the generally accepted solution. I believe the better approach in modern browsers is to use the inputmode="none" in the HTML input tag:

<input type="text" ... inputmode="none" />

or, if you prefer to do it in script:

$(selector).attr('inputmode', 'none');

I haven't tested it extensively, but it is working well on the Android setups I have used it with.

In my case i have use disableTextInput property

$( ".datepicker" ).datepicker({'dateFormat' : 'd-m-y', 'disableTextInput':true });