Bootstrap datepicker: Select entire week and put week interval in input field

Question

I am currently using bootstrap-datepicker (https://github.com/eternicode/bootstrap-datepicker), but want to be able to select entire weeks in the calendar (Monday to Sunday), as well as display the week interval in the input field that I am selecting from. The default interval in the input field should be the week that you are currently in.

I have seen a somewhat similar method using jQuery UI to display the interval on jsfiddle.

C

I have tried editing this code to work for bootstrap-datepicker, without any luck.

Any idea how I can implement this for bootstrap-datepicker? :

Any help is highly appreciated!

Answer 1

I have used Bootstrap datetime picker in my project ran into same problem like yours When trying to select the weeks.

Got the below Solution on my own you can try it.

Required Files :

1. Bootstrap.css
2. Bootstrapdatetime picker css(You can use only datepicker instead of datetime)
3. jquery.js
4. Bootstrap.js
5. moment.js
6. Bootstrap Date time Picker js(Again you can use only datepicker instead of datetime)

HTML :

<div class="container">    
    <div class="row">
        <div class="col-sm-6 form-group">
            <div class="input-group" id="DateDemo">
              <input type='text' id='weeklyDatePicker' placeholder="Select Week" />
            </div>
        </div>
    </div>
</div>

JS : Used the moment.js for calculating the start and end of the week.

//Initialize the datePicker(I have taken format as mm-dd-yyyy, you can have your own)
$("#weeklyDatePicker").datetimepicker({
    format: 'MM-DD-YYYY'
});

//Get the value of Start and End of Week
$('#weeklyDatePicker').on('dp.change', function (e) {
    value = $("#weeklyDatePicker").val();
    firstDate = moment(value, "MM-DD-YYYY").day(0).format("MM-DD-YYYY");
    lastDate =  moment(value, "MM-DD-YYYY").day(6).format("MM-DD-YYYY");
    $("#weeklyDatePicker").val(firstDate + "   -   " + lastDate);
});

CSS :

.bootstrap-datetimepicker-widget tr:hover {
    background-color: #808080;
}

Link to Working Code in JSFiddle :

https://jsfiddle.net/Prakash_Thete/9usq3enn/