JQuery DatePicker ReadOnly

时间：2011-10-18 18:41:44

标签： jquery datepicker

当我将datepicker设为只读时，我发现用户无法在文本框中输入任何内容。 

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

但是，他们仍然可以使用日历更改值。如何隐藏日历以便用户无法更改日期值？

我不想禁用datepicker，因为我需要在表单提交时将值发布到服务器。

<击> ("#datepicker").datepicker('disable');

14 个答案:

答案 0 :(得分：71)

我设置了以下beforeShow事件处理程序（在options参数中）来实现此功能。

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

答案 1 :(得分：26)

您可以将允许的范围设置为某个无效范围，以便用户无法选择任何日期：

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

答案 2 :(得分：6)

我的最终解决方案：

当我的应用加载时，我会初始化datepicker：

$('.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);

谢谢大家！

答案 3 :(得分：5)

如果您希望重新启用日期选择器及其设置，所有列出的解决方案都会提供平庸的用户体验或导致问题。我使用了类似于select select-only的方法，即禁用它但添加一个具有相同名称的隐藏字段。检查一下：

用法：

$("#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 :(得分：4)

如果您尝试停用该字段（但实际上没有禁用该字段），请尝试将onfocus事件设置为this.blur();。这样，只要字段获得焦点，就会自动丢失它。

答案 5 :(得分：2)

很抱歉，但Eduardos解决方案对我不起作用。 最后，我意识到禁用的datepicker只是一个只读的文本框。 因此，您应该将其设为只读并销毁datepicker。 字段将在提交后发送到服务器。

这是一个通用的代码，它接受多个文本框并使它们只读。 它也将剥离日期选择器。

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

答案 6 :(得分：1)

onkeypress =＆gt;防止默认...

答案 7 :(得分：0)

我提出了另一种与提议的解决方案不同的解决方案。使用日期选择器时，它会创建一个div，类似于在单击输入字段时定位的弹出窗口。要删除它，我只需设置CSS的visibility属性，使其不显示。

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

这似乎也正确地发布到服务器上，并且不应影响与之关联的任何设置。

答案 8 :(得分：0)

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

适合我。

答案 9 :(得分：0)

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

答案 10 :(得分：0)

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>

答案 11 :(得分：0)

我用选择器解决了这个问题。我没有在只读输入上初始化datetime选择器。 

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

答案 12 :(得分：0)

通过禁用日期选择器输入来实现此目的，但是如果您要提交表单数据，那么这是一个问题。

所以在经过很多杂耍之后，这对我来说似乎是一个完美的解决方案

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中的ready函数中，检查readonly属性。

 $(document).ready(function (e) {

            if( $(".date-picker").attr('readonly') == 'readonly') {
                $("#birthDate").removeClass('date-picker');
            }
     });

这将停止在单击只读字段时调用日历弹出窗口。这也不会对提交数据造成任何问题。但是，如果您禁用该字段，则将不允许您提交值。

答案 13 :(得分：-1)

您可以使用 enableOnReadonly 选项。

$('#datepicker').datepicker({
    enableOnReadonly: false
});

请参见https://bootstrap-datepicker.readthedocs.io/en/latest/options.html#enableonreadonly

相关问题
最新问题