Question

我正在开发一个带有2个datepicker输入的项目。当用户从第一个datepicker输入中选择一个日期时，我试图获取第二个datepicker输入，以显示当弹出datepicker时第一个datepicker输入的月份。

例如，用户在输入1中选择日期，比如说2014年3月13日。当用户点击输入2时，默认情况下，datepicker将转到当前月份。我希望如此，当用户点击输入2时，datepicker显示在输入1中选择的月份。

有谁知道我怎么能做到这一点？

到目前为止，我已经尝试过这个：

//this does noting that I can tell
var defaultDate = $( "#date1" ).datepicker( "option", "defaultDate" );
$( "#date2" ).datepicker( "option", defaultDate );

//this actually takes the value of input 1 and inserts it into input 2
var date1 = $.datepicker.parseDate('mm/dd/yy', $('#date1').val());  
$("#date2").datepicker( "setDate" , date1 );

Answer 1

要设置option的值，您需要三个参数：

.datepicker("option", "[name of option]", newValue);

您可以将第二个日期选择器的defaultDate选项更改为第一个文本框的值：

$("#date2").datepicker( "option", "defaultDate", $('#date1').val() );

这是有效的，因为默认情况下默认dateFormat为mm / dd / yyyy。

这里有一个工作演示： Demo

然而，该演示有一个视觉缺陷;选择日期后，您可以看到第一个datepicker flash到其默认日期。为了解决这个视觉缺陷，您还可以将第一个datepicker的defaultDate设置为其新值：

$("#date2").datepicker( "option", "defaultDate", $('#date1').val() );
$("#date1").datepicker( "option", "defaultDate", $('#date1').val() );

更新的演示在这里： Demo

Answer 2

我会使用实际日期选择器对象给出的事件。然后，onSelect只需更改defaultDate。

我不得不出于某种原因从html中删除了datepicker自动初始化（role=date）。

$(function(){
    $('#date1').datepicker({
        onSelect: function(date) {
            $('#date2').datepicker('option', 'defaultDate', date);
        }
    });
});

http://jsfiddle.net/evilbuck/L10mrqnb/9/

Answer 3

首先，我必须删除fiddle中的data-role="date" HTML属性才能生效。

然后，您可以利用$.datepicker.onSelect在第一次更改时触发第二个日期选择器的日期更改。

$("#date2").datepicker();
$("#date1").datepicker({
  onSelect: function(date){
    $("#date2").datepicker('setDate', date);
  }  
});

请参阅jsfiddle上的实时演示。

Answer 4

您可以在 datepicker 功能本身中初始化＆＃39; defaultDate＆＃39; 选项，如下所示。

defaultDate 支持多种类型

日期：包含默认日期的日期对象。

数量：从今天开始的几天。例如，2代表从今天开始的两天，-1代表昨天。

字符串：由dateFormat选项定义的格式的字符串，或相对日期。相对日期必须包含价值和期间对;有效期是＆＃34; y＆＃34;多年来，＆＃34; m＆＃34;几个月了，＆＃34; w＆＃34;几周，＆＃34; d＆＃34;持续数天。例如，＆＃34; + 1m + 7d＆＃34;代表从今天起一个月零七天。

请参阅工作代码是JsFiddle https://jsfiddle.net/vibs2006/yg51nzj8/3/

$("#date1").datepicker();

  $("#date2").datepicker({

  defaultDate: "-20y"

});

var dateObject = new Date(2011, 0, 1, 0, 0, 0); //Please note that month starts from zero! (year, month, day, hour, minute, seconds)

  $("#date3").datepicker({

  defaultDate: dateObject

});

在jQuery datepicker上设置默认日期

4 个答案: