jquery - 如何在点击时显示 jQuery UI datepicker并更换带有选定日期的文本？

Question

我有以下 HTML：

<button type="button" id="btndate">Date</button>

我想在单击上面的按钮时显示 jQuery UI 日期选择器，并将文本“日期”替换为日历中的选定日期。我在 HTML 中没有任何文本框，只有<button>.

$(document).ready(function(){
    $("#btndate").click(function(){
        // Required code...
    });
});

如何实现？

标签： jquery

Answer 1

为此，您可以使用 jQueryUI datepicker 期望的输入字段，但只需将其隐藏即可。然后，您可以在日期更改时将所选日期复制到您的按钮。

以下是您将如何执行此操作的示例：

$(document).ready(function() {
  $('.date').datepicker({
    onSelect: function() {
      $("#btndate").html($(this).val())
    }
  });
  $("#btndate").click(function() {
    $(".date").datepicker("show");
  });
});

.date{
  visibility:hidden
}

<script src="https://code.jquery.com/jquery-1.9.1.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<button type="button" id="btndate">Date</button>
<input class="date" type="text" />

编辑

似乎 datepicker 真的不喜欢使用隐藏的输入，它会在第二次点击时中断。

另一种方法是隐藏它visibility:hidden（甚至display:none不起作用）

更新的答案包括此修复