JSFiddle - React, Tailwind, and code Playground
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Datepicker - Display month & year menus</title>
<link rel="stylesheet" href="http://redflowermedia.com/contest/css/themes/base/jquery.ui.all.css">
<link rel="stylesheet" href="http://redflowermedia.com/contest/css/demos.css">
<script src="http://redflowermedia.com/contest/js/jquery-1.5.1.js"></script>
<script src="http://redflowermedia.com/contest/js/ui/jquery.ui.core.js"></script>
<script src="http://redflowermedia.com/contest/js/ui/jquery.ui.widget.js"></script>
<script src="http://redflowermedia.com/contest/js/ui/jquery.ui.datepicker.js"></script>
<script>
var unavailableDates = ["5-7-2011","6-7-2011","7-7-2011","15-7-2011","16-7-2011","17-7-2011" ];
function unavailable(date) {
dmy = date.getDate() + "-" + (date.getMonth()+1) + "-" + date.getFullYear();
if ($.inArray(dmy, unavailableDates) == -1) {
return [true, ""];
} else {
return [false,"","Unavailable"];
}
}
//Function Declaration
function str2date(sdate){ //This function gets a string and return a Date object
var parts = sdate.split("-");
return new Date(parts[2], parseInt(parts[1], 10)-1, parts[0]);
}
$(function() {
$( "#datepicker_1" ).datepicker({
beforeShow: customRange,
beforeShowDay: unavailable,
changeMonth: true,
changeYear: true,
onClose: function() {
$("#datepicker_2").datepicker("show");
}
});
});
$(function() {
$( "#datepicker_2" ).datepicker({
beforeShow: customRange,
beforeShowDay: unavailable,
changeMonth: true,
onClose: function(dateText, inst)
{
//alert(dateText);
var theDate = new Date(Date.parse($(this).datepicker('getDate')));
var maxdate = $.datepicker.formatDate('d-m-yy', theDate);
var...