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

Question

I'm using Jquery-UI Datepicker " https://jqueryui.com/datepicker/ " "I'm using it on two inputs" and when I click on an input and choose the date from the calender I want to make an effict on a sibling of the input, but I couldnt because the datepicker is created at the bottom of the html code. So I figured that if I could make it be created in the div that has the input I'll be able to control it's siblings. So my question is "How I make it be created inside the dive that has the input?"

<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>

Answer 1

JQuery UI Datepicker renders the calendar at the bottom. You don't have to worry about it because UI Datepicker provides every option to customize your input. You have calendar instance available. Below is an example, that makes the label of the clicked datepicker field to change color on selecting a date.

$(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);
    }
  });
});

Here inst,input points to the input field which is marked as datepicker field. Hope this helps you.