2

我使用 jquery ui 创建了一个日历控件，对要选择的日期有一些限制。我的要求是在禁用日期上显示工具提示，例如“抱歉，此日期不可选择”。有没有办法解决这个问题？PFB我的代码：

<!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>
4

1 回答 1

1

您可以使用该beforeShowDay事件，它符合您的需求。它允许您返回：

一个以日期为参数的函数，并且必须返回一个包含以下内容的数组：

  • [ 0]：true/false 表示此日期是否可选
  • [ 1]: 添加到日期单元格的 CSS 类名或默认显示的 ""
  • [ 2]：此日期的可选弹出工具提示 该函数在日期选择器中的每一天被调用，然后才显示。

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

代码：

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/

于 2013-08-14T09:47:47.647 回答