How To Disable Days Based On User Select Jquery Datepicker
I have following code: html
from
Solution 1:
Try this code
$( function() {
var list=[];
$('input.chkWeek').on('click', function(){
if(!$(this).is(':checked')){
list.push($(this).attr('data-value'));
}else{
var deselect=$(this).attr('data-value');
list = $.grep(list, function(value) {
return value != deselect;
});
}
});
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){
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){
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>
<div class="spromotion-condition-datepickerbox" id="sproid-bookingcond-aplicabledays">
<label name="promo-type" class="radio-inline spromotion-aplicabledays-checkbx">
<input type="checkbox" value="sunday" class="chkWeek" data-value="0" name="condition-aplicable-day" checked>S
</label>
<label name="promo-type" class="radio-inline spromotion-aplicabledays-checkbx">
<input type="checkbox" value="monday" class="chkWeek" name="condition-aplicable-day" data-value="1" checked>M
</label>
<label name="promo-type" class="radio-inline spromotion-aplicabledays-checkbx">
<input type="checkbox" value="tuesday" class="chkWeek" name="condition-aplicable-day" data-value="2" checked>T
</label>
<label name="promo-type" class="radio-inline spromotion-aplicabledays-checkbx">
<input type="checkbox" value="wednesday" class="chkWeek" name="condition-aplicable-day" data-value="3" checked>W
</label>
<label name="promo-type" class="radio-inline spromotion-aplicabledays-checkbx">
<input type="checkbox" value="thursday" class="chkWeek" name="condition-aplicable-day" data-value="4" checked>T
</label>
<label name="promo-type" class="radio-inline spromotion-aplicabledays-checkbx">
<input type="checkbox" value="friday" class="chkWeek" name="condition-aplicable-day" data-value="5" checked>F
</label>
<label name="promo-type" class="radio-inline spromotion-aplicabledays-checkbx">
<input type="checkbox" value="saturday" class="chkWeek" name="condition-aplicable-day" data-value="6" checked>S
</label>
</div>
</div>
Post a Comment for "How To Disable Days Based On User Select Jquery Datepicker"