Bootstrap datepicker: Select entire week and put week interval in input field

后端未结

关注

 6  1721

借酒劲吻你 2020-12-23 17:50

I am currently using bootstrap-datepicker (https://github.com/eternicode/bootstrap-datepicker), but want to be able to select entire weeks in the calendar (Monday to Sunday)

6条回答

感动是毒 (楼主)

2020-12-23 18:35

You can try it.

Required file:

jquery-1.11.3.js
bootstrap-datepicker.min.js
bootstrap-datepicker.css
bootstrap.min.css

HTML


  
      
    Week Start 
  
  
    Copy  from

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');

Screen Shot

JSFiddle link https://jsfiddle.net/shivamanhar/ddphp8jx/9/

0 讨论(0)

查看其它6个回答