时间戳

首页 > 解决方案 > 如何使用引导程序从 datepicker 获取日期并在另一个 div 中显示日期

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

问题描述

我正在尝试从按钮获取日期并将其显示在另一个 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;
     
    });
});

标签： javascripthtmljquerycssbootstrap-4

解决方案

您的代码存在多个问题，首先一个按钮无法触发更改事件，它必须是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>

推荐阅读