は、私は次のコードしている

Question

ユーザーの選択jQueryの日付ピッカーをもと日間無効にする方法：

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> 

スクリプト

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

私の要件はの日を有効にすることですユーザーの選択に基づいてデフォルトでは、すべての週の日付が有効になります。たとえば、ユーザーが月曜日を選択し、火曜日に残りの日付の残りの部分をカレンダーから無効にする必要があります。 beforeShowDayまたはこれを修正するための他の方法を使用して、これをどのように行うことができますか。

フィドルのリンクを参照してください。fiddle

Answer 1

は

$(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>

このコードを試してみてください