<div class="container">
  <div class="jumbotron">
<div class="row week-selector">
  <div class="col-md-8">
    <div class="form-group clearfix">
      <label class="control-label pull-left" for="weekpicker">Select Week</label>
      <div class="col-sm-8">
        <span class="icon-block ">
          <input type="text" class="form-control" id="weekpicker">
          <span class="icon-date"></span>
        </span>
        <div class="week-controls">
          <button id="prevWeek" class="prev-week">Prev</button>
          <button id="nextWeek" class="next-week">Next</button>
        </div>
      </div>
    </div>
  </div>
</div>
  </div>
</div>

    .datepicker .datepicker-days tr td.active ~ td,
    .datepicker .datepicker-days tr td.active{
        color: #af1623 !important;
        background: transparent !important;
    } 
    
    .datepicker .datepicker-days tr:hover td{
        color: #000;
        background: #e5e2e3;
        border-radius: 0;
    } 
var startDate,
        endDate;
        
      $('#weekpicker').datepicker({
        autoclose: true,
        format :'mm/dd/yyyy',
        forceParse :false
    }).on("changeDate", function(e) {
        //console.log(e.date);
        var date = e.date;
        startDate = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay());
        endDate = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay()+6);
        //$('#weekpicker').datepicker("setDate", startDate);
        $('#weekpicker').datepicker('update', startDate);
        $('#weekpicker').val((startDate.getMonth() + 1) + '/' + startDate.getDate() + '/' +  startDate.getFullYear() + ' - ' + (endDate.getMonth() + 1) + '/' + endDate.getDate() + '/' +  endDate.getFullYear());
    });
        
        
        //new
        $('#prevWeek').click(function(e){
          var date = $('#weekpicker').datepicker('getDate');
          //dateFormat = "mm/dd/yy"; //$.datepicker._defaults.dateFormat;
          startDate = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay()- 7);
          endDate = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay() - 1);
          $('#weekpicker').datepicker("setDate", new Date(startDate));
          $('#weekpicker').val((startDate.getMonth() + 1) + '/' + startDate.getDate() + '/' +  startDate.getFullYear() + ' - ' + (endDate.getMonth() + 1) + '/' + endDate.getDate() + '/' +  endDate.getFullYear());
                 
          return false;
        });
        $('#nextWeek').click(function(){
          var date = $('#weekpicker').datepicker('getDate');
          //dateFormat = "mm/dd/yy"; // $.datepicker._defaults.dateFormat;
          startDate = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay()+ 7);
          endDate = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay() + 13);
          $('#weekpicker').datepicker("setDate", new Date(startDate));
          $('#weekpicker').val((startDate.getMonth() + 1) + '/' + startDate.getDate() + '/' +  startDate.getFullYear() + ' - ' + (endDate.getMonth() + 1) + '/' + endDate.getDate() + '/' +  endDate.getFullYear());
            
          return false;
        });

External CSS

  1. //maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css
  2. https://eternicode.github.io/bootstrap-datepicker/bootstrap-datepicker/js/bootstrap-datepicker.js
  3. https://eternicode.github.io/bootstrap-datepicker/bootstrap-datepicker/css/datepicker3.css

External JavaScript

  1. //cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js
  2. https://eternicode.github.io/bootstrap-datepicker/bootstrap-datepicker/js/bootstrap-datepicker.js