Когда я делаю свой datepicker только для чтения, я вижу, что пользователь не может вводить что-либо в текстовое поле.
$("#datepicker").attr('readonly', 'readonly');
Однако они могут изменить значение с помощью календаря. Как скрыть календарь, чтобы пользователи не могли изменить значение даты?
Я не хочу отключать datepicker, так как мне нужно значение, отправленное на сервер после отправки формы.
("#datepicker").datepicker('disable');удаp >
Я установил следующий обработчик события beforeShow (в параметре параметров) для достижения этой функциональности.
beforeShow: function(i) { if ($(i).attr('readonly')) { return false; } }
Вы можете установить допустимый диапазон для некоторого недопустимого диапазона, чтобы пользователь не мог выбрать дату:
$("#datepicker").datepicker({minDate:-1,maxDate:-2}).attr('readonly','readonly');
Мое окончательное решение:
Когда мое приложение загружается, я инициализирую datepicker как таковой:
$('.selector').datepicker({ dateFormat: "mm/dd/yy" });
Затем у меня есть глобальная кнопка переключения, которая включает/отключает функцию datepicker. Для отключения я делаю следующее:
$('.selector').datepicker("option", "minDate", -1);
$('.selector').datepicker("option", "maxDate", -2);
Чтобы включить, я делаю следующее:
$('.selector').datepicker("option", "minDate", null);
$('.selector').datepicker("option", "maxDate", null);
Спасибо всем!
Все перечисленные решения дают посредственный пользовательский интерфейс или вызывают проблемы, если вы хотите снова включить параметр datepicker с настройками in-tact. Я использовал метод, аналогичный тому, который был выбран для чтения только для чтения, который должен отключить его, но добавить скрытое поле с тем же именем. Проверьте это:
Использование:
$("#datepicker").readonlyDatepicker(true); //makes the datepicker readonly
$("#datepicker").readonlyDatepicker(false); //makes the datepicker editable again
Функция jQuery:
$.fn.readonlyDatepicker = function (makeReadonly) {
$(this).each(function(){
//find corresponding hidden field
var name = $(this).attr('name');
var $hidden = $('input[name="' + name + '"][type="hidden"]');
//if it doesn't exist, create it
if ($hidden.length === 0){
$hidden = $('<input type="hidden" name="' + name + '"/>');
$hidden.insertAfter($(this));
}
if (makeReadonly){
$hidden.val($(this).val());
$(this).unbind('change.readonly');
$(this).attr('disabled', true);
}
else{
$(this).bind('change.readonly', function(){
$hidden.val($(this).val());
});
$(this).attr('disabled', false);
}
});
};
Если вы пытаетесь отключить это поле (без его фактического отключения), попробуйте установить событие onfocus на this.blur();. Таким образом, всякий раз, когда поле становится фокусом, оно автоматически теряет его.
Извините, но решение Eduardos не сработало для меня. В конце я понял, что отключенный datepicker - это текстовое поле только для чтения. Поэтому вы должны сделать это только для чтения и уничтожить дампикера. Поле будет отправлено на сервер после отправки.
Вот немного обобщенный код, который принимает несколько текстовых полей и делает их только для чтения. Он также отключит финалистов.
fields.attr("readonly", "readonly");
fields.each(function(idx, fld) {
if($(fld).hasClass('hasDatepicker'))
{
$(fld).datepicker("destroy");
}
});
onkeypress = > preventdefault...
Я решил это с помощью селектора. Я не инициализирую указатель даты и времени на входах, которые доступны только для чтения.
$('[type=datetime]:not([readonly])').datetimepicker();
Я придумал другое решение, отличное от того, что было предложено. Когда используется средство выбора даты, он создает div, подобный всплывающему окну, который позиционируется при нажатии на поле ввода. Чтобы удалить его, я просто установил свойство видимости CSS, чтобы оно не отображалось.
if ($('.yourDatepickerSelector').prop('readonly')) {
$('#ui-datepicker-div').css({ 'visibility': 'hidden' })
} else { $('#ui-datepicker-div').css({ 'visibility': 'visible' }) }
Это также похоже на правильное размещение на сервере и не должно влиять на любые связанные с ним настройки.
<sj:datepicker id="datepickerid" name="datepickername" displayFormat="%{formatDateJsp}" readonly="true"/>
Работает для меня.
beforeShow: function(el) {
if ( el.getAttribute("readonly") !== null ) {
if ( (el.value == null) || (el.value == '') ) {
$(el).datepicker( "option", "minDate", +1 );
$(el).datepicker( "option", "maxDate", -1 );
} else {
$(el).datepicker( "option", "minDate", el.value );
$(el).datepicker( "option", "maxDate", el.value );
}
}
},
Readonly datepicker with example (jquery) -
In following example you can not open calendar popup.
Check following code see normal and readonly datepicker.
Html Code-
<!doctype html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<title>jQuery UI Datepicker functionality</title>
<link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
rel = "stylesheet">
<script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
<script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<!-- Javascript -->
<script>
$(function() {
var currentDate=new Date();
$( "#datepicker-12" ).datepicker({
setDate:currentDate,
beforeShow: function(i) {
if ($(i).attr('readonly')) { return false; }
}
});
$( "#datepicker-12" ).datepicker("setDate", currentDate);
$("#datepicker-13").datepicker();
$( "#datepicker-13" ).datepicker("setDate", currentDate);
});
</script>
</head>
<body>
<!-- HTML -->
<p>Readonly DatePicker: <input type = "text" id = "datepicker-12" readonly="readonly"></p>
<p>Normal DatePicker: <input type = "text" id = "datepicker-13"></p>
</body>
</html>сделать так, чтобы ваш ввод даты был отключен, но если вы хотите отправить данные повторно, это проблема.
так что после жонглирования это кажется мне идеальным решением
1. Сделайте ввод HTML только для чтения при некоторых условиях.
<input class="form-control date-picker" size="16" data-date-format="dd/mm/yyyy"
th:autocomplete="off"
th:name="birthDate" th:id="birthDate"
type="text" placeholder="dd/mm/jjjj"
th:value="*{#dates.format(birthDate,'dd/MM/yyyy')}"
th:readonly="${client?.isDisableForAoicStatus()}"/>
2. в вашей функции js in ready проверьте атрибут readonly.
$(document).ready(function (e) {
if( $(".date-picker").attr('readonly') == 'readonly') {
$("#birthDate").removeClass('date-picker');
}
});
это остановит всплывающее окно календаря, вызываемое при нажатии на поле только для чтения. Это также не создаст никаких проблем при отправке данных. Но если вы отключите это поле, это не позволит вам ввести значение.
Вы можете использовать enableOnReadonly Option.
$('#datepicker').datepicker({
enableOnReadonly: false
});
См https://bootstrap-datepicker.readthedocs.io/en/latest/options.html#enableonreadonly