Как использовать jQuery Datepicker с вводом текстового поля:
$("#my_txtbox").datepicker({
// options
});
это не позволяет пользователю вводить случайный текст в текстовое поле. Я хочу, чтобы Datepicker всплывал, когда текстовое поле получает фокус или пользователь нажимает на него, но я хочу, чтобы текстовое поле игнорировало любой ввод пользователя с клавиатуры (копирование и вставка или любое другое). Я хочу заполнить текстовое поле исключительно из календаря Datepicker.
Это возможно?
jQuery 1.2.6
Datepicker 1.5.2
jquery
datepicker
Эллиот Варгас
источник
источник
$("#my_txtbox").prop('readonly', true)
<input ... readonly="readonly" style="cursor:pointer; background-color: #FFFFFF">
Исходя из своего опыта, я бы порекомендовал решение, предложенное Адипом Гуптой:
$("#my_txtbox").attr( 'readOnly' , 'true' );
Следующий код не позволит пользователю ввести новые символы, но будет позволять им удалить символы:
$("#my_txtbox").keypress(function(event) {event.preventDefault();});
Кроме того, это сделает форму бесполезной для тех, у кого отключен JavaScript:
<input type="text" readonly="true" />
источник
readonly
атрибут в поле через JS, вы гарантируете, что если у них отключен JavaScript (и, следовательно, они не смогут использовать datepicker), они все равно смогут использовать форму через стандартный ввод вручную.$("#my_txtbox").prop('readonly', true)
;пытаться
$("#my_txtbox").keypress(function(event) {event.preventDefault();});
источник
Если вы повторно используете средство выбора даты в нескольких местах, было бы возможно изменить текстовое поле также с помощью JavaScript, используя что-то вроде:
$("#my_txtbox").attr( 'readOnly' , 'true' );
сразу после / до места, где вы инициализируете свой датпикер.
источник
<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.
источник
У вас есть два варианта сделать это. (Насколько мне известно)
Вариант А. Сделайте текстовое поле доступным только для чтения. Это можно сделать следующим образом.
Вариант Б: изменить курсор на фокусе. Установите ti на размытие. это можно сделать, установив атрибут
onfocus="this.blur()"
в текстовое поле выбора даты.Пример:
<input type="text" name="currentDate" id="currentDate" onfocus="this.blur()" readonly/>
источник
После инициализации средства выбора даты:
$(".project-date").datepicker({ dateFormat: 'd M yy' }); $(".project-date").keydown(false);
источник
$(".project-date").datepicker().keydown(false);
Чтобы всплывающее окно выбора даты при фокусировке:
$(".selector").datepicker({ showOn: 'both' })
Если вам не нужен ввод данных пользователем, добавьте это в поле ввода
<input type="text" name="date" readonly="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
источник
Я знаю, что эта ветка устарела, но для других, которые сталкиваются с той же проблемой, реализуют решение @ 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;
источник
Эта демонстрационная версия делает это, помещая календарь поверх текстового поля, чтобы вы не могли его вводить. Вы также можете установить поле ввода только для чтения в HTML, чтобы быть уверенным.
<input type="text" readonly="true" />
источник
HTML
<input class="date-input" type="text" readonly="readonly" />
CSS
.date-input { background-color: white; cursor: pointer; }
источник
Вместо добавления только для чтения вы также можете использовать onkeypress = "return false;"
источник
Я обнаружил, что плагин jQuery Calendar, по крайней мере для меня, в целом работает лучше для выбора дат.
источник
$('.date').each(function (e) { if ($(this).attr('disabled') != 'disabled') { $(this).attr('readOnly', 'true'); $(this).css('cursor', 'pointer'); $(this).css('color', '#5f5f5f'); } });
источник
Вот ваш ответ, который является способом решения. Вы не хотите использовать jquery, когда вы ограничили ввод пользователя в элемент управления текстовым полем.
<input type="text" id="my_txtbox" readonly /> <!--HTML5--> <input type="text" id="my_txtbox" readonly="true"/>
источник
$ ("# my_txtbox"). prop ('только для чтения', истина)
работал как шарм ..
источник
Вместо текстового поля вы также можете использовать кнопку. Лучше всего подходит для меня, когда я не хочу, чтобы пользователи писали дату вручную.
источник
Я знаю, что на этот вопрос уже дан ответ, и большинство из них предложили использовать
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>
источник
замените идентификатор средства выбора времени: IDofDatetimePicker на свой идентификатор.
Это предотвратит дальнейший ввод с клавиатуры пользователем, но, тем не менее, пользователь сможет получить доступ к всплывающему окну времени.
$ ("# my_txtbox"). keypress (функция (событие) {event.preventDefault ();});
Попробуйте этот источник: https://github.com/jonthornton/jquery-timepicker/issues/109
источник
На этот вопрос есть много старых ответов, и только чтение кажется общепринятым решением. Я считаю, что лучший подход в современных браузерах - использовать
inputmode="none"
тег ввода HTML:<input type="text" ... inputmode="none" />
или, если вы предпочитаете делать это в скрипте:
$(selector).attr('inputmode', 'none');
Я не тестировал его тщательно, но он хорошо работает с настройками Android, с которыми я его использовал.
источник
Или вы можете, например, использовать скрытое поле для хранения значения ...
<asp:HiddenField ID="hfDay" runat="server" />
и в $ ("# my_txtbox"). datepicker ({options:
onSelect: function (dateText, inst) { $("#<% =hfDay.ClientID %>").val(dateText); }
источник
Если вы хотите, чтобы пользователь выбрал дату в окне выбора даты, но не хотите, чтобы пользователь вводил данные в текстовое поле, используйте следующий код:
<script type="text/javascript"> $(function () { $("#datepicker").datepicker({ maxDate: "-1D" }).attr('readonly', 'readonly'); $("#datepicker").readonlyDatepicker(true); });
источник