Wie Tage zu deaktivieren, basierend auf Benutzer wählen Jquery Datepicker

Question

Ich habe folgenden Code:

html

<p>from</p> 
<input type="text" class="spromotion-input-inbody spromotion-input-datepick" id="sproid-bookingcondition-datefrom"> 
<p>to</p> 
<input type="text" class="spromotion-input-inbody spromotion-input-datepick" id="sproid-bookingcondition-dateto"> 

<p> 
    select days of the week 
</p> 

<div> 
    <div class="spromotion-condition-datepickerbox" id="sproid-bookingcond-aplicabledays"> 
     <label name="promo-type" class="radio-inline spromotion-aplicabledays-checkbx"> 
      <input type="checkbox" value="sunday" name="condition-aplicable-day" checked>S 
     </label> 
     <label name="promo-type" class="radio-inline spromotion-aplicabledays-checkbx"> 
      <input type="checkbox" value="monday" name="condition-aplicable-day" checked>M 
     </label> 
     <label name="promo-type" class="radio-inline spromotion-aplicabledays-checkbx"> 
      <input type="checkbox" value="tuesday" name="condition-aplicable-day" checked>T 
     </label> 
     <label name="promo-type" class="radio-inline spromotion-aplicabledays-checkbx"> 
      <input type="checkbox" value="wednesday" name="condition-aplicable-day" checked>W 
     </label> 
     <label name="promo-type" class="radio-inline spromotion-aplicabledays-checkbx"> 
      <input type="checkbox" value="thursday" name="condition-aplicable-day" checked>T 
     </label> 
     <label name="promo-type" class="radio-inline spromotion-aplicabledays-checkbx"> 
      <input type="checkbox" value="friday" name="condition-aplicable-day" checked>F 
     </label> 
     <label name="promo-type" class="radio-inline spromotion-aplicabledays-checkbx"> 
      <input type="checkbox" value="saturday" name="condition-aplicable-day" checked>S 
     </label> 
    </div> 
</div> 

Skript

$(function() { 
    var dateFormat = "mm/dd/yy", 
     from = $("#sproid-bookingcondition-datefrom") 
     .datepicker({ 
      defaultDate: "+1w", 
      changeMonth: true, 
      numberOfMonths: 1 
     }) 
     .on("change", function() { 
      to.datepicker("option", "minDate", getDate(this)); 
     }), 
     to = $("#sproid-bookingcondition-dateto").datepicker({ 
     defaultDate: "+1w", 
     changeMonth: true, 
     numberOfMonths: 1 
     }) 
     .on("change", function() { 
     from.datepicker("option", "maxDate", getDate(this)); 
     }); 

    function getDate(element) { 
     var date; 
     try { 
     date = $.datepicker.parseDate(dateFormat, element.value); 
     } catch(error) { 
     date = null; 
     } 

     return date; 
    } 
    }); 

Meine Forderung ist Tage der zu ermöglichen Woche basierend auf Benutzerauswahl. Standardmäßig sind alle Wochendaten aktiviert. Wenn der Benutzer beispielsweise Montag und Dienstag auswählt, müssen die restlichen Daten im Kalender deaktiviert werden. Wie ist das möglich mit beforeShowDay oder einem anderen Ansatz, um dies zu beheben.

Siehe Link für Geige: fiddle

Answer 1

Versuchen Sie diesen Code

