JQuery ui -日期选择器，禁用特定日期

hvvq6cgz 于 2023-06-05 发布在 jQuery

关注(0)|答案(4)|浏览(173)

我正在尝试使用jQuery UI禁用特定日期。但是，我没有运气，这是我的代码：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="development-bundle/themes/ui-lightness/jquery.ui.all.css">
<style type="text/css">
.ui-datepicker .preBooked_class { background:#111111; }
.ui-datepicker .preBooked_class span { color:#999999; }
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>jQuery UI Datepicker</title>
<script type="text/javascript" src="development-bundle/jquery-1.7.1.js"></script>
<script type="text/javascript" src="development-bundle/ui/jquery.ui.core.js"></script>
<script type="text/javascript" src="development-bundle/ui/jquery.ui.widget.js"></script>
<script type="text/javascript" src="development-bundle/ui/jquery.ui.datepicker.js"></script>

示例化datepicker对象

<script type="text/javascript">

    $(function() {
    $( "#iDate" ).datepicker({

    dateFormat: 'dd MM yy',
    beforeShowDay: checkAvailability
    });

    })

获取日历中要禁用的日期

var unavailableDates = ["9-3-2012","14-3-2012","15-3-2012"];

function unavailable(date) {
  dmy = date.getDate() + "-" + (date.getMonth()+1) + "-" + date.getFullYear();
  if ($.inArray(dmy, unavailableDates) == -1) {
    return [true, ""];
  } else {
    return [false,"","Unavailable"];
  }
}

$('#iDate').datepicker({ beforeShowDay: unavailable });

</script>
</head>
<body>
<input id="iDate">
</body>
</html>

好像没什么用，有什么办法解决吗。干杯。

jquery

来源：https://stackoverflow.com/questions/9742289/jquery-ui-date-picker-disabling-specific-dates

4条答案

按热度按时间

uidvcgyl1#

看起来你在一个输入上调用了datepicker两次。这有点难以理解你的代码，但是如果你重新组织它并删除第二个datepicker调用，一切都应该正常：

<script type="text/javascript">
    var unavailableDates = ["9-3-2012", "14-3-2012", "15-3-2012"];

    function unavailable(date) {
        dmy = date.getDate() + "-" + (date.getMonth() + 1) + "-" + date.getFullYear();
        if ($.inArray(dmy, unavailableDates) == -1) {
            return [true, ""];
        } else {
            return [false, "", "Unavailable"];
        }
    }

    $(function() {
        $("#iDate").datepicker({
            dateFormat: 'dd MM yy',
            beforeShowDay: unavailable
        });

    });
</script>

查看这篇文章：disable-dates-in-datepicker

赞(0）回复(0）举报 2023-06-05

svmlkihl2#

如果你想让你的电脑自动关机，你可以按照下面的步骤来做：

$scope.dateOptions = {
            beforeShowDay: unavailable
          };

          function unavailable(date) {
                if (date.getDay() === 0) {
                    return [true, ""];
                } else {
                    return [false, "", "Unavailable"];
                }
          }

上述选项将仅启用星期日，而所有其他日期将被禁用。希望这能帮上忙。

赞(0）回复(0）举报 2023-06-05

jm81lzqq3#

var unavailableDates = ["23-09-2022", "24-09-2022", "25-09-2022"];
$('#res_date').datepicker({
  startDate: '-0m', // this for disable past days
  format: 'dd/mm/yyyy',
  todayHighlight:'TRUE',
  autoclose: true,
  datesDisabled: unavailableDates // for disable your specific days
});

赞(0）回复(0）举报 2023-06-05

umuewwlo4#

要将答案翻转为 available dates，您现在可以使用javascript includes()并返回数组中的bool值。

var availableDates = ["5-6-2023", "6-6-2023", "7-6-2023"];

function available(date) {
    dmy = date.getDate() + "-" + (date.getMonth() + 1) + "-" + date.getFullYear();

    return [availableDates.includes(dmy)];
}

$("#iDate").datepicker({
    dateFormat: 'dd MM yy',
    beforeShowDay: available
});

数组中的第二个元素是css类，第三个参数是可选的工具提示（https：//api.jqueryui.com/datepicker/#option-beforeShowDay）
值得一提的是，截至2023年，Jquery UI即将过时，但它仍然是一个相当不错的工具集。

赞(0）回复(0）举报 2023-06-05

我来回答

JQuery ui -日期选择器，禁用特定日期

4条答案

相关问题

热门标签

最新问答