D34DlyM4N D34DlyM4N - 5 months ago 41
Javascript Question

daterangepicker show year and months only

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

Answer

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