如果超出范围,则阻止jQuery UI datepicker更改文本字段的值

时间:2013-05-20 07:11:12

标签: jquery-ui datepicker

我有一个文本字段(在表单中)设置为在焦点上显示jQuery UI datepicker。

使用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

2 个答案:

答案 0 :(得分: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?

答案 1 :(得分:0)

您可以修改' 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修改orignial值,这很好。