Freelance Web Designer in Dubai & SEO Expert in Kerala
01 / 01

Select entire week and put week interval in input field

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/webanvar/79xyvzjg/

by anvar
Published : May , 9

Post a comment

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.

WhatsApp Logo Chat
design specialist