JQuery DatePicker ReadOnly - PullRequest
Новая
       2

JQuery DatePicker ReadOnly

35 голосов
/ 18 октября 2011

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

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

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

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

("#datepicker").datepicker('disable');

Ответы [ 12 ]

73 голосов
/ 29 ноября 2011

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

beforeShow: function(i) { if ($(i).attr('readonly')) { return false; } }
26 голосов
/ 18 октября 2011

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

$("#datepicker").datepicker({minDate:-1,maxDate:-2}).attr('readonly','readonly');
6 голосов
/ 20 октября 2011

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

Когда мое приложение загружается, я инициализирую указатель даты следующим образом: 

$('.selector').datepicker({ dateFormat: "mm/dd/yy" });

У меня есть глобальная кнопка-переключатель, которая включает / отключает средство выбора даты. Для отключения я делаю следующее: 

$('.selector').datepicker("option", "minDate", -1);
$('.selector').datepicker("option", "maxDate", -2);

Чтобы включить, я делаю следующее: 

$('.selector').datepicker("option", "minDate", null);
$('.selector').datepicker("option", "maxDate", null);

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

5 голосов
/ 15 января 2013

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

Использование: 

$("#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);
        }
    });
};
4 голосов
/ 18 октября 2011

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

2 голосов
/ 24 октября 2012

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

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

fields.attr("readonly", "readonly");
fields.each(function(idx, fld) {
    if($(fld).hasClass('hasDatepicker'))
    {
        $(fld).datepicker("destroy");
    }
});
1 голос
/ 18 октября 2011

onkeypress => предотвращение ошибки ...

0 голосов
/ 08 апреля 2019

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

$('[type=datetime]:not([readonly])').datetimepicker();
0 голосов
/ 07 сентября 2018 
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>
0 голосов
/ 22 июня 2015 
      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 );
                }
            }
        },
Страница:
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...