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/

Leave a Reply

Your email address will not be published. Required fields are marked *