如何在 div 中包含 jQuery datepicker？

Question

更新：我尝试了下面的建议，但没有用。 我想将日历包含在带有深灰色边框（class =“profileEdit”）的白色 div 中，并且只能通过滚动查看其溢出。现在，它正在蔓延到 profileEdit 的父 divs.

已选择 HTML

<div class="profileEdit">

            <div class="profilePic">
            </div>
            <input type="text" class="form-control" id="usernameEdit" placeholder="Damon">

            <form class="habitForm">
                <h2>MY EXERCISE HABIT</h2>
                <div class="habitFormGroup">
                    <div class="custom-select">
                        <select>
                            <option value="0">Before</option>
                            <option value="1">After</option>
                            <option value="2">During</option>
                            <option value="3">Every time</option>
                            <option value="4">When</option>
                        </select>
                    </div>
                    <input type="text" class="form-control" id="triggerEdit" placeholder="breakfast">
                    <p class="punctuation">,</p>
                </div>
                <p class="helperText">trigger</p>
                <div class="habitFormGroup lockedLesson">
                    <p>I will</p>
                    <div class="exerciseEdit"></div>
                    <p class="punctuation">.</p>
                </div>
                <p class="helperText lockedLesson" id="exerciseHelper">exercise</p>
                <div class="habitFormGroup lockedLesson">
                    <div class="exerciseEdit"></div>
                    <p>is my reward.</p>

                </div>
                <p class="helperText lockedLesson">reward</p>
            </form>
            <div class="reminderSwitch">
                <p>Remind me to perform habit</p>
                <label class="switch">
                    <input type="checkbox">
                    <span class="slider round"></span>
                </label>
            </div>
            <div>
                <form class="reminderControls">
                    <label for="startDate">Start:</label>
                    <!-- CALENDAR -->
                    <div class="dateParent">
                        <input type="text" id="datepicker" value="">
                    </div>
                </form>
            </div>
            <a href='menu.html'><button id="saveButton">Save</button></a>
        </div>

日期选择器JQUERY

$(function () {
$("#datepicker").datepicker();
});

日期选择器CSS

.profileEdit {
text-align: center;
padding: 1.5rem;
margin: 3rem 1.5rem;
border: grey solid;
border-radius: 3px;
overflow-y: scroll;
position: relative;
}

#ui-datepicker-div {
position: absolute;
width: 280px;
font-family: frutigerLight;
}

.ui-widget-header.ui-widget-header {
background: none;
background-color: white;
border: none;
}

更新：解决方案有效，但弄乱了间距：“开始”之间的 space 也会打开和关闭。

Answer 1

尝试从日历元素中删除高度属性。如果它不起作用，请检查此 jQuery UI inline Datepicker auto-resize to parent container

Answer 2

作为一名 UX 设计师，我认为您想要使包含 DIV 更大（个人认为像日历这样的弹出窗口不应该延伸到它的容器之外）或者可能改变方向日历控件相对于鼠标位置打开。如果您的触发器控件位于其容器的底部，则日历会向上弹出而不是向下弹出。

Answer 3

您可以使用内联日期选择器并通过 JavaScript 控制其可见性：

$(function() {
    $('.dateParent').datepicker({ inline: true, altField: '#datepicker' });
  $('#datepicker').focus(function(event) {
    event.preventDefault();
    $('.ui-datepicker').addClass('shown');
    return false;
  });
  $(document).click(function(event) {
    if(!$(event.target).is('.dateParent *'))
      $('.ui-datepicker').removeClass('shown');;
  });
});

.profileEdit {
  text-align: center;
  padding: 1.5rem;
  margin: 3rem 1.5rem;
  border: grey solid;
  border-radius: 3px;
  position: relative;
}

.ui-datepicker {
  visibility: hidden;
  height: 0;
  margin: 1rem auto;
}
.ui-datepicker.shown {
  visibility: visible;
  height: initial;
}

.ui-widget-header.ui-widget-header {
  background: none;
  background-color: white;
  border: none;
}

<script src="https://code.jquery.com/jquery-3.6.0.js" type="text/javascript"></script>
<script src="https://code.jquery.com/ui/1.13.1/jquery-ui.js" type="text/javascript"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.13.1/themes/base/jquery-ui.css" type="text/css">


<div class="profileEdit">

  <div class="profilePic">
  </div>
  <input type="text" class="form-control" id="usernameEdit" placeholder="Damon">

  <form class="habitForm">
    <h2>MY EXERCISE HABIT</h2>
    <div class="habitFormGroup">
      <div class="custom-select">
        <select>
          <option value="0">Before</option>
          <option value="1">After</option>
          <option value="2">During</option>
          <option value="3">Every time</option>
          <option value="4">When</option>
        </select>
      </div>
      <input type="text" class="form-control" id="triggerEdit" placeholder="breakfast">
      <p class="punctuation">,</p>
    </div>
    <p class="helperText">trigger</p>
    <div class="habitFormGroup lockedLesson">
      <p>I will</p>
      <div class="exerciseEdit"></div>
      <p class="punctuation">.</p>
    </div>
    <p class="helperText lockedLesson" id="exerciseHelper">exercise</p>
    <div class="habitFormGroup lockedLesson">
      <div class="exerciseEdit"></div>
      <p>is my reward.</p>

    </div>
    <p class="helperText lockedLesson">reward</p>
  </form>
  <div class="reminderSwitch">
    <p>Remind me to perform habit</p>
    <label class="switch">
      <input type="checkbox">
      <span class="slider round"></span>
    </label>
  </div>
  <div>
    <form class="reminderControls">
      <label for="startDate">Start:</label>
      <!-- CALENDAR -->
      <div class="dateParent">
        <input type="text" id="datepicker" value="">
      </div>
    </form>
  </div>
  <a href='menu.html'><button id="saveButton">Save</button></a>
</div>

如何在 div 中包含 jQuery datepicker？

How to contain jQuery datepicker within div?

html

javascript

css

jquery

jquery-ui-datepicker