如何 select 月内 bootstrap 日期选择器中的整行

Question

我想 select 一个月内整行。

让我解释一下我的任务。

对于example:august2017年星期二开始，我想在文本框中显示星期二到星期六的日期。

如果用户 select 2017 年 8 月 28 日意味着我只想在文本框中显示星期日到星期四的日期。同样，我希望每个月都能得到结果。

这里我创建了fiddle Click here to see the fiddle

   var firstDate = moment(value, "DD-MM-YYYY").day(0).format("DD-MM-YYYY");
      var lastDate =  moment(value, "DD-MM-YYYY").day(6).format("DD-MM-YYYY");

我不知道该怎么做。谁能告诉我是否有可能实现这一目标并提供一些实现这一目标的技巧。

谢谢

维诺斯

Answer 1

试试这个代码

比较 first date of row 与 month first date && last date of row 与 month last date。

  $('#weeklyDatePicker').on('dp.change', function (e) {
      var _year=e.date.year(),
      _month=e.date.month(),
      _date=e.date.date(),
      _day=e.date.day(),
      monthFirstDate = new Date(_year, _month, 1),
      monthLastDate = new Date(_year, _month + 1, 0),
      firstDate = new Date(_year, _month, _date - _day),
      lastDate = new Date(_year, _month, _date - _day + 6),
      fromDate=(firstDate<=monthFirstDate)?monthFirstDate:firstDate,
      toDate=(lastDate>=monthLastDate)?monthLastDate:lastDate,
      fromDateFormated=moment(fromDate).format("DD-MM-YYYY"),
      toDateFormated=moment(toDate).format("DD-MM-YYYY");
      $("#weeklyDatePicker").val(fromDateFormated);
      $("#weeklyDatePickerend").val(toDateFormated);
  });

  
$(document).ready(function(){


  $("#weeklyDatePicker").datetimepicker({
      format: 'DD-MM-YYYY',
  });
  $('#weeklyDatePicker').on('dp.change', function (e) {
      var _year=e.date.year(),
      _month=e.date.month(),
      _date=e.date.date(),
      _day=e.date.day(),
      monthFirstDate = new Date(_year, _month, 1),
      monthLastDate = new Date(_year, _month + 1, 0),
      firstDate = new Date(_year, _month, _date - _day),
      lastDate = new Date(_year, _month, _date - _day + 6),
      fromDate=(firstDate<=monthFirstDate)?monthFirstDate:firstDate,
      toDate=(lastDate>=monthLastDate)?monthLastDate:lastDate,
      fromDateFormated=moment(fromDate).format("DD-MM-YYYY"),
      toDateFormated=moment(toDate).format("DD-MM-YYYY");
      $("#weeklyDatePicker").val(fromDateFormated);
      $("#weeklyDatePickerend").val(toDateFormated);
  });
});

.bootstrap-datetimepicker-widget tr:hover {
    background-color: #0d75b3;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://cdn.jsdelivr.net/momentjs/2.10.6/moment.min.js"></script>
<script src="https://cdn.jsdelivr.net/bootstrap.datetimepicker/4.17.37/js/bootstrap-datetimepicker.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/css/bootstrap-datetimepicker.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<div class="container">    
    <div class="row">
        <div class="col-sm-6 form-group">
            <div class="input-group" id="DateDemo">
              From Date:<input type='text' id='weeklyDatePicker' placeholder="Select Week" />
              <br>
                   To Date:<input type='text' id='weeklyDatePickerend' placeholder="Select Week" />
          </div>
      </div>
  </div>
</div>

如何 select 月内 bootstrap 日期选择器中的整行

how to select entire row in bootstrap date picker within the month

datepicker

datetimepicker

twitter-bootstrap

bootstrap-datetimepicker