Tooltip in jquery calendar for disabled dates

StackOverflow https://stackoverflow.com/questions/18223796

Question

I have created a calendar control using jquery ui with some restrictions on dates to be selected. My requirement is to show a tooltip on disabled dates like "Sorry this date is not selectable" . Is there any way around on this? PFB my code:

<!doctype html> 
<html><head>
  <meta charset="utf-8" /> 
  <title>jQuery UI Datepicker </title>
  <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
  <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js">
  </script>  <script type="text/javascript" src="http://code.jquery.com/ui/1.10.3/jquery-ui.js">
  </script> 
<script>
$(function () {
    $("#datepicker").datepicker({
        minDate: -0,
        maxDate: "+1M +2D",
        showOn: "button",
        buttonImage: "calendar.png",
        buttonImageOnly: true,
        dateFormat: 'D dd MM yy',
        showAnim: "clip"
    });
    $("#datepicker").change(function () {
        updateDate();
    });
    $("#addDate").click(function () {
        addDaysToDate();
    });
    $("#subtractDate").click(function () {
        subtractDaysToDate();
    });
});

function updateDate() {
    var today = new Date();
    var tomorrow = new Date();
    tomorrow.setDate(today.getDate() + 1);
    var date2 = $('#datepicker').datepicker('getDate');

    date2.setHours(0,0,0,0);
    today.setHours(0,0,0,0);
    tomorrow.setHours(0,0,0,0);

    if (date2.getTime() == today.getTime()) {
     //document.getElementById('datepicker').value=document.getElementById('datepicker').value+" (TODAY)";

       $('#datepicker').val($('#datepicker').val() + " (TODAY)");
    } else if (date2.getTime() == tomorrow.getTime()) {
    //document.getElementById('datepicker').value=document.getElementById('datepicker').value+" (TOMORROW)";

       $('#datepicker').val($('#datepicker').val() + " (TOMORROW)");
    } else {
        $('#datepicker').text("");

    }
}
function addDaysToDate() {
    var date2 = $('#datepicker').datepicker('getDate');
    date2.setDate(date2.getDate() + 1);
    $('#datepicker').datepicker('setDate', date2);
    $('#datepicker').change();
}

function subtractDaysToDate() {
    var date2 = $('#datepicker').datepicker('getDate');
    date2.setDate(date2.getDate() - 1);
    $('#datepicker').datepicker('setDate', date2);
    $('#datepicker').change();
}


</script>
</head>
<body>

<input type="image" id="subtractDate" src="datedecrementer.png" />
<input type="text" id="datepicker"  style="width:220px;border:0" />
<input type="image" id="addDate" src="dateincrementer.png" />



</body></html>
Was it helpful?

Solution

You can use the beforeShowDay event, it fits your needs. It allows you to return:

A function that takes a date as a parameter and must return an array with:

  • [ 0]: true/false indicating whether or not this date is selectable
  • [ 1]: a CSS class name to add to the date's cell or "" for the default presentation
  • [ 2]: an optional popup tooltip for this date The function is called for each day in the datepicker before it is displayed.

In this case is not used the jQuery UI tooltip plugin, but a "regular" tooltip.

Code:

var disabledTool = new Date();
disabledTool.setDate(disabledTool.getDate() - 2);
disabledTool.setHours(0, 0, 0, 0);

$(function () {
    $("#datepicker").datepicker({
        minDate: -0,
        maxDate: "+1M +2D",
        showOn: "button",
        dateFormat: 'D dd MM yy',
        showAnim: "clip",
        beforeShowDay: function (date) {
            var tooltipDate = "I'm DISABLED!!";
            if (date.getTime() == disabledTool.getTime()) {
                return [true, '', tooltipDate];
            } else {
                return [true, '', ''];
            }
        }
    });
});

Demo: http://jsfiddle.net/IrvinDominin/cQFKN/

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top