JQuery DatePicker ReadOnly

Question

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

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

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

我不想禁用datepicker,因为我需要在表单提交时发布到服务器的值.

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

Answer 1

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

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

Answer 2

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

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

Answer 3

我的最终解决方案

当我的应用加载时,我会初始化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); 

感谢大家!

Answer 4

如果您想完整启用日期选择器，请使用列出的所有解决方案，以提供中等水平的用户体验或引起问题。我使用了一种类似于将select设置为只读的方法，即禁用了它，但是添加了一个具有相同名称的隐藏字段。检查：

用法：

$("#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);
        }
    });
};

Answer 5

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

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