引导周选择器日期选择器无法按需工作

Question

我能够实现引导周选择器。在我从特定星期中选择任何日期后，应该仅将特定星期的开始日期显示为星期一，将结束日期显示为星期日。但是现在在我从任何一周中选择日期之后，它仅从该所选日期开始。

请在这里参考我的代码。 My calendar code

var applyStyle = function(e, cssClass){
    var tr = e.parent('tr');
    var index = e.index();
    
    e.addClass(cssClass);
    var daysRemainingInWeek = 6 - index;
    var carryOver = 6 - daysRemainingInWeek;
    
    for (var i=0; i<=daysRemainingInWeek; i++){
        var pos = index + i;
        tr.find('td:eq('+pos+')').addClass(cssClass);
    }
    
    if (carryOver > 0) {
        var nextTr = tr.next('tr');
        for (var i=0; i<carryOver; i++){
            nextTr.find('td:eq('+i+')').addClass(cssClass);
        }
    }
};
var weeknumber = 0;
var highlightRange = function(e){
    var input = e.currentTarget;

    $('.week-active', '.datepicker-days').removeClass('week-active');
    var thisDay = $('td.active.day', '.datepicker-days');
    applyStyle(thisDay, 'week-active');
    var date = new Date(e.date);
  
    var start_date = moment(date);
    var end_date = moment(date).add(6, 'days');
    var friendly_string = start_date.format('MMMM DD YYYY') + ' to '
        + end_date.format('MMMM DD YYYY');

    $(input).val(friendly_string);
};

highlightRange({ currentTarget: document.getElementsByName('week')[0], date: new Date() });

$('input[name=week]').datepicker( {
    format: "MMMM DD YYYY",
    autoclose: true,
    orientation: 'top auto',   
    weekStart: 0
}).on('show', function(e){
    highlightRange(e);
  $('input[name=week]').datepicker('update');
}).on('hide', function(e){
   highlightRange(e);
  $('input[name=week]').datepicker('update');
});

$('.input-group-addon', '.week-select').click(function(){ $('input[name=week]').datepicker('show'); });

//$(function() {
    var counter = 0;
    var date = moment(date);
    $('.buttonselect').on('click', function(event){
      event.preventDefault();
      console.log(counter);
      
        
        var date = $('input[name=week]').datepicker("getDate");
        if($(this).attr('id') == 'previous'){
          if(counter >= 1){
            counter--;
            predate = moment(date).add(counter*6, 'days');
            highlightRange({ currentTarget: document.getElementsByName('week')[0], date: predate });
          }
        }
        if($(this).attr('id') == 'next'){
          if(counter >= 0){
            counter++;
            nextdate = moment(date).add(counter*6, 'days');
            highlightRange({ currentTarget: document.getElementsByName('week')[0], date: nextdate });
          }
        }        
    });
  

.container {
  margin-top: 40px;
}
.week-select .input-group-addon {
  cursor: pointer;
}
.datepicker table tr td.week {
  background: #e9e9e9;
}
.datepicker table tr td.week-active,
.datepicker table tr td.week-active:hover,
.datepicker table tr td.week-active td.week,
.datepicker table tr td.week-active td.week:hover,
.datepicker table tr td.week-active td:hover {
  background-color: #006dcc;
  background-image: -moz-linear-gradient(top, #0088cc, #0044cc);
  background-image: -ms-linear-gradient(top, #0088cc, #0044cc);
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#0088cc), to(#0044cc));
  background-image: -webkit-linear-gradient(top, #0088cc, #0044cc);
  background-image: -o-linear-gradient(top, #0088cc, #0044cc);
  background-image: linear-gradient(top, #0088cc, #0044cc);
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0088cc', endColorstr='#0044cc', GradientType=0);
  border-color: #0044cc #0044cc #002a80;
  border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
  filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
  color: #fff;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.1/js/bootstrap-datepicker.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.1/css/bootstrap-datepicker3.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.6/moment.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.1/js/bootstrap-datepicker.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div class="row">
    <div class="col-sm-3 col-sm-offset-4">
      <div class="input-group week-select">
          <input type="text" class="form-control" name="week">
          <span class="input-group-addon"><i class="fa fa-calendar"></i></span>
      </div>
      <div class="col-md-12">
    <nav>
      <ul class="pager">
        <li><a class="buttonselect" href="#" id="previous">Previous</a></li>
        <li><a class="buttonselect" href="#" id="next">Next</a></li>
      </ul>
    </nav>
  </div>
    </div>
  </div>
</div>

任何人都可以建议在这里可以做什么。在我在stackoverflow中实现此代码后，也会给我错误