Monday, 11 March 2013

How to disabled and change color of particular date and display tooltips in datepicker

<html>
<head>

<link rel="stylesheet" href="jquery-ui.css" />
<script src="jquery.js"></script>
<script src="jquery-ui.js"></script>

<style>

.wrapper {
    padding: 10px;
}
td.red span.ui-state-default {
    color: #f00;
}
td.green span.ui-state-default {
    color: #0f0;
}
td.yellow span.ui-state-default {
    color: #700;
}


</style>

<script type="text/javascript">
$(function() {

$('input').datepicker({
dateFormat: "yy-mm-dd",
minDate: "-0d",
    maxDate: "+90d",
    firstDay: 0,
    beforeShowDay: noWeekendsOrHolidaysOrBlockedDates

});

});


function noWeekendsOrHolidaysOrBlockedDates(date)
 {
    //var noWeekend = jQuery.datepicker.noWeekends(date);
    return setHoliDays(date);
}

// set holidays function which is configured in beforeShowDay

function setHoliDays(date)
{
    var day = date.getDay();
    if(day == 5 || day == 6)
        return [false, ''];

    if(date.getDate() == 11 || date.getDate() == 23)
        return [ false, 'holiday red', 'Red!' ];
    if(date.getDate() == 12 || date.getDate() == 22)
        return [ false, 'holiday green', 'Green!' ];
    if(date.getDate() == 24)
        return [ false, 'holiday yellow', 'all ready booked!' ];
    return [true, ''];
}
</script>
</head>


<body>

<div class="wrapper">
    <input type="text" id="b">
</div>
</body>
</html>
If you want to add more date then you can add in  the setHoliDays function as showing in above example.
You can download from here

No comments:

Post a Comment