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


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

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

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

это возможно?

jQuery 1.2.6
Элемент управления datepicker 1.5.2

21 122

21 ответ:

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

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

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

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

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

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

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

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

попробовать

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

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

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

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

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

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

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

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

изменить: чтобы заставить его работать для IE, используйте "keydown" вместо "keypress"

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

добавьте атрибут readonly в jquery.

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

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

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

чтобы datepicker всплывал на усиление фокуса:

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

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

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

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

  1. В: сделать текстовое поле только для чтения. Это можно сделать следующим образом.

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

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

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

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

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

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

HTML

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

CSS

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

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

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

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

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

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

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

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

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

enter image description here

я знаю, что на этот вопрос уже ответили, и большинство предложили использовать 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

заменить идентификатор выбора времени: IDofDatetimePicker к вашему id.

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

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

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

или можно, например, использовать скрытое поле для хранения значения...

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

и в $("#my_txtbox").datepicker ({ options:

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

Если вы хотите, чтобы пользователь выбрал дату из datepicker, но вы не хотите, чтобы пользователь вводил внутри текстового поля, используйте следующий код:

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

});