我目前正在使用 bootstrap-datepicker ( https://github.com/eternicode/bootstrap-datepicker ),但希望能够选择日历中的整周(周一到周日),并在我选择的输入字段中显示周间隔。 输入字段中的默认间隔应该是您当前所在的周。
我见过一种使用 jQuery UI 来显示 jsfiddle 上的间隔的类似方法。 .
C
我尝试编辑此代码以适用于 bootstrap-datepicker,但没有任何运气。
知道如何为 bootstrap-datepicker 实现这个吗? :
非常感谢任何帮助!
最佳答案
我在项目中使用了 Bootstrap 日期时间选择器,在尝试选择星期时遇到了与您相同的问题。
我自己得到了以下解决方案,您可以尝试一下。
所需文件:
- Bootstrap.css
- Bootstrapdatetime picker css(您只能使用datepicker而不是datetime)
- jquery.js
- Bootstrap.js
- moment.js
- 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 中的工作代码:
关于jquery - Bootstrap日期选择器: Select entire week and put week interval in input field,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28713964/