如果超出范围，防止 jQuery UI datepicker 更改文本字段的值

Posted 2023-05-07

【中文标题】如果超出范围，防止 jQuery UI datepicker 更改文本字段的值

【英文标题】：Prevent jQuery UI datepicker from changing the value of a text field if out of range

【发布时间】：2013-05-14 16:58:56

【问题描述】：

我有一个文本字段（在表单中）设置为在焦点上显示 jQuery UI 日期选择器。

使用 php（在更新屏幕中），我根据先前最终用户对此特定记录的输入，使用日期字符串填充此文本字段的值（当页面加载时）。

我的问题是我使用 minDate 和 maxDate 选项设置我的日期选择器，这些限制篡改了我的文本字段中显示的原始值。

如果文本字段字符串小于最小值，则将文本字段设置为 minDate 的值。

我需要原始值保持不变，即使它超出日历范围（minDate 或 maxDate 值），除非用户从日历中完成更改。

例子：

minDate: 01-04-2013 (dd-mm-yy)
maxDate: 30-04-2013 (dd-mm-yy)
Original text field value: 16-03-2013 (dd-mm-yy)
Displayed text field value: 01-04-2013 (dd-mm-yy)

这个想法是 minDate 和 maxDate 选项限制最终用户在从当前日期开始的某个定义的时间段内输入/修改数据。

我正在使用 jQuery UI Datepicker 1.8.16 和 jQuery javascript 库 v1.6.2。浏览器：Internet Explorer 7 及更高版本、Firefox

【问题讨论】：

你有想过这个吗？我也有同样的问题。

我最好的选择（根据我阅读的一些帖子）是有些人将函数绑定到“beforeShowDay”选项以启用某些日期（articles.tutorboy.com/2010/09/03/…）。如果日历中的日期与原始日期匹配或位于日期范围之间，我尝试返回 true，否则返回 false。从来没有为我工作过。

【参考方案1】：

这是实现它的一种方法。

$(document).ready(function()

    var DateLimits = min:null, max:null;

    DateLimits.min = new Date(Date.parse("01-01-2014"));
    DateLimits.max = new Date(Date.parse("12-31-2014"));

    $( "#datepicker" ).datepicker(
    
        dateFormat: "mm-dd-yy",
        minDate: DateLimits.min,
        maxDate: DateLimits.max
    );
);

这里是小提琴：http://jsfiddle.net/DEfQL/1/

灵感来自：How can I set the minDate/maxDate for jQueryUI Datepicker using a string?

【参考方案2】：

您可以修改“beforeShow”中的选项并在“onClose”中重置它们。像这样：

$('#datepicker').datepicker('option', 'beforeShow', function (date) 
    return 
        'minDate': '+0D',
        'maxDate': '+1Y'
    ;
);
$('#datepicker').datepicker('option', 'onClose', function (date) 
    $('#datepicker').datepicker('option', 
        'minDate': null,
        'maxDate': null
    );
);

虽然我不太喜欢我的方法，但我还没有找到任何其他可行的解决方案来解决这个问题。防止 jQuery Datepicker 修改原始值的简单选项会很好。