日期范围选择器仅显示年份和月份。

Question

我正在使用daterangepicker的bootstrap 3版本。

$('#pa_date*').daterangepicker({
                singleDatePicker: true,
                showDropdowns: true,
                minDate: min,
                maxDate: max,
                format: 'DD/MM/YYYY'
            }).on('apply.daterangepicker', function (ev, picker) {
                alert(picker.startDate.format('MM/YYYY'));
            });

它展示了完整的日期选择器：

我想隐藏日历，只显示年份和月份下拉菜单，像这样：

- D34DlyM4N

---

我建议 - https://dev59.com/4GPVa4cB1Zd3GeqP-vvW#32554467 - vsync

Answer 1

只需添加以下CSS代码...

$('input[name="daterange"]').daterangepicker({
  singleDatePicker: true,
  showDropdowns: true,
  minDate: '06/01/2013',
  maxDate: '06/30/2015',      
  format: 'DD/MM/YYYY'
}).on('hide.daterangepicker', function (ev, picker) {
  $('.table-condensed tbody tr:nth-child(2) td').click();
  alert(picker.startDate.format('MM/YYYY'));
});

.table-condensed thead tr:nth-child(2),
.table-condensed tbody {
  display: none
}

<script src="https://code.jquery.com/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script type="text/javascript" src="//cdn.jsdelivr.net/momentjs/2.9.0/moment.min.js"></script>
<script type="text/javascript" src="//cdn.jsdelivr.net/bootstrap.daterangepicker/1/daterangepicker.js"></script>
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/bootstrap.daterangepicker/1/daterangepicker-bs3.css" />

<input name="daterange" value="DD/MM/YYYY">

- rafaelcastrocouto

---

谢谢您的快速帮助，但是有一些问题。当我选择年份和月份时，日期范围不会改变，或者结果没有给我警告信息。http://jsfiddle.net/nwjmyb9c/ - D34DlyM4N

无法与目前的daterangepicker版本兼容。我目前正在尝试完成相同的事情，但他们似乎已经将事件监听器移动到<div class =“calendar”>，因此在单击<td>时不会触发任何操作。有什么想法吗？ - Daniel Lind

新版本似乎有点问题...一些按钮丢失了，我也无法触发任何事件。我的建议是：使用旧版本；D - rafaelcastrocouto

问题中没有Angular标签。您应该尝试使用组件样式来使CSS工作（https://angular.io/guide/component-styles）。 - rafaelcastrocouto

Answer 2

我对之前的答案进行了一些更改，它适用于更新版本，我在重要的在线说明中添加了一些注释。 jsfiddle.net/game5413/snc1Lowf/2/

var td = $(instance.container).find('.table-condensed tbody tr:nth-child(3) td:first-child');
    /*
     * the setTimeout have on purpose to delay calling trigger
     * event when choosing date on third row, if you not provide
     * the timeout, it will throw error maximum callstack
     */
    setTimeout(function() {
      /*
       * on the newer version to pick some date was changed into event
       * mousedown
       */
      td.trigger('mousedown');
      /*
       * this was optional, because in my case i need send date with
       * starting day with 1 to keep backend neat
       */
      instance.setStartDate(instance.startDate.date(1));
      instance.setEndDate(instance.endDate.date(1));
      alert("this is start " + instance.startDate.format("DD MMM YYYY"));
      alert("this is end " + instance.endDate.format("DD MMM YYYY"));
    }, 1);

您可以查看我提供的链接以获取详细信息。

- Mochamad Febryan Putra H