如何使用引导程序从 datepicker 获取日期并在另一个 div 中显示日期答案

【问题标题】：How to get date from datepicker with bootstrap and show the date in another div如何使用引导程序从 datepicker 获取日期并在另一个 div 中显示日期
【发布时间】：2021-11-06 16:49:26
【问题描述】：

我正在尝试从按钮获取日期并将其显示在另一个 div 中。我尝试使用输入标记方法但它不起作用。所以我尝试使用带有图标的按钮选项，我的问题是我如何可以获取日期并在其他地方显示。

<button type="button" class="btn btn-icon btn-primary w-full" id="date" data-plugin="datepicker">
<i class="icon wb-calendar" aria-hidden="true">
</i></button>
<div id="show-date"></div>

这是我的 js

$(function() {

  var showdate = document.getElementById( 'show-date' );
    $("#date").datepicker();
    $("#date").on("change",function(){
        var selected = $(this).val();
        showdate.selected.show;
     
    });
});

【问题讨论】：

如果您使用var showdate = $("#show-date") 将您的showdate 转换为jquery，那么您可以使用showdate.text(selected)
@CarstenLøvboAndersen 那么我该如何更改这里的代码？你能解释一下吗？
我已经在上面的评论中给了你代码，但是你可以看到我的回答还有代码的工作示例。

标签： javascript html jquery css bootstrap-4

【解决方案1】：

您的代码有多个问题，首先一个按钮无法触发更改事件，它必须是changeDate。

其次，要获取您需要使用ev.date 的日期，因为按钮值不会在changeDate 事件中更新。

$(function() {

  var showdate = $("#show-date")
  $("#date").datepicker().on('changeDate', function(ev) {
    var selected = ev.date
    showdate.text(selected)
  });
});

演示

$(function() {

  var showdate = $("#show-date")
  $("#date").datepicker().on('changeDate', function(ev) {
    var date = new Date(ev.date);
    var selected = ((date.getMonth() > 8) ? (date.getMonth() + 1) : ('0' + (date.getMonth() + 1))) + '/' + ((date.getDate() > 9) ? date.getDate() : ('0' + date.getDate())) + '/' + date.getFullYear()
    showdate.text(selected)
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/css/bootstrap-datepicker.min.css" integrity="sha512-mSYUmp1HYZDFaVKK//63EcZq4iFWFjxSL+Z3T/aCt4IO9Cejm03q3NKKYN6pFQzY0SBOr8h+eCIAZHPXcpZaNw==" crossorigin="anonymous"
  referrerpolicy="no-referrer" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/js/bootstrap-datepicker.min.js" integrity="sha512-T/tUfKSV1bihCnd+MxKD0Hm1uBBroVYBOYSk1knyvQ9VyZJpc/ALb4P0r6ubwVPSGB2GvjeoMAJJImBG12TiaQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<button type="button" class="btn btn-icon btn-primary w-full" id="date" data-plugin="datepicker">
<i class="icon wb-calendar" aria-hidden="true">
</i></button>
<div id="show-date"></div>

【讨论】：

@sleepy_coder 更新了演示，你可以玩转格式。