daterangepicker show year and months only

Question

I'm using 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'));
            });

It shows me the full daterangepicker:

enter image description here

I want to hide the calendar and show only years and months drop-down, like this:

enter image description here

I suggest - http://stackoverflow.com/a/32554467/104380 – vsync Sep 13 '15 at 21:00 — vsync, Sep 13 '15 at 21:00

rafaelcastrocouto · Accepted Answer · 2015-06-03T12:38:33.237

8

Just add the following 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">

edited Jun 03 '15 at 12:38

answered Jun 03 '15 at 12:10

rafaelcastrocouto

10,518
1
34
58

thnaks for quick help but there is some problem it's when i select year and month the daterange don't change or the result don't give me alert message http://jsfiddle.net/nwjmyb9c/ – D34DlyM4N Jun 03 '15 at 12:18
Won´t work with the current version of daterangepicker. I´m currently trying to accomplish the same thing but they seem to have moved the event listener to the
so nothing fires on clicking the . Any ideas?
– Daniel Lind Mar 02 '17 at 10:36
new version seems kinda bugged ... some buttons missing and I could not make it trigger any kind of event. My tip: use the old version ;D – rafaelcastrocouto Mar 02 '17 at 22:23
There's no angular tag in the question. You should try component-styles to make the css work (https://angular.io/guide/component-styles) – rafaelcastrocouto Jul 02 '20 at 00:52

score 2 · Answer 2 · answered Oct 11 '20 at 17:31

i'm making some change from previous answer and it work on newer version, i adding some notes to on line that important.

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

you can look for detail on the link i provided

daterangepicker show year and months only

2 Answers2

Linked