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

Question

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

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

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

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

jQuery 1.2.6
Datepicker 1.5.2

Answer 1

Я знаю, что эта ветка старая, но для тех, кто сталкивается с той же проблемой, которые реализуют решение @ Brad8118 (которое я предпочитаю, потому что, если вы решите сделать ввод только для чтения, тогда пользователь не сможет удалить значение даты вставляется из DatePicker, если он выбирает), а также необходимо предотвратить вставку значения пользователем (как предложено @ErikPhilips), я позволил это дополнение здесь, которое сработало для меня: $("#my_txtbox").bind('paste',function(e) { e.preventDefault(); //disable paste }); отсюда https://www.dotnettricks.com/learn/jquery/disable-cut-copy-and-paste-in-textbox-using-jquery-javascript и весь конкретный скрипт, используемый мной (вместо этого используется плагин fengyuanchen / datepicker):

$('[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;

Answer 2

Это demo делает это, помещая календарь над текстовым полем, чтобы вы не могли его ввести. Вы также можете установить поле ввода для чтения только в HTML, чтобы быть уверенным.

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

Answer 3

HTML

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

CSS

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

Answer 4

Этот вопрос имеет много старых ответов и, по-видимому, является общепринятым решением. Я считаю, что лучший подход в современных браузерах заключается в использовании inputmode="none" в теге ввода HTML:

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

или, если вы предпочитаете делать это в сценарии:

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

Я не тестировал его всесторонне, но он хорошо работает на настройках Android, с которыми я его использовал.

Answer 5

заменить идентификатор таймера: IDofDatetimePicker для вашего идентификатора.

Это запретит пользователю вводить любые дальнейшие вводы с клавиатуры, но, тем не менее, пользователь сможет получить доступ к всплывающему окну времени.

$ ("# my_txtbox"). Нажатие клавиши (функция (событие) {event.preventDefault ();});

Попробуйте это источник: https://github.com/jonthornton/jquery-timepicker/issues/109

Answer 6

Я знаю, что на этот вопрос уже дан ответ, и большинству предлагается использовать readonly attribure.
Я просто хочу поделиться своим сценарием и ответить.

После добавления атрибута readonly к моему элементу HTML я столкнулся с проблемой, заключающейся в том, что я не могу сделать этот атрибут как required динамически.
Даже пытался установить как readonly и required во время создания HTML.

Поэтому я предлагаю не использовать readonly, если вы также хотите установить его как required.

Вместо этого используйте

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

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

Это позволяет нажимать только tab клавишу.
Вы можете добавить больше кодов клавиш , которые вы хотите обойти.

Я ниже кода, так как я добавил и readonly и required, он все еще отправляет форму.
После удаления readonly работает нормально.

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>

Answer 7

Вместо использования текстового поля вы также можете использовать кнопку. Лучше всего подходит для меня, где я не хочу, чтобы пользователи писали дату вручную.

Answer 8

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

работал как шарм ..

Answer 9

Я обнаружил, что плагин jQuery Calendar, по крайней мере для меня, вообще лучше работает для выбора дат.

Answer 10

Вот ваш ответ, который является способом решения. Вы не хотите использовать jquery, когда вы ограничивали пользовательский ввод в элементе управления textbox.

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

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