Bootstrap DateTimePicker（滚动通过年）

Question

是否可以在Bootstrap DateTimePicker中添加滚动浏览年？ http://eonasdan.github.io/bootstrap-datetimepicker/

实际布局

预计的布局

Answer 1

是否有可能通过多年在引导的DateTimePicker添加滚动？

是的，这就是（你需要添加额外的一年光标和相关事件上的DateTimePicker显示事件）的片段：

$('#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

如何将语言更改为法语？如何将时间格式更改为24小时？以及如何在HTML代码中分隔datepicker和timepicker，以便我可以激活/取消激活timepicker？

这里的新片段：

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