Comment styler le premier et le dernier élément de la plage de dates sélectionnée dans JQuery datepicker?

Question

Je ne peux pas résoudre une chose, comment puis-je styler le premier et le dernier élément de la plage de dates sélectionnée dans JQuery UI Datepicker? J'ai le code:

$(document).ready(function() { 
 
     // jquery datepicker settings 
 
     $(function() { 
 
      $("#datepicker").datepicker({ 
 
       numberOfMonths: 3, 
 
       showButtonPanel: false, 
 
       minDate: 0, 
 
       beforeShowDay: function(date) { 
 
        var date1 = $.datepicker.parseDate($.datepicker._defaults.dateFormat, $('#start-date').val()); 
 
        var date2 = $.datepicker.parseDate($.datepicker._defaults.dateFormat, $('#end-date').val()); 
 
        if (date >= date1 && date <= date2) { 
 
         return [true, 'ui-state-selected-range', '']; 
 
        } 
 
        return [true, '', '']; 
 
       }, 
 
       onSelect: function(dateText, inst) { 
 
        var date1 = $.datepicker.parseDate($.datepicker._defaults.dateFormat, $('#start-date').val()); 
 
        var date2 = $.datepicker.parseDate($.datepicker._defaults.dateFormat, $('#end-date').val()); 
 
        if (!date1 || date2) { 
 
         $('#start-date').val(dateText); 
 
         $('.start-date-visible').text(dateText); 
 
         $('#end-date').val(''); 
 
         $('.end-date-visible').text(''); 
 
         $(this).datepicker('option', dateText); 
 
        } else { 
 
         $('.end-date-visible').text(dateText); 
 
         $('#end-date').val(dateText); 
 
         $(this).datepicker('option', null); 
 
        } 
 
       } 
 
      }); 
 
     }); 
 
    });

td.ui-state-selected-range { 
 
    border: none !important; 
 
    padding: 1px 0 1px 0 !important; 
 
    background: none !important; 
 
    overflow:hidden; 
 
} 
 
td.ui-state-selected-range a { 
 
    background-color: #f8c3b1; 
 
    border: 1px solid #f29676 !important; 
 
    border-right: none !important; 
 
    border-left: none !important; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script> 
 
<link rel="stylesheet" type="text/css" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> 
 

 
<input type="text" id="start-date" style="visibility: hidden"> 
 
<input type="text" id="end-date" style="visibility: hidden"> 
 
<div class="start-date-visible"></div> 
 
<div class="end-date-visible"></div> 
 
<div id="datepicker"></div>

je dois le style premier et dernier éléments sélectionnés et aussi des éléments entre eux, il devrait ressembler à ceci:

Je aucune idée de comment faire cela et de compter sur votre aide!

Answer 1

Vous pouvez faire en beforeShowDay et vérifier si date est la date de début et de fin puis appliquer votre CSS.

if (date1 && date2 && date && (date1.getTime() == date.getTime() || date2.getTime() == date.getTime())) { 
      return [true, 'ui-red', '']; 
     } 

J'ai ajouté ui-red classe pour le début et la fin de la journée.

$(document).ready(function() { 
 
    // jquery datepicker settings 
 
    $(function() { 
 
    $("#datepicker").datepicker({ 
 
     numberOfMonths: 3, 
 
     showButtonPanel: false, 
 
     minDate: 0, 
 
     beforeShowDay: function(date) { 
 

 
     var date1 = $.datepicker.parseDate($.datepicker._defaults.dateFormat, $('#start-date').val()); 
 
     var date2 = $.datepicker.parseDate($.datepicker._defaults.dateFormat, $('#end-date').val()); 
 
     if (date1 && date && (date1.getTime() == date.getTime())) { 
 
      return [true, 'ui-red-start', '']; 
 
     } 
 
     if (date2 && date && (date2.getTime() == date.getTime())) { 
 
      return [true, 'ui-red-end', '']; 
 
     } 
 

 
     if (date >= date1 && date <= date2) { 
 
      return [true, 'ui-state-selected-range', '']; 
 
     } 
 
     var d = date.getTime(); 
 

 
     return [true, '', '']; 
 
     }, 
 
     onSelect: function(dateText, inst) { 
 
     var date1 = $.datepicker.parseDate($.datepicker._defaults.dateFormat, $('#start-date').val()); 
 
     var date2 = $.datepicker.parseDate($.datepicker._defaults.dateFormat, $('#end-date').val()); 
 
     if (!date1 || date2) { 
 
      $('#start-date').val(dateText); 
 
      $('.start-date-visible').text(dateText); 
 
      $('#end-date').val(''); 
 
      $('.end-date-visible').text(''); 
 
      $(this).datepicker('option', dateText); 
 
     } else { 
 
      if (new Date(dateText) < date1) { 
 
      var sDate = $('#start-date').val(); 
 
      $('.start-date-visible').text(dateText); 
 
      $('#start-date').val(dateText); 
 
      $(this).datepicker('option', null); 
 

 
      $('.end-date-visible').text(sDate); 
 
      $('#end-date').val(sDate); 
 

 
      } else { 
 
      $('.end-date-visible').text(dateText); 
 
      $('#end-date').val(dateText); 
 
      $(this).datepicker('option', null); 
 
      } 
 
     } 
 
     } 
 
    }); 
 
    }); 
 
});

td.ui-state-selected-range a { 
 
    background: none !important; 
 
    border: none !important; 
 
} 
 

 
td { 
 
    width: 40px; 
 
    height: 40px; 
 
} 
 

 
td a { 
 
    text-align: center !important; 
 
} 
 

 
.ui-red-start { 
 
    background: #F29676; 
 
    border-radius: 50% 0 0 50%; 
 
} 
 

 
.ui-red-end { 
 
    background: #F29676; 
 
    border-radius: 0 50% 50% 0; 
 
} 
 

 
.ui-red-start .ui-state-default, 
 
.ui-red-end .ui-state-default { 
 
    border: none !important; 
 
    ; 
 
    background: none !important; 
 
    ; 
 
    font-weight: normal; 
 
    color: #454545 !important; 
 
    ; 
 
} 
 

 
.ui-state-selected-range { 
 
    border: none !important; 
 
    font-weight: normal; 
 
    background: #f8c3b1 !important; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script> 
 
<link rel="stylesheet" type="text/css" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> 
 

 

 
<input type="text" id="start-date" style="visibility: hidden"> 
 
<input type="text" id="end-date" style="visibility: hidden"> 
 
<div class="start-date-visible"></div> 
 
<div class="end-date-visible"></div> 
 
<div id="datepicker"></div>