JQuery DatePicker ReadOnly

Когда я делаю свой datepicker только для чтения, я вижу, что пользователь не может вводить что-либо в текстовое поле.

$("#datepicker").attr('readonly', 'readonly');

Однако они могут изменить значение с помощью календаря. Как скрыть календарь, чтобы пользователи не могли изменить значение даты?

Я не хочу отключать datepicker, так как мне нужно значение, отправленное на сервер после отправки формы.

("#datepicker").datepicker('disable');удаp >

Ответы

Ответ 1

Я установил следующий обработчик события beforeShow (в параметре параметров) для достижения этой функциональности.

beforeShow: function(i) { if ($(i).attr('readonly')) { return false; } }

Ответ 2

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

$("#datepicker").datepicker({minDate:-1,maxDate:-2}).attr('readonly','readonly');

Ответ 3

Мое окончательное решение:

Когда мое приложение загружается, я инициализирую 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);

Спасибо всем!

Ответ 4

Все перечисленные решения дают посредственный пользовательский интерфейс или вызывают проблемы, если вы хотите снова включить параметр 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);
        }
    });
};

Ответ 5

Если вы пытаетесь отключить это поле (без его фактического отключения), попробуйте установить событие onfocus на this.blur();. Таким образом, всякий раз, когда поле становится фокусом, оно автоматически теряет его.

Ответ 6

Извините, но решение Eduardos не сработало для меня. В конце я понял, что отключенный datepicker - это текстовое поле только для чтения. Поэтому вы должны сделать это только для чтения и уничтожить дампикера. Поле будет отправлено на сервер после отправки.

Вот немного обобщенный код, который принимает несколько текстовых полей и делает их только для чтения. Он также отключит финалистов.

fields.attr("readonly", "readonly");
fields.each(function(idx, fld) {
    if($(fld).hasClass('hasDatepicker'))
    {
        $(fld).datepicker("destroy");
    }
});

Ответ 7

onkeypress = > preventdefault...

Ответ 8

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

$('[type=datetime]:not([readonly])').datetimepicker();

Ответ 9

Я придумал другое решение, отличное от того, что было предложено. Когда используется средство выбора даты, он создает div, подобный всплывающему окну, который позиционируется при нажатии на поле ввода. Чтобы удалить его, я просто установил свойство видимости CSS, чтобы оно не отображалось.

if ($('.yourDatepickerSelector').prop('readonly')) {
    $('#ui-datepicker-div').css({ 'visibility': 'hidden' })
} else { $('#ui-datepicker-div').css({ 'visibility': 'visible' }) }

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

Ответ 10

<sj:datepicker id="datepickerid" name="datepickername" displayFormat="%{formatDateJsp}" readonly="true"/>

Работает для меня.

Ответ 11

      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 );
                }
            }
        },

Ответ 12

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>

Ответ 13

сделать так, чтобы ваш ввод даты был отключен, но если вы хотите отправить данные повторно, это проблема.

так что после жонглирования это кажется мне идеальным решением

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');
            }
     });

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