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 选择器 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/

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/

Answer 3

我目前正在从事具有相同要求的项目。不知道我在哪里找到它，但http://codepen.io/chanduvkm/pen/yeXKGW 上的这个小提琴以稍微不同的方式解决了几乎相同的问题，但使用的是您当前使用的 bootstrap-datepicker 库。可以轻松添加默认值。但是，当设置了选项 'weekStart: 1' 时，活动周的 CSS 会失败，这是我真正需要的（ISO-8601 周从星期一开始）。

    var startDate,
    endDate;

  $('#weekpicker').datepicker({
    autoclose: true,
    format :'mm/dd/yyyy',
    forceParse :false
}).on("changeDate", function(e) {
    //console.log(e.date);
    var date = e.date;
    startDate = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay());
    endDate = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay()+6);
    //$('#weekpicker').datepicker("setDate", startDate);
    $('#weekpicker').datepicker('update', startDate);
    $('#weekpicker').val((startDate.getMonth() + 1) + '/' + startDate.getDate() + '/' +  startDate.getFullYear() + ' - ' + (endDate.getMonth() + 1) + '/' + endDate.getDate() + '/' +  endDate.getFullYear());
});

作为对 prakash 上一个回答的回应，我将小提琴从星期一开始：https://jsfiddle.net/skfw0k53/ 添加以下内容：

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

所以，基本上两个不同的库来解决这个问题。

Answer 4

你可以试试。

所需文件：

jquery-1.11.3.js
引导日期选择器.min.js
引导日期选择器.css
bootstrap.min.css

HTML

<div class="container">
  <div class="row">
      <div class='col-md-3'>
    Week Start <select id="cweek">
      <option value='0'> 0 </option>
      <option value='1'> 1 </option>
      <option value='2'> 2 </option>
      <option value='3'> 3 </option>
      <option value='4'> 4 </option>
      <option value='5'> 5 </option>
      <option value='6'> 6 </option>
      <option value='7'> 7 </option>
    </select>
  </div>
  <div class='col-md-3'>
    Copy <select name='cweek_number' id='cweek_number'>
      <option value='1'> 1 Week </option>
      <option value='2'> 2 Week </option>
      <option value='3'> 3 Week </option>
      <option value='4'> 4 Week </option>
    </select> from
  </div>
</div>
</div>
<div class="container">
  <div class="row">


      <div class="from_cal"></div>
      </div>
      <div class="row">



      <div class="to_cal"></div>
    </div>
  </div>
</div>

js

var weekOfStart = 0;
      var startDate;
      var endDate;
      var toCal_startDate;
      var toCal_endDate;
      var setNumberOfWeek = 1;

      var from_cal = '.from_cal';
      var to_cal = '.to_cal';

      var obj =   $(from_cal).datepicker({
                  weekStart:weekOfStart,
                  maxViewMode: 0,
                  onSelect: function (date) {

                  },
                  beforeShowDay: function(date)
                  {
                    var cssClass = '';
                      if(date >= startDate && date <= endDate)
                          cssClass = 'oui-state-hover';
                      return [true, cssClass];
                  }
              //    startDate: new Date()
        });


      $(from_cal).on('changeDate', function(evt) {
          var date = evt.date;
          var dayAdjustment = date.getDay() - weekOfStart;
          if (dayAdjustment < 0) {
              dayAdjustment += 7;
          }
          if(setNumberOfWeek > 1)
          {
            weekLast = 7*(setNumberOfWeek-1);
          }
          else {
            weekLast = 0;
          }
          startDate = new Date(date.getFullYear(), date.getMonth(), date.getDate() - dayAdjustment);
          endDate = new Date(date.getFullYear(), date.getMonth(), date.getDate() - dayAdjustment + (6+weekLast));

          // console.log(startDate);
          // console.log(endDate);

          $(this).find('.active').closest('tr').addClass('oui-selected');
          if(setNumberOfWeek > 1)
          {
            $(this).find('.active').closest('tr').nextAll().slice(0, (setNumberOfWeek-1)).addClass('oui-selected');
          }
      });

        $(from_cal).on('mousemove', '.table-condensed tr', function () {
            $(this).find('td').addClass('oui-state-hover');
            if(setNumberOfWeek > 1)
            {

            $(this).nextAll().slice(0, (setNumberOfWeek-1)).find('td').addClass('oui-state-hover');
            }

        });
        $(from_cal).on('mouseleave', '.table-condensed tr', function () {

              $(this).find('td').removeClass('oui-state-hover');

              $(this).nextAll().find('td').removeClass('oui-state-hover');

        });


        $(from_cal).find('td').on('click', function(){

          console.log('ok');
        });

    obj.datepicker();


