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

User · Answer

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    lt input type  text  readonly  true    gt

User · Answer

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    lt input type  text  readonly  true    gt

User · Answer

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     lt script type  text javascript  gt    function              datepicker   datepicker   maxDate   -1D     attr  readonly    readonly            datepicker   readonlyDatepicker true

User · Answer

txtfromdate   datepicker                numberOfMonths  2      maxDate  0                     dateFormat   dd-M-yy            attr  readonly    readonly      add the readonly attribute in the jquery

User · Answer

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

User · Answer

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

User · Answer

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    x000D   x000D    function     x000D        id-checkbox   change  function    x000D         id-input3   prop  required     this  is   checked     x000D        x000D        id-input3   datepicker    x000D        id-input3   keypress function event    x000D      return     event keyCode    event which       9   true   false    x000D      x000D      x000D   lt script src  https   ajax googleapis com ajax libs jquery 2 1 1 jquery min js  gt  lt  script gt  x000D   x000D   lt script src  https   code jquery com ui 1 12 1 jquery-ui js  gt  lt  script gt  x000D   x000D   lt link href  https   code jquery com ui jquery-ui-git css  rel  stylesheet   gt  x000D   x000D   lt form action  https   jsfiddle net   gt  x000D  Name    lt input type  text  name  xyz  id  id-input3  readonly  true  required  true  gt   x000D       lt input type  checkbox  id  id-checkbox  gt  Required  lt br gt  x000D       lt br gt  x000D       lt input type  submit  value  Submit  gt  x000D   lt  form gt  x000D   x000D   x000D

User · Answer

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

User · Answer

date   each function  e        if    this  attr  disabled       disabled               this  attr  readOnly    true              this  css  cursor    pointer              this  css  color     5f5f5f

User · Answer

my txtbox   prop  readonly   true    worked like a charm

User · Answer

try      my txtbox   keypress function event   event preventDefault

User · Answer

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      lt input type  text  name  currentDate  id  currentDate  onfocus  this blur    readonly  gt

User · Answer

Or you could  for example  use a hidden field to store the value              lt asp HiddenField ID  hfDay  runat  server    gt    and in the     my txtbox   datepicker   options           onSelect  function  dateText  inst                     lt    hfDay ClientID   gt    val dateText

User · Answer

HTML       lt input class  date-input  type  text  readonly  readonly    gt    CSS   date-input         background-color  white        cursor  pointer

User · Answer

lt input type  text  readonly  true    gt    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

User · Answer

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

User · Answer

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

User · Answer

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    lt input type  text  id  my txtbox  readonly   gt    lt  --HTML5-- gt    lt input type  text  id  my txtbox  readonly  true   gt

User · Answer

Instead of adding readonly you can also use onkeypress  return false

User · Answer

To datepicker to popup on gain focus       selector   datepicker   showOn   both       If you don t want user input  add this to the input field   lt input type  text  name  date  readonly  readonly    gt

User · Answer

You should be able to use the readonly attribute on the text input  and jQuery will still be able to edit its contents    lt input type  text  id  foo  readonly  true  gt

User · Answer

After initialising the date picker     quot  project-date quot   datepicker       dateFormat   d M yy          quot  project-date quot   keydown false

User · Answer

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   lt br  gt   lt  -- padding for jsfiddle -- gt   lt div class  input-group date  id  arrival date div  gt     lt input type  text  class  form-control  id  arrival date  name  arrival date  required readonly  readonly    gt     lt span class  input-group-addon  gt       lt span class  glyphicon-calendar glyphicon  gt  lt  span gt     lt  span gt   lt  div gt    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

User · Answer

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    lt input type  text      inputmode  none    gt    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

[jquery] jQuery Datepicker with text input that doesn't allow user input

Examples related to jquery

Examples related to datepicker