jQuery Datepicker с вводом текста, который не позволяет вводить пользователем

Question

Как использовать jQuery Datepicker для ввода в текстовое поле:

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

, что не позволяет пользователю вводить произвольный текст в текстовое поле. Я хочу, чтобы Datepicker всплывал, когда текстовое поле фокусируется или пользователь нажимает на него, но я хочу, чтобы текстовое поле игнорировало любой ввод пользователя с помощью клавиатуры (копирование и вставка или любое другое). Я хочу заполнить текстовое поле исключительно из календаря Datepicker.

Возможно ли это?

jQuery 1.2.6
Datepicker 1.5.2

Answer 1

Вы должны иметь возможность использовать атрибут readonly для ввода текста, и jQuery по-прежнему сможет редактировать его содержимое.

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

Answer 2

Исходя из своего опыта, я бы порекомендовал решение, предложенное Adhip Gupta:

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

Следующий код не позволяет пользователю вводить новые символы, но будет позволять им удалять символы:

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

Кроме того, это сделает форму бесполезной для тех, у кого отключен JavaScript:

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

Answer 3

1001 * попробовать *

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

Answer 4

Если вы повторно используете средство выбора даты в нескольких местах, было бы возможно изменить текстовое поле также с помощью JavaScript, используя что-то вроде:

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

сразу после / до того места, где вы инициализировали свой указатель даты.

Answer 5

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

приводит к тому, что текстовое поле теряет свое значение после обратной передачи.

Вам лучше использовать предложение Brad8118, которое отлично работает.

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

EDIT: чтобы заставить его работать в IE, используйте «keydown» вместо «keypress»

Answer 6

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

добавить атрибут только для чтения в jquery.

Answer 7

После инициализации выбора даты:

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

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

Answer 8

У вас есть два варианта, чтобы сделать это. (Насколько я знаю)

1. Опция A: Сделайте ваше текстовое поле доступным только для чтения. Это можно сделать следующим образом.

2. Вариант B: Изменить фокусировку курсора. Установите время размытия. это можно сделать, установив атрибут onfocus="this.blur()" в поле ввода даты.

Пример: <input type="text" name="currentDate" id="currentDate" onfocus="this.blur()" readonly/>

Answer 9

Для выбора даты в всплывающем окне:

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

Если вы не хотите вводить пользователя, добавьте его в поле ввода

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

Answer 10

Я только что столкнулся с этим, поэтому я делюсь здесь. Вот вариант

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

Вот код.

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
});

Вот скрипка:

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

Моя версия файла bootstrap-datetimepicker.js - 4.17.45