Bootstrap datepicker:选择整周并在输入字段中输入周间隔

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. 引导日期时间选择器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/

Answer 2

我已经优化了上面提到的例子.

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

$(document).ready(function(){
    moment.locale('en', {
      week: { dow: 1 } // Monday is the first day of the week
    });

  //Initialize the datePicker(I have taken format as mm-dd-yyyy, you can     //have your owh)
  $("#weeklyDatePicker").datetimepicker({
      format: 'MM-DD-YYYY'
  });

   //Get the value of Start and End of Week
  $('#weeklyDatePicker').on('dp.change', function (e) {
      var value = $("#weeklyDatePicker").val();
      var firstDate = moment(value, "MM-DD-YYYY").day(0).format("MM-DD-YYYY");
      var lastDate =  moment(value, "MM-DD-YYYY").day(6).format("MM-DD-YYYY");
      $("#weeklyDatePicker").val(firstDate + " - " + lastDate);
  });
});

CSS

.bootstrap-datetimepicker-widget .datepicker-days table tbody tr:hover {
    background-color: #eee;
}

查看演示链接:https: //jsfiddle.net/IamMHussain/ozdrdbqf/1/