web-dev-qa-db-fra.com

Bootstrap datepicker: sélectionne la semaine entière et met l'intervalle de la semaine dans le champ de saisie

J'utilise actuellement bootstrap-datepicker (/ https://github.com/eternicode/bootstrap-datepicker ), mais je veux pouvoir sélectionner des semaines entières dans l'agenda (du lundi au dimanche) et afficher le intervalle hebdomadaire dans le champ de saisie que je sélectionne. L’intervalle par défaut dans le champ de saisie doit correspondre à la semaine dans laquelle vous vous trouvez. 

J'ai vu une méthode quelque peu similaire utilisant l'interface utilisateur jQuery pour afficher l'intervalle sur jsfiddle .

C

J'ai essayé d'éditer ce code pour fonctionner avec bootstrap-datepicker, sans aucune chance.

Avez-vous une idée de la façon dont je peux implémenter cela pour bootstrap-datepicker? : The steps are outlined in this image

Toute aide est grandement appréciée!

jquerybootstrap-datepicker
10
Rafael code

J'ai utilisé le sélecteur de date-heure Bootstrap dans mon projet. Le même problème que le vôtre a été rencontré.

Vous avez la solution ci-dessous, vous pouvez l'essayer.

Fichiers requis:

  1. Bootstrap.css
  2. Bootstrapdatetime picker css (vous ne pouvez utiliser que datepicker au lieu de datetime)
  3. jquery.js
  4. Bootstrap.js
  5. moment.js
  6. Bootstrap Date Time Picker js (Encore une fois, vous ne pouvez utiliser que datepicker au lieu de 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: Utilisé le moment.js pour calculer le début et la fin de la semaine.

//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;
}

Lien vers le code de travail dans JSFiddle:

https://jsfiddle.net/Prakash_Thete/9usq3enn/

34
Prakash Thete

J'ai optimisé les exemples mentionnés ci-dessus.

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;
}

Vérifiez le lien de démonstration: https://jsfiddle.net/IamMHussain/ozdrdbqf/1/

8
IamMHussain

Je travaille actuellement sur un projet avec les mêmes exigences. Je ne sais pas où je l'ai trouvé, mais ce violon sur http://codepen.io/chanduvkm/pen/yeXKGW aborde presque le même problème d'une manière légèrement différente, mais en utilisant la bibliothèque bootstrap-datepicker, vous êtes utilise actuellement. La valeur par défaut pourrait être facilement ajoutée. Cependant, le code CSS de la semaine active échoue lorsque l'option "weekStart: 1" est définie, ce dont j'ai réellement besoin (la semaine ISO-8601 commence le lundi).

    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());
});

En réponse à la réponse précédente de prakash, j'ai lancé le violon pour commencer lundi: https://jsfiddle.net/skfw0k53/ en ajoutant ce qui suit:

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

Donc, fondamentalement, deux bibliothèques différentes pour aborder le problème.

3
rtw

Tu peux l'essayer.

Fichier requis:

jquery-1.11.3.js
bootstrap-datepicker.min.js
bootstrap-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');

Capture d'écran

 enter image description here

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

0
Shiva Manhar