引导日期选择器:选择整个星期，然后在输入字段中输入星期间隔 [英] Bootstrap datepicker: Select entire week and put week interval in input field

问题描述

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

I am currently using bootstrap-datepicker (https://github.com/eternicode/bootstrap-datepicker), but want to be able to select entire weeks in the calendar (Monday to Sunday), as well as display the week interval in the input field that I am selecting from. The default interval in the input field should be the week that you are currently in.

我已经看到了使用jQuery UI在 jsfiddle 上显示间隔的一种类似方法.

I have seen a somewhat similar method using jQuery UI to display the interval on jsfiddle.

C

我试图编辑此代码以使其适用于bootstrap-datepicker，但没有任何运气.

I have tried editing this code to work for bootstrap-datepicker, without any luck.

有人知道如何为bootstrap-datepicker实现此功能吗? :

Any idea how I can implement this for bootstrap-datepicker? :

我们非常感谢您的帮助！

Any help is highly appreciated!

推荐答案

我在项目中使用Bootstrap日期时间选择器时遇到了与您一样的问题，试图选择星期.

I have used Bootstrap datetime picker in my project ran into same problem like yours When trying to select the weeks.

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

Got the below Solution on my own you can try it.

必需文件:

1. Bootstrap.css
2. 引导日期时间选择器css(只能使用日期选择器代替日期时间)
3. jquery.js
4. Bootstrap.js
5. moment.js
6. Bootstrap日期时间选择器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计算一周的开始和结束.

JS : Used the moment.js for calculating the start and end of the week.

//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中的工作代码:

Link to Working Code in JSFiddle :

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

这篇关于引导日期选择器:选择整个星期，然后在输入字段中输入星期间隔的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！