<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) {
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('update', startDate);
$('#weekpicker').val((startDate.getMonth() + 1) + '/' + startDate.getDate() + '/' + startDate.getFullYear() + ' - ' + (endDate.getMonth() + 1) + '/' + endDate.getDate() + '/' + endDate.getFullYear());
});
$('#prevWeek').click(function(e){
var date = $('#weekpicker').datepicker('getDate');
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');
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;
});