Bootstrap DateTimePicker (scroll through years)

Question

Is it possible to add a scroll through years in Bootstrap DateTimePicker ? http://eonasdan.github.io/bootstrap-datetimepicker/

Actual layout

Expected layout

Answer 1

is it possible to add a scroll through years in Bootstrap DateTimePicker ?

Yes, and this is the snippet (on datetimepicker show event you need to add the extra year cursors and relative events):

$('#datetimepicker1').datetimepicker().on('dp.show', function (e) {
  var objDP = $(this).find('.bootstrap-datetimepicker-widget.dropdown-menu.bottom');
  var nextEle = objDP.find('th.next:first');
  var prevEle = objDP.find('th.prev:first');
  var firstNext = nextEle.find('span').remove().clone();
  var firstPrev = prevEle.find('span').remove().clone();
  nextEle.append($('<div/>', {class: "row"})
                 .append(firstNext)
                 .append(' ')
                 .append($('<span/>',
                    {
                     class: "glyphicon glyphicon glyphicon-forward",
                     title: "Next Year"
                    }
                )));
  prevEle.append($('<div/>', {class: "row"})
                 .append($('<span/>',
                    {
                     class: "glyphicon glyphicon glyphicon-backward",
                     title: "Prev Year"
                    }))
                 .append(' ')
                 .append(firstPrev)
                );
  nextEle.find('span.glyphicon-forward').on('click', function(e) {
    e.stopPropagation();
    var nYear = $('#datetimepicker1').data("DateTimePicker").viewDate().add('11', 'months');
    $('#datetimepicker1').data("DateTimePicker").viewDate(nYear);
    $(this).prev('span.glyphicon-chevron-right').click()
  });
  prevEle.find('span.glyphicon-backward').on('click', function(e) {
    e.stopPropagation();
    var nYear = $('#datetimepicker1').data("DateTimePicker").viewDate().subtract('11', 'months');
    $('#datetimepicker1').data("DateTimePicker").viewDate(nYear);
    $(this).next('span.glyphicon-chevron-left').click()
  });
});

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.14.1/moment.min.js"></script>

<link rel="stylesheet"
      href="https://rawgit.com/Eonasdan/bootstrap-datetimepicker/master/build/css/bootstrap-datetimepicker.min.css">
<script src="https://rawgit.com/Eonasdan/bootstrap-datetimepicker/master/build/js/bootstrap-datetimepicker.min.js"></script>


<div class="container">
    <div class="row">
        <div class='col-sm-6'>
            <div class="form-group">
                <div class='input-group date' id='datetimepicker1'>
                    <input type='text' class="form-control"/>
                    <span class="input-group-addon">
                        <span class="glyphicon glyphicon-calendar"></span>
                    </span>
                </div>
            </div>
        </div>
    </div>
</div>

UPDATE

How to change language to French ? How to change time format to 24h ? and how to seperate datepicker and timepicker in HTML code so i can activate/disactivate timepicker ?

Here the new snippet:

//
// next line for french language
//
moment.locale('fr');
$('#datetimepicker1').datetimepicker({
  sideBySide: false,
  format: 'D/M/YYYY'
  /* 
  This for 24 four hours:
 sideBySide: true,
 format: 'D/M/YYYY HH:mm'
*/
}).on('dp.show', function (e) {
  var objDP = $(this).find('.bootstrap-datetimepicker-widget.dropdown-menu.bottom');
  var nextEle = objDP.find('th.next:first');
  var prevEle = objDP.find('th.prev:first');
  var firstNext = nextEle.find('span').remove().clone();
  var firstPrev = prevEle.find('span').remove().clone();
  nextEle.append($('<div/>', {class: "row"})
                 .append(firstNext)
                 .append(' ')
                 .append($('<span/>',
                           {
    class: "glyphicon glyphicon glyphicon-forward",
    title: "Next Year"
  }
                          )));
  prevEle.append($('<div/>', {class: "row"})
                 .append($('<span/>',
                           {
    class: "glyphicon glyphicon glyphicon-backward",
    title: "Prev Year"
  }))
                 .append(' ')
                 .append(firstPrev)
                );
  nextEle.find('span.glyphicon-forward').on('click', function(e) {
    e.stopPropagation();
    var nYear = $('#datetimepicker1').data("DateTimePicker").viewDate().add('11', 'months');
    $('#datetimepicker1').data("DateTimePicker").viewDate(nYear);
    $(this).prev('span.glyphicon-chevron-right').click()
  });
  prevEle.find('span.glyphicon-backward').on('click', function(e) {
    e.stopPropagation();
    var nYear = $('#datetimepicker1').data("DateTimePicker").viewDate().subtract('11', 'months');
    $('#datetimepicker1').data("DateTimePicker").viewDate(nYear);
    $(this).next('span.glyphicon-chevron-left').click()
  });
});

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.14.1/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.15.1/locale/fr.js"></script>

<link rel="stylesheet"
      href="https://rawgit.com/Eonasdan/bootstrap-datetimepicker/master/build/css/bootstrap-datetimepicker.min.css">
<script src="https://rawgit.com/Eonasdan/bootstrap-datetimepicker/master/build/js/bootstrap-datetimepicker.min.js"></script>



<div class="container">
    <div class="row">
        <div class='col-sm-6'>
            <div class="form-group">
                <div class='input-group date' id='datetimepicker1'>
                    <input type='text' class="form-control"/>
                    <span class="input-group-addon">
                        <span class="glyphicon glyphicon-calendar"></span>
                    </span>
                </div>
            </div>
        </div>
    </div>
</div>