如何将 jquery-ui DATEPICKER 插入特定的 div答案

【问题标题】：How to insert a jquery-ui DATEPICKER into a specifec div如何将 jquery-ui DATEPICKER 插入特定的 div
【发布时间】：2019-08-16 21:12:25
【问题描述】：

我正在使用 Jquery-UI Datepicker "https://jqueryui.com/datepicker/" "我在两个输入上使用它"，当我点击一个输入并从日历中选择日期时，我想对输入，但我不能，因为日期选择器是在 html 代码的底部创建的。所以我想如果我可以在具有输入的 div 中创建它，我将能够控制它的兄弟姐妹。所以我的问题是“我如何在有输入的潜水中创建它？”


<div class="formss">
  <div class="first-input">
   <input class="input1" id="datepicker1" type="text">
   <span>place holder</span>
  </div>

 <div class="sec-input">
   <input class="input2" id="datepicker2" type="text">
   <span>place holder</span>
  </div>

</div>

【问题讨论】：

您需要使用onSelect 回调来影响其他元素。您的示例没有说明您想要完成什么或您想要对兄弟姐妹做什么。请更新您的帖子。
在回调内部，$(this) 是当前的 datepicker 元素，然后你可以使用 jQuery DOM 导航功能找到兄弟。
如何使用 onSelect @Twisty
@IbrahimYousry 当有人选择日期时，您希望脚本做什么？

标签： javascript jquery html css jquery-ui

【解决方案1】：

JQuery UI Datepicker 在底部呈现日历。您不必担心，因为 UI Datepicker 提供了自定义输入的所有选项。您有可用的日历实例。下面是一个示例，它使单击的日期选择器字段的标签在选择日期时改变颜色。

$(document).ready(function() {
  $("#datepicker1").datepicker({
    numberOfMonths: 1,
    showButtonPanel: true,
    dateFormat: "yy-mm-dd",
    onSelect: function(date, inst) {
      setTimeout(function() {
       inst.input.siblings().css('color', 'red');
      }, 50);
    }
  });
});

这里inst,input 指向标记为日期选择器字段的输入字段。希望对您有所帮助。

【讨论】：