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

Question

您好..

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

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

我试过这个，但它没有用，

$('.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对象数组。

• 格式（[ix]，[格式]）：一种使格式化日期更容易的功能。 ix可以是要格式化的日期数组中的Date的索引;如果没有，将使用选定的最后日期。 format可以是datepicker支持的任何格式字符串;如果不存在，将使用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事件将无效。

  

从十年视图更改视图年时触发。

＆＃13;

＆＃13;

$('.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);
  });

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;