Question

我有以下HTML：

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

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

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

如何实现？

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

编辑

似乎日期选择器确实不喜欢使用隐藏的输入，而是在第二次单击时中断。

另一种方法是用visibility:hidden隐藏它（即使display:none也无效）

更新后的答案包含此修复程序

如何在单击<button>时显示jQuery UI datepicker，并将</button> <button>文本替换为选定的日期？

1 个答案: