Is there a way to use the jQuery UI Datepicker widget to select multiple dates?
All help is appreciated! If its not possible to use the jquery UI datepicker then is there something similar that does?
Is there a way to use the jQuery UI Datepicker widget to select multiple dates?
All help is appreciated! If its not possible to use the jquery UI datepicker then is there something similar that does?
When you modifiy it a little, it works regardless which dateFormat you have set.
$("#datepicker").datepicker({
dateFormat: "@", // Unix timestamp
onSelect: function(dateText, inst){
addOrRemoveDate(dateText);
},
beforeShowDay: function(date){
var gotDate = $.inArray($.datepicker.formatDate($(this).datepicker('option', 'dateFormat'), date), dates);
if (gotDate >= 0) {
return [false,"ui-state-highlight", "Event Name"];
}
return [true, ""];
}
});
<div id="calendar"></div>
<script>
$(document).ready(function() {
var days = [];
$('#calendar').datepicker({
dateFormat: 'yymmdd',
showWeek: true, showOtherMonths: false, selectOtherMonths: false,
navigationAsDateFormat: true, prevText: 'MM', nextText: 'MM',
onSelect: function(d) {
var i = $.inArray(d, days);
if (i == -1)
days.push(d);
else
days.splice(i, 1);
},
beforeShowDay: function(d) {
return ([true, $.inArray($.datepicker.formatDate('yymmdd', d), days) == -1 ? 'ui-state-free' : 'ui-state-busy']);
}
});
});
</script>
NOTE: You can prefill days with a list of dates like '20190101' with a piece of code in PHP.
Add 2 lines to your CSS:
#calendar .ui-state-busy a {background:#e6e6e6 !important;}
#calendar .ui-state-free a {background:none !important;}
To get the list of days selected by the calendar in a <form>:
<div id="calendar"></div>
<form method="post">
<input type="submit" name="calendar_get" id="calendar_get" value="Validate" />
</form>
Add this to the <script>:
$('#calendar_get').click(function() {
$(this).append('<input type="hidden" name="calendar_days" value="' + days.join(',') + '" />');
});
Apply implode on the string in $_POST['calendar_days'] and map strtotime to all the formatted dates.