JQuery DatePicker 只读

Posted 2023-05-07

【中文标题】JQuery DatePicker 只读

【英文标题】：JQuery DatePicker ReadOnly

【发布时间】：2011-12-10 08:32:09

【问题描述】：

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

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

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

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

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

【问题讨论】：

您想使用日期选择器行为，但又不希望用户能够选择日期，也不想更改日期。为什么您不使用简单的输入字段？

如果您不想进行任何用户交互，请使用 <input type="hidden" />

@Aaron - 顶部有一个全局锁定/解锁按钮。如果锁定则不允许用户修改数据。如果解锁则允许修改。

@Clive - 我希望在表单未“锁定”时进行用户交互。

@AaronMcIver：只读日期选择器是一个很好的日期可视化工具，对于日期范围更是如此。日期选择器拥有只读选项似乎比从头开始构建日期（范围）可视化工具要简单得多，尤其是如果您的项目可能在不同的地方同时使用这两者并希望它们匹配。

【参考方案1】：

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

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

【讨论】：

这对我来说似乎是一个非常优雅的解决方案。

@kozla13 - 您可以将其粘贴在脚本的开头以将其添加到每个日期选择器。 $.datepicker.setDefaults( beforeShow: function (i) if ($(i).attr('readonly')) return false; );

好多了。使用这种方法，您可以通过 js 删除只读属性，并且日期选择器再次开始显示。非常好。

这是一个比接受的答案恕我直言更好的解决方案。干得好

这是一个比其他解决方案更好的解决方案。

【参考方案2】：

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

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

【讨论】：

因为我已经初始化了我的日期选择器，所以我使用 setter 来按照你的建议进行操作。谢谢！

这对于简单的情况来说是一个很好的快速和简单的解决方法，但它并不是在所有情况下都是理想的。一方面，日期选择器在单击时仍会显示，这并不是什么大不了的事。更重要的是，您丢失了日期选择器的状态。如果您在实例化后设置日期选择器的属性，则在此处重新实例化时，它们的值将全部丢失。

【参考方案3】：

我的最终解决方案：

当我的应用加载时，我会这样初始化日期选择器：

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

谢谢大家！

【讨论】：

仅供参考 - 如何一次修改多个选项： $(".selector").datepicker("option", "minDate": -1, "maxDate": -2 );

你也可以使用$('.selector').datepicker("option", minDate:-1,maxDate:-2) 使其成为单线

【参考方案4】：

如果您想重新启用日期选择器并保持其设置不变，则所有列出的解决方案都会提供平庸的用户体验或导致问题。我使用了一种类似于将选择设为只读的方法，即禁用它但添加一个具有相同名称的隐藏字段。检查它：

用法：

$("#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】：

我用选择器解决了这个问题。我不会在只读输入上初始化日期时间选择器。

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

【讨论】：

最简单的

如果在初始化后将文本框设置为只读怎么办？

【参考方案6】：

如果您尝试禁用该字段（实际上并未禁用它），请尝试将onfocus 事件设置为this.blur();。这样，每当该字段获得焦点时，它就会自动失去焦点。

【参考方案7】：

抱歉，Eduardos 解决方案对我不起作用。 最后，我意识到禁用的日期选择器只是一个只读文本框。 所以你应该让它只读并销毁日期选择器。 字段将在提交时发送到服务器。

这里有一个通用的代码，它接受多个文本框并使它们只读。 它也会去掉日期选择器。

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

【参考方案8】：

onkeypress = > preventdefault ...

【讨论】：

这不起作用。点击输入框还是会弹出日历图片。

实际上它确实有效。我不得不通过设置器修改选项，而不是尝试重新初始化。

因为我只能选择一个答案对吧？由于我实际上没有使用您的代码，因此我没有选择此作为答案。我在上面使用了 Eduardo Molteni 的答案，所以我选择了他的答案。

【参考方案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 );
                
            
        ,

【讨论】：

也许你应该解释一下为什么这段代码很有用以及beforeShow的来源。

【参考方案12】：

通过禁用日期选择器输入来实现这一点，但如果你想提交表单数据，那就是个问题了。

所以经过大量的杂耍之后，这在我看来是一个完美的解决方案

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

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

【参考方案13】：

在初始化期间，您必须将选项 enableOnReadonly 设置为 false，默认情况下为 true。

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

然后，您需要将该字段设为只读

$('#datepicker').prop('readonly', true);

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

【参考方案14】：

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>