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

Question

Как использовать JQuery Datepicker с входом текстового поля:

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

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

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

JQuery 1.2.6
Datepicker 1.5.2

Answer 1

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

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

Answer 2

Чтобы DatePicker Всплывающие на усиление фокуса:

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

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

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

Answer 3

попробовать

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

Answer 4

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

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

Answer 5

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

Answer 6

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

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

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

Answer 7

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

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

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

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

EDIT: , чтобы заставить его работать в IE использовать 'KeyDown' вместо 'нажатием клавиши'

Answer 8

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

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

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

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

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

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

Answer 9

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

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

.

и в $ ("# my_txtbox") Datepicker ({опции:

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

Answer 10

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

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

}); 

Answer 11

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

Answer 12

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

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

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

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

Answer 13

HTML

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

CSS

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

Answer 14

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

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

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

Answer 15

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

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

Answer 16

$ ("# my_txtbox").проп («только для чтения», правда)

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

Answer 17

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

Answer 18

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

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

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

Answer 19

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

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/

Моя версия бутстраповского-datet imepicker.js is 4.17.45

Answer 20

Я знаю, что на этот вопрос уже дан ответ, и большинство из них предложили использовать 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 ключ только.
Вы можете добавить еще keycode, который вы хотите обойти.

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

https://jsfiddle.net/shantaram/hd9o7eor/

$(function() { 
 
    $('#id-checkbox').change(function(){ 
 
    \t $('#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 21

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

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

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

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