Question

如何使用Bootstrap Datepicker选择一周的日期和月份？

我目前正在使用jQuery UI datepicker来选择月和周。

Answer 1

选择月份

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

选择周日期范围

为了做到这一点，需要进行一些CSS更改。此外，下面的代码并不完全灵活，因为我没有找到任何方法来从事件回调中获取插件设置。输出格式类似于2015-4-19 to 2015-4-25。请参阅calculate_week_range()功能。

$('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

此css仅适用于周选择器部分。

.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);
}

我将在稍后制作两个例子。

使用Bootstrap Datepicker选择周日期范围和月份

1 个答案: