CODEWITHSUNDEEP
jqueryjquery-ui
user2395176
user2395176

Reputation: 315

how can I disable manual inputs in the text input field- JQuery Datepicker

I have a text box and I can able to find the ID of that textbox. Binded a JQuery date picker to that text box. My requirement is the user can select the values only through Datepicker. User can't enter value manually. Is it possible?

Any help is very ppreciated!

Upvotes: 6

Views: 32349

Answers (5)

Abelardo CM
Abelardo CM

Reputation: 1

<input class="form-control datepicker" id="datepicker" name="sn_rg" placeholder="Fecha de salida y regreso" type="text" required="" >

var dateToday = new Date()
  if (document.querySelector('#datepicker')) {
    flatpickr('#datepicker', {
      mode: "range",
      numberOfMonths: 3,
      showButtonPanel: true,
      minDate: dateToday
    }); // flatpickr 
  }

Upvotes: 0

Updesh Srivastava
Updesh Srivastava

Reputation: 128

Readonly or disabled does not work for me atleast.

We can override the key events on the input control

<input onkeydown="return false" ... />

Upvotes: 3

kayz1
kayz1

Reputation: 7434

Try something like this:

HTML

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

CSS

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

Upvotes: 1

Smeegs
Smeegs

Reputation: 9224

Add "readonly" to the tag.

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

Upvotes: 1

Nick
Nick

Reputation: 4212

make the textbox readonly

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

or via jquery

$('#dateMonthly').attr('readonly', true);

Upvotes: 14

Related Questions