在 jQuery datepicker 上设置默认日期答案

【问题标题】：Setting default date on jQuery datepicker在 jQuery datepicker 上设置默认日期
【发布时间】：2014-11-13 17:30:56
【问题描述】：

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

例如，用户在输入 1 中选择一个日期，比如 2014 年 3 月 13 日。当用户单击输入 2 时，默认情况下日期选择器会转到当前月份。我希望这样当用户点击输入 2 时，日期选择器会显示在输入 1 中选择的月份。

有谁知道我如何做到这一点？

my JSFiddle DEMO

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

//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 );

【问题讨论】：

标签： jquery jquery-ui date datepicker jquery-ui-datepicker

【解决方案1】：

为了设置option的值，你需要三个参数：

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

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

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

这是因为默认 dateFormat 默认为 mm/dd/yyyy。

这里有一个工作演示：Demo

但是，该演示存在视觉缺陷；选择日期后，您可以看到第一个日期选择器闪烁到其默认日期。为了修复这个视觉缺陷，您还可以将第一个日期选择器的 defaultDate 设置为其新值：

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

更新的演示在这里：Demo

【讨论】：

【解决方案2】：

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

由于某种原因，我不得不从 html 中删除 datepicker 自动初始化 (role=date)。

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

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

【讨论】：

【解决方案3】：

首先，我必须删除fiddle 中的data-role="date" HTML 属性才能正常工作。

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

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

请参阅jsfiddle 上的现场演示。

【讨论】：

【解决方案4】：

您可以在 datepicker 函数本身中初始化 'defaultDate' 选项，如下所示。

defaultDate支持多种类型

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

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

字符串： 格式由 dateFormat 选项定义的字符串，或相对日期。相对日期必须包含值和周期对；有效期间是“y”代表年，“m”代表月，“w”代表周，“d”代表天。例如，“+1m +7d”表示从今天起 1 个月零 7 天。

查看工作代码是 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

});

【讨论】：