jQuery日历中用于禁用日期的工具提示

本文介绍了jQuery日历中用于禁用日期的工具提示的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我使用jquery ui创建了一个日历控件，其中对选择的日期有一些限制.我的要求是在禁用日期上显示工具提示，例如抱歉，无法选择此日期".有什么办法吗?PFB我的代码:

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>

推荐答案

您可以使用 beforeShowDay 事件，它满足您的需求.它允许您返回:

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

[0]:是/否，表示是否可以选择该日期
[1]:要添加到日期的单元格的CSS类名称，或者是默认表示形式的".
[2]:此日期的可选弹出工具提示.在显示日期选择器的每一天都会调用该函数.

[ 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.

在这种情况下，不使用jQuery UI工具提示插件，而是使用常规"工具提示.

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

代码:

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, '', ''];
            }
        }
    });
});

演示: http://jsfiddle.net/IrvinDominin/cQFKN/

这篇关于jQuery日历中用于禁用日期的工具提示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！