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

Question

How do I use the jQuery Datepicker with a textbox input:

$("#my_txtbox").datepicker({
  // options
});

that doesn't allow the user to input random text in the textbox. I want the Datepicker to pop up when the textbox gains focus or the user clicks on it, but I want the textbox to ignore any user input using the keyboard (copy & paste, or any other). I want to fill the textbox exclusively from the Datepicker calendar.

Is this possible?

jQuery 1.2.6
Datepicker 1.5.2

score 283 · Accepted Answer · edited Mar 18 '11 at 17:24

283

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'>

edited Mar 18 '11 at 17:24

koenHuybrechts

868
4
15
28

answered Sep 30 '08 at 16:17

Adam Bellaire

108,003
19
148
163

30

For People that have Javascript disabled I would leave the input field alone in the HTML and have the bit of jQuery place the readonly attribute on the page load $(document).ready(function () { $("#my_txtbox").attr 'readOnly' , 'true' ); }); That way users with JS turned off can still pick a date – SimonGates Mar 29 '11 at 11:49
6

this is great.. however the default styling that Chrome (and possibly other browsers) adds to readonly attributes is really unpleasant, so be sure you override it – Damon Jun 07 '12 at 19:35
Attention. With `readonly` datepicker the final user **will be able to manpilate** the field value by picking another date from the datepicker, as in this bug: http://bugs.jqueryui.com/ticket/13107 – serge Jun 11 '15 at 15:07
1

@FooBar You proposed a practical solution; just a note that the current preferred way (as some time has passed since your comment) to setting the readonly attribute is via the prop() method: `$("#my_txtbox").prop('readonly', true)` – Werner Jun 12 '15 at 09:32
1

@Werner thanks for the tip..... It's funny because 4 years later.... I am no longer worried about people with JavaScript disabled :) – SimonGates Jun 16 '15 at 15:04
2

As per WC3 HTML specification, its only or without true/false https://www.w3.org/TR/html5/forms.html#the-readonly-attribute – Ankit Sharma Sep 21 '16 at 14:13
5

I'd use a cursor pointer to make it look clickable `` – Benjamin Lucidarme May 19 '17 at 11:46

score 62 · Answer 2 · edited Nov 17 '14 at 22:11

62

Based on my experience I would recommend the solution suggested by Adhip Gupta:

$("#my_txtbox").attr( 'readOnly' , 'true' );

The following code won't let the user type new characters, but will allow them to delete characters:

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

Additionally, this will render the form useless to those who have JavaScript disabled:

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

edited Nov 17 '14 at 22:11

Jonathan Bender

1,911
4
22
39

answered Oct 02 '11 at 07:27

2046

621
5
2

3

OP should consider marking this as the answer due to the JavaScript disable scenario. – CeejeeB Sep 21 '12 at 14:24
7

in what parallel universe people use regular web site with disabled javascript ? – d.raev Dec 11 '13 at 08:04
How would this JAVASCRIPT answer help if JavaScript was disabled anyway? – PW Kad Nov 05 '14 at 22:45
1