// To date Calendar  code

        var toCalObj =   $(to_cal).datepicker({
                      weekStart:weekOfStart,
                      maxViewMode: 0,
                  //    startDate: new Date()
        });
        toCalObj.datepicker();
        $(to_cal).on('mousemove', '.table-condensed tr', function () {
            $(this).find('td').addClass('kui-state-hover');
            if(setNumberOfWeek > 1)
            {

            $(this).nextAll().slice(0, (setNumberOfWeek-1)).find('td').addClass('kui-state-hover');
            }

        });
        $(to_cal).on('mouseleave', '.table-condensed tr', function () {

              $(this).find('td').removeClass('kui-state-hover');

              $(this).nextAll().find('td').removeClass('kui-state-hover');

        });

        $(to_cal).on('changeDate', function(evt) {

            var date = evt.date;
            var dayAdjustment = date.getDay() - weekOfStart;
            if (dayAdjustment < 0) {
                dayAdjustment += 7;
            }
            if(setNumberOfWeek > 1)
            {
              weekLast = 7*(setNumberOfWeek-1);
            }
            else {
              weekLast = 0;
            }
            toCal_startDate = new Date(date.getFullYear(), date.getMonth(), date.getDate() - dayAdjustment);
            toCal_endDate = new Date(date.getFullYear(), date.getMonth(), date.getDate() - dayAdjustment + (6+weekLast));

            console.log(toCal_startDate);
            console.log(toCal_endDate);

            $(this).find('.active').closest('tr').addClass('oui-selected');
            if(setNumberOfWeek > 1)
            {
              $(this).find('.active').closest('tr').nextAll().slice(0, (setNumberOfWeek-1)).addClass('oui-selected');
            }

          //  console.log(date.getDay());
        });


//comman code

      $('#cweek').change(function()
    {
      weekOfStart =  $('#cweek').val();
      obj.datepicker('destroy');
      toCalObj.datepicker('destroy');
      obj.datepicker({weekStart:$('#cweek').val(),maxViewMode:0}).datepicker('update');
      toCalObj.datepicker({weekStart:$('#cweek').val(),maxViewMode:0}).datepicker('update');
    });

    $('#cweek_number').change(function()
    {
      setNumberOfWeek = $('#cweek_number').val();
      obj.datepicker('destroy');
      toCalObj.datepicker('destroy');
      obj.datepicker({weekStart:$('#cweek').val(),maxViewMode:0}).datepicker('update');
      toCalObj.datepicker({weekStart:$('#cweek').val(),maxViewMode:0}).datepicker('update');

    });


    $('.table-condensed').addClass('table');

屏幕截图

JSFiddle 链接https://jsfiddle.net/shivamanhar/ddphp8jx/9/

Answer 5

如果有人改用 daterangepicker 请按照扩展程序选择周数

//moment.locale('ru') //depending on locale you can move start of week

set_picker_start_end = (picker, when) => {
  
  let m = (when == 'now') ? moment() : moment(when) //moment

  let week_start  = m.startOf('isoweek')
  let week_end    = m.clone().endOf('isoweek')
  
  picker.setStartDate(week_start);
  picker.setEndDate(week_end);
}

$("#week-dp").daterangepicker({
  // "showDropdowns": true,
  "showISOWeekNumbers": true,
  "autoApply": true,
  "showCustomRangeLabel": false,
  // "startDate": '', //not work because of one calendar. will be set further
  // "endDate": '', //not work because of one calendar. will be set further
  "drops": "down",
  "singleDatePicker" : true, //to make one click and one calendar
  "locale": {
    "format": "W [week of] GGGG",
    "weekLabel": "#",
  },
});

set_picker_start_end($("#week-dp").data('daterangepicker'), 'now') //set current week selected

$("#week-dp").on('show.daterangepicker', function(ev, picker) {

  let active_cell = picker.container[0].querySelector('td.start-date')
  active_cell.parentElement.classList.add('active') //tr goes active
});

$("#week-dp").on('apply.daterangepicker', function(ev, picker) {

    set_picker_start_end(picker, picker.startDate)
});

https://jsfiddle.net/dj_floyd/f2hoygdw/

Answer 6

一个非常快速的解决方案： 1.修改JS文件：bootstrap-datepicker.js 2.修改CSS文件：bootstrap-datepicker3.css 3. 修改你的代码。

        //Modifications on bootstrap-datepicker.js
        //-----
        if (!target.hasClass('disabled')){
                // Clicked on a day
                if (target.hasClass('day')){
                        day = parseInt(target.text(), 10) || 1;
                        year = this.viewDate.getUTCFullYear();
                        month = this.viewDate.getUTCMonth();
                        //HF[+][i]201612151500
                        datepickerPlugin.actualWeek = $(target[0].parentNode).find('.cw').text();
                        //HF[+][f]201612151500
                        // From last month
                        if (target.hasClass('old')){
                                if (month === 0) {
                                        month = 11;
                                        year = year - 1;
                                        monthChanged = true;
                                        yearChanged = true;
                                } else {
                                        month = month - 1;
                                        monthChanged = true;
                                }
                        }
        //-----
        //HF[-][i]201612151500
        //   validParts: /dd?|DD?|mm?|MM?|yy(?:yy)?/g,
        //HF[-][f]201612151500
        //HF[+][i]201612151500
        validParts: /ww?|dd?|DD?|mm?|MM?|yy(?:yy)?/g,
        //HF[+][f]201612151500
        nonpunctuation: /[^ -\/:-@\u5e74\u6708\u65e5\[-`{-~\t\n\r]+/g,
        parseFormat: function(format){
                if (typeof format.toValue === 'function' && typeof format.toDisplay === 'function')
                        return format;
                // IE treats \0 as a string end in inputs (truncating the value),
                // so it's a bad format delimiter, anyway
                var separators = format.replace(this.validParts, '\0').split('\0'),
                        parts = format.match(this.validParts);
                if (!separators || !separators.length || !parts || parts.length === 0){
                        throw new Error("Invalid date format.");
                }
                return {separators: separators, parts: parts};
        },
        //-----
        formatDate: function(date, format, language){
                if (!date)
                        return '';
                if (typeof format === 'string')
                        format = DPGlobal.parseFormat(format);
                if (format.toDisplay)
                        return format.toDisplay(date, format, language);
                var val = {
                        //HF[+][i]201612151500
                        ww: 'Semana ' + datepickerPlugin.actualWeek.toString(),
                        //HF[+][f]201612151500
                        d: date.getUTCDate(),
                        D: dates[language].daysShort[date.getUTCDay()],
                        DD: dates[language].days[date.getUTCDay()],
                        m: date.getUTCMonth() + 1,
                        M: dates[language].monthsShort[date.getUTCMonth()],
                        MM: dates[language].months[date.getUTCMonth()],
                        yy: date.getUTCFullYear().toString().substring(2),
                        yyyy: date.getUTCFullYear()
                };
                val.dd = (val.d < 10 ? '0' : '') + val.d;
                val.mm = (val.m < 10 ? '0' : '') + val.m;
                date = [];
                var seps = $.extend([], format.separators);
                for (var i=0, cnt = format.parts.length; i <= cnt; i++){
                        if (seps.length)
                                date.push(seps.shift());
                        date.push(val[format.parts[i]]);
                }
                return date.join('');
        },
        //-----

        .datepicker tbody tr:hover {
        	background-color: #eee;
        }
        .datepicker tbody tr:hover td,
        .datepicker tbody tr td.active {
        	border-radius: 0;
        }
        .datepicker tbody tr:hover td:last-child,
        .datepicker tbody tr td.active:last-child {
        	border-radius: 0 3px 3px 0;
        }
        .datepicker tbody tr:hover td:first-child,
        .datepicker tbody tr  td.active:nth-child(2) {
        	border-radius: 3px 0 0 3px;
        }

        <!--RefLinks-->
        <link href="~/libraries/bootstrap-datepicker-1.6.4/css/bootstrap-datepicker3.css" rel="stylesheet">
        <script src="~/libraries/bootstrap-datepicker-1.6.4/js/bootstrap-datepicker.js"></script>
 
        <!--OnBody-->
        <input id="datepicker2" class="datepicker4" style="width: 300px;" type="text">

        <!--OnScriptSection-->
        $(function ()
        {
            var $weekPicker = $("#datepicker2");
            $weekPicker.datepicker
                (
                    {
                        autoclose: true,
                        format: 'ww', //'dd-M-yyyy',
                        calendarWeeks: true,
                        //maxViewMode: 0,
                        weekStart: 1
                    }
                )