如何让Bootstrap-DatePicker中的弹出式日历像按钮一样工作？

Question

嗨..

如上图所示，有一个弹出式日期选择器和一个名为 Filter 的蓝色按钮。

目前，我必须单击 Filter 按钮才能运行此过滤器表单。您是否知道如何在我 click/choose 之后直接运行此表单，以便我可以删除 Filter 按钮？

我试过了，但是没用，

$('.date-own').datepicker({
         minViewMode: 2,
         format: 'yyyy',
                 autoclose: true
       })
             .on(changeYear, function() {
             window.location.replace("http://whosebug.com");
         });

你能帮帮我吗？

Answer 1

根据 : http://bootstrap-datepicker.readthedocs.io/en/latest/events.html#changedate

The event handler will be passed an object with the properties below

date：当地时区的相关日期对象。对于多日期选择器，这将是最近选择的日期。
dates：使用多日期选择器时，本地时区的日期对象数组。
format([ix], [format])：一个使格式化日期更容易的函数。 ix 可以是要格式化的日期数组中日期的索引；如果不存在，将使用最后选择的日期。 format 可以是日期选择器支持的任何格式字符串；如果不存在，将使用日期选择器上设置的格式。两个参数都是可选的。

因此，您的代码应该如下所示。请注意绑定上的事件名称用双引号引起来。

$(window).ready(function() {
  $('.date-own').datepicker({
     minViewMode: 2,
     format: 'yyyy',
     autoclose: true
   }).on("changeYear", function(e) {
      window.location.replace("http://whosebug.com/somePage.php?d="+e.date.getFullYear());
   });
});

Answer 2

你应该做的是听 changeDate event, that is fired when you select a date (It doesn't matter if is a year) this event should be the one using as if in case your requirement changed to be year and month then changeYear 事件是行不通的。

Fired when the view year is changed from decade view.

$('.date-own').datepicker({
    minViewMode: 2,
    format: 'yyyy',
    autoclose: true
  })
  .on("changeDate", function(e) {
    let year = e.date.getFullYear();
    //window.location.replace("http://localhost/analytics/tables.php?year=" + year);
    console.log('window.location.replace("http://localhost/analytics/tables.php?year=' + year);
  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.7.1/css/bootstrap-datepicker.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.7.1/js/bootstrap-datepicker.min.js"></script>
<div class="input-group date date-own" data-provide="datepicker">
  <input type="text" class="form-control">
  <div class="input-group-addon">
    <span class="glyphicon glyphicon-th"></span>
  </div>
</div>

如何让Bootstrap-DatePicker中的弹出式日历像按钮一样工作？

How to make the pop-up calendar in Bootstrap-DatePicker works like button?

javascript

php

datepicker

bootstrap-datepicker