为何jQuery UI DatePicker日历无法获取已赋值的日期？

嗨，我帮你分析下问题所在，再给你几个可行的解决办法：

你现在的问题在于，直接用$('#datepicker').val()给输入框赋值，只是修改了输入框的文本内容，但jQuery UI的DatePicker组件本身有自己维护的日期状态，它并不会自动读取输入框的初始值——尤其是你还先赋值、再初始化DatePicker，这时候组件初始化时会默认用当前日期，完全忽略你提前设置的输入框值。

方法一：先初始化DatePicker，再用API设置日期（推荐） #

这是最稳妥的方式，直接调用DatePicker的官方API来设置日期，组件内部状态和输入框会自动同步：

$( function() {
  // 第一步：先初始化DatePicker组件
  $( "#datepicker" ).datepicker({
    numberOfMonths: 2,
    dateFormat: "mm-dd-yy", // 这里指定和你要设置的日期格式一致，默认就是mm-dd-yy可以不用写
    onSelect: function(selected) {
      $("#txtFromDate").datepicker("option","maxDate", selected)
    }
  });
  // 第二步：用setDate方法设置目标日期
  $("#datepicker").datepicker("setDate", "06-10-2018");
});

方法二：先设置输入框值，初始化后强制同步 #

如果因为某些场景必须先给输入框赋值，那初始化后要手动把输入框的值同步到DatePicker的状态里，一定要保证日期格式和组件的dateFormat匹配：

// 先给输入框赋值，注意格式要和后面DatePicker的dateFormat一致
$('#datepicker').val("06-10-2018");

$( function() {
  $( "#datepicker" ).datepicker({
    numberOfMonths: 2,
    dateFormat: "mm-dd-yy", // 必须和输入框的日期格式对应
    onSelect: function(selected) {
      $("#txtFromDate").datepicker("option","maxDate", selected)
    }
  });
  // 把输入框的日期同步到DatePicker组件
  const targetDate = $("#datepicker").val();
  $("#datepicker").datepicker("setDate", targetDate);
});

额外注意点 #

你代码里重复引入了两个版本的jQuery（2.1.1和1.12.4），这很容易导致组件冲突，建议只保留一个版本（推荐保留1.12.4，因为它和jQuery UI 1.12.1版本匹配）。

内容的提问来源于stack exchange，提问作者vikas kumar