当前位置: 首页 > 面试题库 >

jQuery UI-日期选择器,禁用特定日期

简烨烁
2023-03-14
问题内容

我正在尝试使用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>

它似乎没有用,我知道如何解决这个问题。干杯。


问题答案:

好像您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>


 类似资料:
  • 问题内容: 我想在的日期选择器中禁用特定的日期。 我正在使用CSS作为组件。 我要禁用的日期将根据组合中先前值的选择而动态更改。 我相信应该可以,尽管不确定。 我怎样才能做到这一点 ? 问题答案: 我假设您正在使用Angular-UI中的指令。该属性使您可以禁用某些日期(例如,周末)。看到这个笨蛋http://plnkr.co/edit/gGAU0L?p=preview 如果要基于选择动态禁用日期

  • 我想禁用日期时间选择器中的时间选择器。我正在使用一些参数,如picTime: false和form:"dd MM yyyy"。但是没有用...我正在使用http://eonasdan.github.io/bootstrap-datetimepicker/ Plzz给出解决方案

  • 我已经记录了用于从日期选择器中选择日期的selenium代码。在运行测试用例时,日期选择器会弹出并正确突出显示所选日期。但是没有选择日期。代码如下所示:- 此异常仅出现在记录的代码中。我使用的是selenium-server-standalone-2 . 45 . 0 jar。

  • 问题内容: 我正在尝试在连接到Google日历的UI Bootstrap Datepicker中禁用某个日期,如果该日期已具有3个或更多事件。 到目前为止,我是使用Angular Factory获得事件数组的,如下所示: 日期列表需要更多的预处理,因此我有一个函数可以将只有三个或三个以上条目的日期放在范围变量中: 现在,这终于是我修改后的默认UI Bootstrap日期选择器日期禁用功能: 它可以

  • 本文向大家介绍Android 日期选择器,包括了Android 日期选择器的使用技巧和注意事项,需要的朋友参考一下 示例 DatePicker允许用户选择日期。创建的新实例时DatePicker,我们可以设置初始日期。如果我们不设置初始日期,那么默认情况下将设置当前日期。 我们可以DatePicker使用DatePickerDialog或通过使用DatePicker小部件创建我们自己的布局来向用户

  • DatePicker 日期选择器 用于选择或输入日期 选择日 以「日」为基本单位,基础的日期选择控件 基本单位由type属性指定。快捷选项需配置picker-options对象中的shortcuts,禁用日期通过 disabledDate 设置,传入函数 <template> <div class="block"> <span class="demonstration">默认</spa