JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://amsul.ca/pickadate.js/vendor/pickadate/lib/picker.js"></script>
<script src="http://amsul.ca/pickadate.js/vendor/pickadate/lib/picker.date.js"></script>
<script src="http://amsul.ca/pickadate.js/vendor/pickadate/lib/picker.time.js"></script>
<link rel="stylesheet" href="http://amsul.ca/pickadate.js/vendor/pickadate/lib/themes/default.css">
<link rel="stylesheet" href="http://amsul.ca/pickadate.js/vendor/pickadate/lib/themes/default.date.css">
<link rel="stylesheet" href="http://amsul.ca/pickadate.js/vendor/pickadate/lib/themes/default.time.css">
<link rel="stylesheet" href="http://amsul.ca/pickadate.js/vendor/pickadate/lib/themes/default.time.css">
Original example:<br/>
<input id="inputDatetime" class="datepicker" type="text" />
<input type="button" id="btn" name="btn" value="disable sundays" />
<input type="button" id="btn2" name="btn2" value="disable mon, tue, sat" />
<br/><br/>
"By the book" example:<br/>
<input id="inputDatetime2" class="datepicker" type="text" />
<input type="button" id="btn3" name="btn3" value="disable fridays" />
JavaScript
$('#inputDatetime').pickadate({
format: 'dd. mmmm yyyy',
formatSubmit: 'yyyy-mm-dd',
selectYears: 2,
selectMonths: true
});
$('#btn').click(function () {
disableDates([1]); //sundays
});
$('#btn2').click(function () {
disableDates([2, 3, 7]); //mondays, tuesdays, saturdays
});
function disableDates(tempValues) {
var disabledDays = [];
$.ajax({
url: '/echo/json/',
dataType: 'json',
async: false,
success: function (data) {
$.each(tempValues, function (i, d) {
disabledDays.push(parseInt(tempValues[i]));
});
}
});
console.log(disabledDays);
var $input = $('#inputDatetime').pickadate();
var picker = $input.pickadate('picker');
picker.set({
disable: disabledDays
});
}
//-------------- Example 2 ----------------------------------------------------
var myvar = $('#inputDatetime2').pickadate({
format: 'dd. mmmm yyyy',
formatSubmit: 'yyyy-mm-dd',
selectYears: 2,
selectMonths: true
});
$('#btn3').click(function () {
disableDates2([6]); //fridays
});
function disableDates2(tempValues) {
var disabledDays2 = [];
$.ajax({
url: '/echo/json/',
dataType: 'json',
async: false,
success: function (data) {
$.each(tempValues, function (i, d) {
disabledDays2.push(parseInt(tempValues[i]));
});
}
});
console.log(disabledDays2);
var picker2 = myvar.pickadate('picker');
picker2.set('disable', disabledDays2);
}