将 jQuery datepicker 分配给 div 元素并获取值答案

【问题标题】：Assign jQuery datepicker to div element and get the value将 jQuery datepicker 分配给 div 元素并获取值
【发布时间】：2017-11-16 09:36:07
【问题描述】：

我想在用户单击某些文本时使用 jQuery 显示日期选择器，并且在用户在 datepicker 上选择日期后，我可以从日期选择器中获取值作为 javascript 变量。我的代码是这样的：

<div id="datepicker-container" style="display: none;">
    <div id="select-delivery-date-input"> </div>
</div>
<a id="show-datepicker">Select Delivery Date</a>
<script>
  $("#show-datepicker").click(function(){
      $("#datepicker-container").show();
  });
  $('#select-delivery-date-input').datepicker({ 
      dateFormat:'yy-m-d',
      minDate: new Date(),
  });
</script>

问题是当日期选择器弹出时，当我尝试在日期选择器弹出窗口中选择日期时，它不会关闭日期选择器弹出窗口。

Fiddle example

【问题讨论】：

你能提供一个jsfiddle吗？
@Mazz 查看我的更新答案

标签： javascript jquery html datepicker jquery-ui-datepicker

【解决方案1】：

您可以使用 datepicker 的 onSelect 选项：

选择日期选择器时调用。该函数将选定的日期作为文本接收，将 datepicker 实例作为参数接收。

然后你可以使用jQuery hide()。

这是一个现场样本：

$(document).ready(function() {
  $("#show-datepicker").click(function(){ 
    $("#datepicker-container").show();
  });
  $('#select-delivery-date-input').datepicker({ 
    dateFormat:'yy-m-d',
    minDate: new Date(),
    onSelect: function(selectedDate){
      console.log(selectedDate);
      $("#datepicker-container").hide();
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.js"></script>
<link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css" rel="stylesheet"/>

<div id="datepicker-container" style="display: none;">
  <div id="select-delivery-date-input"> </div>
</div>
<a id="show-datepicker">Select Delivery Date</a>

【讨论】：

【解决方案2】：

请在下面找到修改后的代码：

$(document).ready(function() {
var selectedDate;

  $("#show-datepicker").click(function(){ 
      $("#datepicker-container").show();
  });
  $('#select-delivery-date-input').datepicker({ 
      dateFormat:'yy-m-d',
      minDate: new Date(),
      onSelect: function(date){
      selectedDate = date;
      alert(selectedDate);//selected date is assigned to date1, you can use date1 anywhere
      $("#datepicker-container").hide();
    }
     }
   );
});

【讨论】：