jquery - Bootstrap日期选择器: Select entire week and put week interval in input field

Question

我目前正在使用 bootstrap-datepicker ( https://github.com/eternicode/bootstrap-datepicker )，但希望能够选择日历中的整周(周一到周日)，并在我选择的输入字段中显示周间隔。输入字段中的默认间隔应该是您当前所在的周。

我见过一种使用 jQuery UI 来显示 jsfiddle 上的间隔的类似方法。 .

C

我尝试编辑此代码以适用于 bootstrap-datepicker，但没有任何运气。

知道如何为 bootstrap-datepicker 实现这个吗？ :

非常感谢任何帮助!

Answer 1

我在项目中使用了 Bootstrap 日期时间选择器，在尝试选择星期时遇到了与您相同的问题。

我自己得到了以下解决方案，您可以尝试一下。

所需文件:

1. Bootstrap.css
2. Bootstrapdatetime picker css(您只能使用datepicker而不是datetime)
3. jquery.js
4. Bootstrap.js
5. moment.js
6. Bootstrap Date time Picker js(同样，您只能使用 datepicker 而不是 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 :使用 moment.js 来计算一周的开始和结束。

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

链接到 JSFiddle 中的工作代码:

https://jsfiddle.net/Prakash_Thete/9usq3enn/