Tooltip in jquery calendar for disabled dates

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

题

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>
有帮助吗？

解决方案

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/

许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top