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

Question

嗨..

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

目前，我必须点击 Filter 按钮来运行此过滤器表单。您是否知道如何在我单击/选择年份后直接运行此表单以便我可以删除 Filter 按钮？

这个我试过了，还是不行，

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

你能帮帮我吗？

Answer 1

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

事件处理程序将被传递一个具有以下属性的对象

• date：相关的 Date 对象，在本地时区。对于多日期选择器，这将是选择的最新日期。

• dates：使用多日期选择器时，在本地时区中的 Date 对象数组。

• format([ix], [format])：使格式化日期更容易的函数。 ix 可以是要格式化的日期数组中日期的索引；如果不存在，将使用最后选择的日期。 format 可以是 datepicker 支持的任何格式字符串；如果不存在，将使用日期选择器上设置的格式。这两个参数都是可选的。

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

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

Answer 2

您应该做的是收听changeDate 事件，当您选择日期时会触发该事件（如果是一年则无关紧要）该事件应该是使用的事件，就好像您的要求更改为如果是年和月，那么changeYear 事件将不起作用。

当 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>