@PWKad by adding the `readonly` attribute to the field via JS, you ensure that if they have JavaScript disabled (and therefore won't be able to use the datepicker), they can still use the form via standard manual entry. – Jonathan Bender Nov 17 '14 at 21:35
2

At the time of writing, this is the preferred way to set the readonly attribute using jQuery: `$("#my_txtbox").prop('readonly', true)`; – Werner Jun 12 '15 at 09:29

score 13 · Answer 3 · answered Sep 30 '08 at 16:21

13

try

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

answered Sep 30 '08 at 16:21

Brad8118

4,672
11
36
48

I've used this with asp.net with success as it didn't play nice when setting the readonly attribute to "true" – Russ Cam Dec 01 '08 at 18:05
2

This does not prevent someone from pasting a value into the textbox for future reference. – Erik Philips Sep 21 '10 at 04:26

score 10 · Answer 4 · answered Nov 17 '09 at 11:16

If you are reusing the date-picker at multiple places then it would be apt to modify the textbox also via JavaScript by using something like:

$("#my_txtbox").attr( 'readOnly' , 'true' );

right after/before the place where you initialize your datepicker.

score 6 · Answer 5 · 2009-11-19T11:20:54.763

6

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

causes the textbox to lose its value after postback.

You rather should use Brad8118's suggestion which is working perfectly.

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

EDIT: to get it working for IE use 'keydown' instead of 'keypress'

edited Nov 19 '09 at 11:20

answered Nov 18 '09 at 07:37

score 6 · Answer 6 · edited Dec 14 '20 at 12:31

6

After initialising the date picker:

$(".project-date").datepicker({
    dateFormat: 'd M yy'
});

$(".project-date").keydown(false);

edited Dec 14 '20 at 12:31

mickmackusa

43,625
12
83
136

answered Jan 27 '17 at 11:01

umutesen

2,523
1
27
41

Or in a single step `$(".project-date").datepicker().keydown(false);` – Christian Lescuyer May 13 '17 at 13:08

score 4 · Answer 7 · edited Aug 18 '16 at 07:14

4

You have two options to get this done. (As far as i know)

Option A: Make your text field read only. It can be done as follows.
Option B: Change the curser onfocus. Set ti to blur. it can be done by setting up the attribute onfocus="this.blur()" to your date picker text field.

Ex: <input type="text" name="currentDate" id="currentDate" onfocus="this.blur()" readonly/>

edited Aug 18 '16 at 07:14

steveb

5,382
2
27
36

answered Nov 21 '14 at 08:53

user2182143

992
9
10

2

the blur hack was kinda awesome. The field didn't have to be readonly which confuses some users when they get the giant red STOP on a field in Chrome... it prevents cut and paste, deletions, typing, etc... and the jquery datepicker still works just fine... – David C Jun 17 '15 at 15:06

score 4 · Answer 8 · edited Aug 17 '16 at 09:05

4

$("#txtfromdate").datepicker({         
    numberOfMonths: 2,
    maxDate: 0,               
    dateFormat: 'dd-M-yy'       
}).attr('readonly', 'readonly');

add the readonly attribute in the jquery.

edited Aug 17 '16 at 09:05

Basheer AL-MOMANI

14,473
9
96
92

answered Sep 18 '15 at 10:15

Chenthil

296
4
9

score 3 · Answer 9 · answered Sep 30 '08 at 16:20

3

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" />

answered Sep 30 '08 at 16:20

Eduardo Molteni

38,786
23
141
206

score 3 · Answer 10 · answered Mar 07 '17 at 10:12

I just came across this so I am sharing here. Here is the option

https://eonasdan.github.io/bootstrap-datetimepicker/Options/#ignorereadonly

Here is the code.

HTML

<br/>
<!-- padding for jsfiddle -->
<div class="input-group date" id="arrival_date_div">
  <input type="text" class="form-control" id="arrival_date" name="arrival_date" required readonly="readonly" />
  <span class="input-group-addon">
    <span class="glyphicon-calendar glyphicon"></span>
  </span>
</div>

JS

$('#arrival_date_div').datetimepicker({
  format: "YYYY-MM-DD",
  ignoreReadonly: true
});

Here is the fiddle:

http://jsfiddle.net/matbaric/wh1cb6cy/

My version of bootstrap-datetimepicker.js is 4.17.45

score 2 · Answer 11 · answered Mar 11 '19 at 16:10

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;

score 2 · Answer 12 · answered Aug 05 '19 at 07:44

2

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

answered Aug 05 '19 at 07:44

Krishnan KK

313
4
13

1

this advice was posted 2 years earlier: https://stackoverflow.com/a/41892415/2943403 – mickmackusa Dec 14 '20 at 12:09
This is the best answer in my opinion, it also enables validation. – GerritElbrink Jan 04 '21 at 16:53

score 1 · Answer 13 · answered Sep 30 '08 at 16:22

1

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" />

answered Sep 30 '08 at 16:22

Zach

24,496
9
43
50

score 1 · Answer 14 · answered Feb 20 '15 at 09:00

1

HTML

<input class="date-input" type="text" readonly="readonly" />

CSS

.date-input {
      background-color: white;
      cursor: pointer;
}

answered Feb 20 '15 at 09:00

kayz1

7,260
3
53
56

score 0 · Answer 15 · answered Sep 30 '08 at 16:22

0

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

answered Sep 30 '08 at 16:22

James Curran

101,701
37
181
258

score 0 · Answer 16 · answered Nov 19 '13 at 12:51

0

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

answered Nov 19 '13 at 12:51

LithiumD

21
2

score 0 · Answer 17 · edited Jul 31 '15 at 05:14

0

Here is your answer which is way to solve.You do not want to use jquery when you restricted the user input in textbox control.

<input type="text" id="my_txtbox" readonly />  <!--HTML5-->

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

edited Jul 31 '15 at 05:14

kleopatra

51,061
28
99
211

answered Jul 31 '15 at 04:52

johnkhadka

41
7

score 0 · Answer 18 · answered Jul 16 '16 at 09:08

0

$("#my_txtbox").prop('readonly', true)

worked like a charm..

answered Jul 16 '16 at 09:08

Prakash Singh

1
3

score 0 · Answer 19 · answered Nov 24 '16 at 05:57

0

Instead of using textbox you can use button also. Works best for me, where I don't want users to write date manually.

answered Nov 24 '16 at 05:57

Ajjay Arora

144
2
4
10

Shantaram Tupe · Answer 20 · 2017-06-16T10:40:50.200

I know this question is already answered, and most suggested to use readonly attribure.
I just want to share my scenario and answer.

After adding readonly attribute to my HTML Element, I faced issue that I am not able to make this attribute as required dynamically.
Even tried setting as both readonly and required at HTML creation time.

So I will suggest do not use readonly if you want to set it as required also.

Instead use

$("#my_txtbox").datepicker({
    // options
});

$("#my_txtbox").keypress(function(event) {
    return ( ( event.keyCode || event.which ) === 9 ? true : false );
});

This allow to press tab key only.
You can add more keycodes which you want to bypass.

I below code since I have added both readonly and required it still submits the form.
After removing readonly it works properly.

https://jsfiddle.net/shantaram/hd9o7eor/

$(function() {
  $('#id-checkbox').change( function(){
   $('#id-input3').prop('required', $(this).is(':checked'));
  });
  $('#id-input3').datepicker();
  $("#id-input3").keypress(function(event) {
    return ( ( event.keyCode || event.which ) === 9 ? true : false );
});
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<link href="https://code.jquery.com/ui/jquery-ui-git.css" rel="stylesheet"/>

<form action='https://jsfiddle.net/'>
Name:  <input type="text" name='xyz' id='id-input3' readonly='true' required='true'> 
    <input type='checkbox' id='id-checkbox'> Required <br>
    <br>
    <input type='submit' value='Submit'>
</form>

score 0 · Answer 21 · answered Sep 20 '17 at 19:41

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

score 0 · Answer 22 · answered Apr 03 '19 at 09:51

0

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.

answered Apr 03 '19 at 09:51

Peter Bowers

3,063
1
10
18

I was coding this project mostly for mobile Android. Ymmv with other platforms. – Peter Bowers Sep 01 '19 at 18:47

score 0 · Answer 23 · answered May 24 '21 at 11:17

0

In my case i have use disableTextInput property

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

answered May 24 '21 at 11:17

Ahmed Awan

347
3
9

score -1 · Answer 24 · answered Oct 17 '12 at 21:50

Or you could, for example, use a hidden field to store the value...

        <asp:HiddenField ID="hfDay" runat="server" />

and in the $("#my_txtbox").datepicker({ options:

        onSelect: function (dateText, inst) {
            $("#<% =hfDay.ClientID %>").val(dateText);
        }

score -1 · Answer 25 · answered Feb 26 '13 at 11:53

If you want the user to select a date from the datepicker but you dont want the user to type inside the textbox then use the following code :

<script type="text/javascript">
$(function () {
    $("#datepicker").datepicker({ maxDate: "-1D" }).attr('readonly', 'readonly');
    $("#datepicker").readonlyDatepicker(true);

});

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

25 Answers25

Linked

Related