CODEWITHSUNDEEP
javascriptjquerytwitter-bootstrapdatedatepicker
Bhautik
Bhautik

Reputation: 11282

Select month date range and month using Bootstrap Datepicker

How to select a range of month date and month using Bootstrap Datepicker?

I am currently using jQuery UI datepicker to select months and weeks.

here is the example of for week date range i try into convert in month. but getting issue

here is the link for js fiddle https://jsfiddle.net/prtk/znbx32j1/1/

html

<div class="form-group col-md-8 col-md-offset-2" id="week-picker-wrapper">
    <label for="week" class="control-label">Select Week</label>
    <div class="input-group">
        <span class="input-group-btn">
            <button type="button" class="btn btn-rm week-prev">&laquo;</button>
        </span>
        <input type="text" class="form-control week-picker" placeholder="Select a Week">
        <span class="input-group-btn">
            <button type="button" class="btn btn-rm week-next">&raquo;</button>
        </span>
    </div>
</div>

js

var weekpicker, start_date, end_date;

function set_week_picker(date) {
    start_date = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay());
    end_date = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay() + 6);
    weekpicker.datepicker('update', start_date);
    weekpicker.val((start_date.getMonth() + 1) + '/' + start_date.getDate() + '/' + start_date.getFullYear() + ' - ' + (end_date.getMonth() + 1) + '/' + end_date.getDate() + '/' + end_date.getFullYear());
}
$(document).ready(function() {
    weekpicker = $('.week-picker');
    console.log(weekpicker);
    weekpicker.datepicker({
        autoclose: true,
        forceParse: false,
        container: '#week-picker-wrapper',
    }).on("changeDate", function(e) {
        set_week_picker(e.date);
    });
    $('.week-prev').on('click', function() {
        var prev = new Date(start_date.getTime());
        prev.setDate(prev.getDate() - 1);
        set_week_picker(prev);
    });
    $('.week-next').on('click', function() {
        var next = new Date(end_date.getTime());
        next.setDate(next.getDate() + 1);
        set_week_picker(next);
    });
    set_week_picker(new Date);
});

Upvotes: 0

Views: 1749

Answers (1)

Nidhin Chandran
Nidhin Chandran

Reputation: 856

You need to modify prev and next calculations on click events. Check this fiddle (Check the console to see the values).

use setMonth() and getMonth() instead of setDate() and getDate(). Also you may need to adjust/set the Day value to get accurate results.

Update : This is the updated fiddle

Upvotes: 1

Related Questions