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

Ответ 1

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

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

Ответ 2

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

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

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

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

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

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

Ответ 3

попробовать

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

Ответ 4

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

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

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

Ответ 5

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

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

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

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

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

Ответ 6

Чтобы выбрать дату для всплывающего окна с фокусом усиления:

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

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

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

Ответ 7

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

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

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

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

Ответ 8

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

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

Ответ 9

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

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

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

Ответ 10

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

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

Ответ 11

HTML

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

CSS

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

Ответ 12

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

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

Ответ 13

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

Ответ 14

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

Ответ 15

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

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

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

Ответ 16

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

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

Ответ 17

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

Ответ 18

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

После добавления атрибута 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>

Ответ 19

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

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

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

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

Ответ 20

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

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

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

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

Ответ 21

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

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

});