使用Bootstrap Datepicker选择月份日期范围和月份 [英] Select month date range and month using Bootstrap Datepicker

问题描述

如何使用Bootstrap Datepicker选择月份日期和月份的范围?

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

我目前正在使用jQuery UI 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

这是js小提琴的链接 https://jsfiddle.net/prtk/znbx32j1/1 /

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

推荐答案

您需要修改click事件的prev和next计算.检查此小提琴(检查控制台以查看值).

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

使用setMonth()和getMonth()代替setDate()和getDate().另外，您可能需要调整/设置天"值才能获得准确的结果.

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

更新:这是更新的小提琴

这篇关于使用Bootstrap Datepicker选择月份日期范围和月份的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！