$(function() { 
 
    var list=[]; 
 
    $('input.chkWeek').on('click', function(){ 
 
\t if(!$(this).is(':checked')){ 
 
\t \t list.push($(this).attr('data-value')); 
 
\t }else{ 
 
\t \t var deselect=$(this).attr('data-value'); 
 
\t \t list = $.grep(list, function(value) { 
 
\t \t return value != deselect; 
 
\t \t }); 
 
\t } 
 
}); 
 
    var dateFormat = "mm/dd/yy", 
 
     from = $("#sproid-bookingcondition-datefrom") 
 
     .datepicker({ 
 
      defaultDate: "+1w", 
 
      changeMonth: true, 
 
      numberOfMonths: 1, 
 
      beforeShowDay: function(day) { 
 
      var day = day.getDay(); 
 
      var c; 
 
      for(var i=0;i<list.length;i++){ 
 
       if(list[i]==day){ 
 
       \t c=day; 
 
       } 
 
      } 
 
      if (day ==c) { 
 
       return [false, "disabled_week"] 
 
      } else { 
 
       return [true, "selectable_week"] 
 
      } 
 
     } 
 
     }) 
 
     .on("change", function() { 
 
      to.datepicker("option", "minDate", getDate(this)); 
 
     }), 
 
     to = $("#sproid-bookingcondition-dateto").datepicker({ 
 
     defaultDate: "+1w", 
 
     changeMonth: true, 
 
     numberOfMonths: 1, 
 
     beforeShowDay: function(day) { 
 
      var day = day.getDay(); 
 
      var c; 
 
      for(var i=0;i<list.length;i++){ 
 
       if(list[i]==day){ 
 
       \t c=day; 
 
       } 
 
      } 
 
      if (day ==c) { 
 
       return [false, "disabled_week"] 
 
      } else { 
 
       return [true, "selectable_week"] 
 
      } 
 
     } 
 
     }) 
 
     .on("change", function() { 
 
     from.datepicker("option", "maxDate", getDate(this)); 
 
     }); 
 

 
    function getDate(element) { 
 
     var date; 
 
     try { 
 
     date = $.datepicker.parseDate(dateFormat, element.value); 
 
     } catch(error) { 
 
     date = null; 
 
     } 
 
     return date; 
 
    } 
 

 
<!-------> 
 
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script> 
 
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> 
 
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css"> 
 
<p>from</p> 
 
<input type="text" class="spromotion-input-inbody spromotion-input-datepick" id="sproid-bookingcondition-datefrom"> 
 
<p>to</p> 
 
<input type="text" class="spromotion-input-inbody spromotion-input-datepick" id="sproid-bookingcondition-dateto"> 
 

 
<div> 
 
\t <div class="spromotion-condition-datepickerbox" id="sproid-bookingcond-aplicabledays"> 
 
\t \t <label name="promo-type" class="radio-inline spromotion-aplicabledays-checkbx"> 
 
\t \t <input type="checkbox" value="sunday" class="chkWeek" data-value="0" name="condition-aplicable-day" checked>S 
 
\t \t </label> 
 
\t \t <label name="promo-type" class="radio-inline spromotion-aplicabledays-checkbx"> 
 
\t \t <input type="checkbox" value="monday" class="chkWeek" name="condition-aplicable-day" data-value="1" checked>M 
 
\t \t </label> 
 
\t \t <label name="promo-type" class="radio-inline spromotion-aplicabledays-checkbx"> 
 
\t \t <input type="checkbox" value="tuesday" class="chkWeek" name="condition-aplicable-day" data-value="2" checked>T 
 
\t \t </label> 
 
\t \t <label name="promo-type" class="radio-inline spromotion-aplicabledays-checkbx"> 
 
\t \t <input type="checkbox" value="wednesday" class="chkWeek" name="condition-aplicable-day" data-value="3" checked>W 
 
\t \t </label> 
 
\t \t <label name="promo-type" class="radio-inline spromotion-aplicabledays-checkbx"> 
 
\t \t <input type="checkbox" value="thursday" class="chkWeek" name="condition-aplicable-day" data-value="4" checked>T 
 
\t \t </label> 
 
\t \t <label name="promo-type" class="radio-inline spromotion-aplicabledays-checkbx"> 
 
\t \t <input type="checkbox" value="friday" class="chkWeek" name="condition-aplicable-day" data-value="5" checked>F 
 
\t \t </label> 
 
\t \t <label name="promo-type" class="radio-inline spromotion-aplicabledays-checkbx"> 
 
\t \t <input type="checkbox" value="saturday" class="chkWeek" name="condition-aplicable-day" data-value="6" checked>S 
 
\t \t </label> 
 
\t </div> 
 
</div>