CODEWITHSUNDEEP
javascriptjquerytwitter-bootstrap-3bootstrap-datepicker
Sisir
Sisir

Reputation: 2816

Select week date range and month using Bootstrap Datepicker

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

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

Upvotes: 1

Views: 9674

Answers (1)

Sisir
Sisir

Reputation: 2816

Selecting a Month

$('input[name=month]').datepicker( {
    format: "MM, yyyy",
    minViewMode: 1,
    autoclose: true
} );

Selecting week date range

Some CSS changes were required in order to do this. Also the code below isn't fully flexible as I didn't find any way to get plugin settings form a event callback. The output format is like 2015-4-19 to 2015-4-25. See calculate_week_range() function.

$('input[name=week]').datepicker( {
    format: "yyyy-mm-dd",
    autoclose: true
}).on('show', function(e){

    var tr = $('body').find('.datepicker-days table tbody tr');

    tr.mouseover(function(){
        $(this).addClass('week');
    });

    tr.mouseout(function(){
        $(this).removeClass('week');
    });

    calculate_week_range(e);

}).on('hide', function(e){
    console.log('date changed');
    calculate_week_range(e);
});

var calculate_week_range = function(e){

    var input = e.currentTarget;

    // remove all active class
    $('body').find('.datepicker-days table tbody tr').removeClass('week-active');

    // add active class
    var tr = $('body').find('.datepicker-days table tbody tr td.active.day').parent();
    tr.addClass('week-active');

    // find start and end date of the week

    var date = e.date;
    var start_date = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay());
    var end_date = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay() + 6);

    // make a friendly string

    var friendly_string = start_date.getFullYear() + '-' + (start_date.getMonth() + 1) + '-' + start_date.getDate()  + ' to '
        + end_date.getFullYear() + '-' + (end_date.getMonth() + 1) + '-' + end_date.getDate();

    console.log(friendly_string);

    $(input).val(friendly_string);

}

CSS

This css needed for week picker part only.

.datepicker table tr.week:hover{
    background: #eee;
}

.datepicker table tr.week-active,
.datepicker table tr.week-active td,
.datepicker table tr.week-active td:hover,
.datepicker table tr.week-active.week td,
.datepicker table tr.week-active.week td:hover,
.datepicker table tr.week-active.week,
.datepicker table tr.week-active:hover{
    background-color: #006dcc;
    background-image: -moz-linear-gradient(top, #0088cc, #0044cc);
    background-image: -ms-linear-gradient(top, #0088cc, #0044cc);
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#0088cc), to(#0044cc));
    background-image: -webkit-linear-gradient(top, #0088cc, #0044cc);
    background-image: -o-linear-gradient(top, #0088cc, #0044cc);
    background-image: linear-gradient(top, #0088cc, #0044cc);
    background-repeat: repeat-x;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0088cc', endColorstr='#0044cc', GradientType=0);
    border-color: #0044cc #0044cc #002a80;
    border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
    filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
    color: #fff;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
}

I will make jsfiddle examples for both later.

Upvotes: 5

Related Questions