Question

我使用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>

Answer 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/

禁用日期的jquery日历中的工具提示

1 个答案: