Bootprap datepicker: выберите всю неделю и установите интервал недели в поле ввода

Ответ 1

Я использовал подборщик даты и времени 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: Используется момент .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/

Ответ 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/

Ответ 3

В настоящее время я работаю над проектом с тем же требованием. Не знаю, где я его нашел, но эта скрипка на http://codepen.io/chanduvkm/pen/yeXKGW затрагивает почти ту же проблему несколько иначе, но с использованием начальной загрузки -datepicker, которую вы сейчас используете. Значение по умолчанию может быть легко добавлено. Тем не менее, CSS активной недели не работает, когда установлен параметр "weekStart: 1", что мне действительно нужно (неделя 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());
});

В ответ на предыдущий ответ пракаша я разблокировал скрипку, чтобы начать в понедельник: https://jsfiddle.net/skfw0k53/, добавив следующее:

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

Итак, в основном две разные библиотеки для решения этой проблемы.

Ответ 4

Вы можете попробовать.

Необходимый файл:

JQuery-1.11.3.js
самозагрузки-datepicker.min.js
самозагрузки-datepicker.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 link https://jsfiddle.net/shivamanhar/ddphp8jx/9/

Ответ 5

Очень быстрое решение: 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: /[^ -\/:[email protected]\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 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
                    }
                )