Question

我做了一个小伙伴，因为我不知道我是否会解释得很好：http://jsfiddle.net/jrrbg/

基本上我想在第一个输入框中选择一个日期，然后在第二个输入框中显示日期，但是提前一周输入日期。

<p>Match Date<br />
      <input name="seatt_expire" type="text" class="datepicker" id="seatt_expire" />
    </p>

<p>Opening Registration<br />
      <input name="seatt_start" type="text" class="datepicker" id="seatt_start" />
</p>

$(function() {

$( ".datepicker" ).datepicker({

dateFormat: "dd-mm-yy",
firstDay: 1,
altField: "#seatt_start"
});


$( "#seatt_start" ).datepicker( "setDate", -7 );

});

目前正在使用默认日期并提前7天进行设置，而不是使用第一个框中的日期。

Answer 1

以下是您可以执行的操作：fiddle

$("#seat-expire").datepicker({
    dateFormat: "dd-mm-yy",
    firstDay: 1,
    onSelect:function(text,obj){
        var dateObject = $(this).datepicker("getDate");
        dateObject.setDate(obj.currentDay-7);
        $("#seat-start").datepicker("setDate",dateObject);
    }
});

如果需要，只能反向应用#seat-start：

$("#seat-start").datepicker({
        dateFormat: "dd-mm-yy",
        firstDay: 1,
        // display expire date
        onSelect:function(text,obj){
            var dateObject = $(this).datepicker("getDate");
            dateObject.setDate(obj.currentDay+7);
            $("#seat-expire").datepicker("setDate",dateObject);
        }
    });

Answer 2

您的方法存在的问题是，$( "#seatt_start" ).datepicker( "setDate", -7 );将日期设置为7天减去今天，而不是上一个日期，当seatt_expire的日期发生变化时，它也不会触发任何内容，您应该使用onSelect事件。

尝试这样的事情：

jQuery(function () {
    $("#seatt_start").datepicker({dateFormat: "dd-mm-yy"});
    $("#seatt_expire").datepicker({
        dateFormat: "dd-mm-yy",
        firstDay: 1,
        onSelect: function (prev_date) {
            prev = prev_date.split("-");
            var date = new Date(prev[2], prev[1] - 1, prev[0]);
            var d = date.getDate();
            var m = date.getMonth();
            var y = date.getFullYear();
            var new_date = new Date(y, m, d - 7);
            $("#seatt_start").removeAttr("disabled").datepicker("setDate", new_date);
        }
    });
});

此处，seatt_expire的日期被减去，然后解析为减去您想要的7天，seatt_start的日期将每次都改变，同时我将两个datepicker声明分开以避免要应用于这两个字段的相同onSelect事件...

JSFiddle Demo

jquery datepicker ui操作顺序

2 个答案: