JSFiddle - React, Tailwind, and code Playground
by gildus
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Datepicker</title>
</head>
<body>
<div id="datepicker"></div>
<div class="entrada">Entrada</div>
<div class="salida">Salida</div>
<div class="ambos">Ambos</div>
</body>
</html>
CSS
.ambos{
background-image:none!important;
background-color:#FF9999;
}
.entrada{
background-image:none!important;
background-color:#33CCFF;
}
.salida{
background-image:none!important;
background-color:#66FF33;
}
.salida a,.entrada a, .ambos a{
background:none!important;
}
JavaScript
var entrada = ["2012-06-01","2012-06-06","2012-06-09","2012-06-10","2012-06-11"];
var salida = ["2012-06-19","2012-06-24","2012-06-25","2012-06-05","2012-04-10"];
$(function() {
var calendar = $( "#datepicker" ).datepicker({
inline: true,
constrainInput: true,
beforeShowDay: highlightOdds,
onSelect: selDate
});
});
function highlightOdds(date)
{
var m = date.getMonth(),
d = date.getDate(),
y = date.getFullYear();
var f = y+'-'+pad(m+1,2)+'-'+pad(d,2);
if($.inArray(f,entrada)>=0 || $.inArray(f,salida)>=0){
//console.log(f);
if($.inArray(f,entrada)>=0 && $.inArray(f,salida)>=0){
return [true, 'ambos'];
}else{
if($.inArray(f,entrada)>=0){
return [true, 'entrada'];
} else{
return [true, 'salida'];
}
}
} else {
return [true,''];
}
}
function selDate(dateText, inst)
{
//console.log(dateText);
alert(dateText);
}
function pad(number, length)
{
var str = '' + number;
while (str.length < length) {
str = '0' + str;
}
return str;
}