JQuery DatePicker 只读
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7812063/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
JQuery DatePicker ReadOnly
提问by Bob
When I make my datepicker read-only, I see that the user cannot type anything into the text box.
当我将日期选择器设为只读时，我发现用户无法在文本框中输入任何内容。
$("#datepicker").attr('readonly', 'readonly');
However, they can still change the value using the calendar. How can I hide the calendar so that users cannot change the date value?
但是，他们仍然可以使用日历更改值。如何隐藏日历以便用户无法更改日期值？
I do not want to disable the datepicker since I need the value posted to the server upon form submit.
我不想禁用日期选择器，因为我需要在表单提交时将值发布到服务器。
("#datepicker").datepicker('disable');
("#datepicker").datepicker('disable');
回答by Code Commander
I set the following beforeShow event handler (in the options parameter) to achieve this functionality.
我设置了以下 beforeShow 事件处理程序（在 options 参数中）来实现此功能。
beforeShow: function(i) { if ($(i).attr('readonly')) { return false; } }
回答by Eduardo Molteni
You can set the range allowed to some invalid range so the user can't select any date:
您可以将允许的范围设置为某个无效范围，以便用户无法选择任何日期：
$("#datepicker").datepicker({minDate:-1,maxDate:-2}).attr('readonly','readonly');
回答by Bob
My final solution:
我的最终解决方案：
When my app loads I initialize the datepicker as such:
当我的应用程序加载时，我将日期选择器初始化为：
$('.selector').datepicker({ dateFormat: "mm/dd/yy" });
I then have a global toggle button that enables/disables the datepicker. To disable I do the following:
然后我有一个启用/禁用日期选择器的全局切换按钮。要禁用我执行以下操作：
$('.selector').datepicker("option", "minDate", -1);
$('.selector').datepicker("option", "maxDate", -2);
To enable I do the following:
要启用我执行以下操作：
$('.selector').datepicker("option", "minDate", null);
$('.selector').datepicker("option", "maxDate", null);
Thanks everyone!
谢谢大家！
回答by Josh Noe
All of the listed solutions give a mediocre user experience or cause issues if you want to re-enable the datepicker with it's settings in-tact. I used a method similar to making a select read-only, which is to disable it but add a hidden field with the same name. Check it:
如果您想重新启用日期选择器并使其设置完好无损，则所有列出的解决方案都会提供平庸的用户体验或导致问题。我使用了一种类似于使select只读的方法，即禁用它但添加一个具有相同名称的隐藏字段。核实：
Usage:
用法：
$("#datepicker").readonlyDatepicker(true); //makes the datepicker readonly
$("#datepicker").readonlyDatepicker(false); //makes the datepicker editable again
jQuery function:
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);
}
});
};
回答by Crontab
If you're trying to disable the field (without actually disabling it), try setting the onfocusevent to this.blur();. This way, whenever the field gets focus, it automatically loses it.
如果您尝试禁用该字段（但实际上并未禁用它），请尝试将onfocus事件设置为this.blur();。这样，每当该字段获得焦点时，它就会自动失去它。
回答by gtu
I solved this with selector. I do not initialize the datetime picker on inputs which are readonly.
我用选择器解决了这个问题。我不会在只读输入上初始化日期时间选择器。
$('[type=datetime]:not([readonly])').datetimepicker();
回答by OzrenTkalcecKrznaric
Sorry, but Eduardos solution did not work for me. At the end, I realized that disabled datepicker is just a read-only textbox. So you should make it read only and destroy the datepicker. Field will be sent to server upon submit.
抱歉，Eduardos 解决方案对我不起作用。最后，我意识到禁用的日期选择器只是一个只读文本框。所以你应该让它只读并销毁日期选择器。字段将在提交时发送到服务器。
Here is a bit generalized code that takes multiple textboxes and makes them read only. It will strip off the datepickers as well.
这是一些通用代码，它采用多个文本框并使它们只读。它也会剥离日期选择器。
fields.attr("readonly", "readonly");
fields.each(function(idx, fld) {
if($(fld).hasClass('hasDatepicker'))
{
$(fld).datepicker("destroy");
}
});
回答by Royi Namir
onkeypress = > preventdefault ...
onkeypress = > preventdefault ...
回答by BBQ Singular
I came up with another solution that is different than what had been proposed. When the date picker is used, it creates a div similar to a pop-up that is positioned when the input field is clicked on. To remove it, I just set the visibility property of the CSS so that it doesn't show up.
我想出了另一个与提议不同的解决方案。使用日期选择器时，它会创建一个类似于单击输入字段时定位的弹出窗口的 div。要删除它，我只需设置 CSS 的可见性属性，使其不显示。
if ($('.yourDatepickerSelector').prop('readonly')) {
$('#ui-datepicker-div').css({ 'visibility': 'hidden' })
} else { $('#ui-datepicker-div').css({ 'visibility': 'visible' }) }
This also seems to post correctly to the server, and should not effect any of the settings associated with it.
这似乎也正确发布到服务器，并且不应影响与其相关的任何设置。
回答by Bhimbim
<sj:datepicker id="datepickerid" name="datepickername" displayFormat="%{formatDateJsp}" readonly="true"/>
Works for me.
为我工作。
