在 jquery 日期选择器中启用一个特定日期
Enable one specific date in jquery datepicker
我的网站上有一个 jQuery 日期选择器,我禁用了每周的第一天和第二天(星期一和星期二)。我还有一系列禁用天数(这是有效的)。现在我也想启用 24-12-2018,但我卡在这里了。
我的代码:
var vakantie = ["25-12-2018", "26-12-2018", "27-12-2018", "28-12-2018", "29-12-2018", "30-12-2018", "31-12-2018"];
function nietbeschikbaar(dt) {
var datestring = jQuery.datepicker.formatDate('dd-mm-yy', dt);
return [dt.getDay() == 1 || dt.getDay() == 2 ? false : true && vakantie.indexOf(datestring) == -1];
};
jQuery("#cfgen-element-7-6").datepicker(jQuery.datepicker.regional["nl"]);
jQuery("#cfgen-element-7-6").datepicker("option", "changeMonth", true);
jQuery("#cfgen-element-7-6").datepicker("option", "changeYear", true);
jQuery("#cfgen-element-7-6").datepicker("option", "minDate", +1);
jQuery("#cfgen-element-7-6").datepicker("option", "firstDay", 1);
jQuery("#cfgen-element-7-6").datepicker("option", "dateFormat", "dd-mm-yy");
jQuery("#cfgen-element-7-6").datepicker("option", "yearRange", "-0:+70");
jQuery("#cfgen-element-7-6").datepicker("option", "beforeShowDay", nietbeschikbaar);
我还设法让这段代码只启用 12 月 24 日,我想启用它:
var enableDays = ["24-12-2018"];
function enableAllTheseDays(date) {
var sdate = $.datepicker.formatDate('dd-mm-yy', date)
if ($.inArray(sdate, enableDays) != -1) {
return [true];
}
return [false];
}
jQuery("#datepicker").datepicker("option", "beforeShowDay", enableAllTheseDays);
如果可能的话,我想结合这些功能。所以要求:
- 每周的第一天和第二天 禁用
- 'vakantie'数组禁用
- 24-12-2018(12 月 24 日)启用
var vakantie = ["25-12-2018", "26-12-2018", "27-12-2018", "28-12-2018", "29-12-2018", "30-12-2018", "31-12-2018"];
var enableDays = ["24-12-2018"];
$("#datepicker").datepicker({beforeShowDay: function(dt) {
var datestring = $.datepicker.formatDate('dd-mm-yy', dt);
if($.inArray(datestring, enableDays) != -1) {
return [true];
}
else{
return [dt.getDay() == 1 || dt.getDay() == 2 ? false : true && vakantie.indexOf(datestring) == -1 ];
}
}});
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery UI Datepicker - Default functionality</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<body>
<p>Date: <input type="datepicker" id="datepicker"></p>
</body>
试试这个..
$("#datepicker").datepicker({beforeShowDay: function(dt) {
var datestring = $.datepicker.formatDate('dd-mm-yy', dt);
if($.inArray(datestring, enableDays) != -1) {
return [true];
}
else{
return [dt.getDay() == 1 || dt.getDay() == 2 ? false : true && vakantie.indexOf(datestring) == -1 ];
}
}});
只需在 beforeShowDay
函数中使用以下条件。它基本上为指定日期创建了一个例外:
var override = ["24-12-2018"];
// ...
var available = (dt.getDay() == 1 || dt.getDay() == 2 || vakantie.indexOf(datestring) >= 0) && (override.indexOf(datestring) === -1)
? false
: true;
return [available];
var vakantie = ["25-12-2018", "26-12-2018", "27-12-2018", "28-12-2018", "29-12-2018", "30-12-2018", "31-12-2018"];
var override = ["24-12-2018"];
function nietbeschikbaar(dt) {
var datestring = jQuery.datepicker.formatDate('dd-mm-yy', dt);
var available = (dt.getDay() == 1 || dt.getDay() == 2 || vakantie.indexOf(datestring) >= 0) && (override.indexOf(datestring) === -1)
? false
: true;
return [available];
}
jQuery("#cfgen-element-7-6").datepicker(jQuery.datepicker.regional["nl"]);
jQuery("#cfgen-element-7-6").datepicker("option", "changeMonth", true);
jQuery("#cfgen-element-7-6").datepicker("option", "changeYear", true);
jQuery("#cfgen-element-7-6").datepicker("option", "minDate", +1);
jQuery("#cfgen-element-7-6").datepicker("option", "firstDay", 1);
jQuery("#cfgen-element-7-6").datepicker("option", "dateFormat", "dd-mm-yy");
jQuery("#cfgen-element-7-6").datepicker("option", "yearRange", "-0:+70");
jQuery("#cfgen-element-7-6").datepicker("option", "beforeShowDay", nietbeschikbaar);
@import url("https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/blitzer/jquery-ui.min.css");
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<p>Navigate to December 2018</p>
<p><input id="cfgen-element-7-6"></p>
我的网站上有一个 jQuery 日期选择器,我禁用了每周的第一天和第二天(星期一和星期二)。我还有一系列禁用天数(这是有效的)。现在我也想启用 24-12-2018,但我卡在这里了。
我的代码:
var vakantie = ["25-12-2018", "26-12-2018", "27-12-2018", "28-12-2018", "29-12-2018", "30-12-2018", "31-12-2018"];
function nietbeschikbaar(dt) {
var datestring = jQuery.datepicker.formatDate('dd-mm-yy', dt);
return [dt.getDay() == 1 || dt.getDay() == 2 ? false : true && vakantie.indexOf(datestring) == -1];
};
jQuery("#cfgen-element-7-6").datepicker(jQuery.datepicker.regional["nl"]);
jQuery("#cfgen-element-7-6").datepicker("option", "changeMonth", true);
jQuery("#cfgen-element-7-6").datepicker("option", "changeYear", true);
jQuery("#cfgen-element-7-6").datepicker("option", "minDate", +1);
jQuery("#cfgen-element-7-6").datepicker("option", "firstDay", 1);
jQuery("#cfgen-element-7-6").datepicker("option", "dateFormat", "dd-mm-yy");
jQuery("#cfgen-element-7-6").datepicker("option", "yearRange", "-0:+70");
jQuery("#cfgen-element-7-6").datepicker("option", "beforeShowDay", nietbeschikbaar);
我还设法让这段代码只启用 12 月 24 日,我想启用它:
var enableDays = ["24-12-2018"];
function enableAllTheseDays(date) {
var sdate = $.datepicker.formatDate('dd-mm-yy', date)
if ($.inArray(sdate, enableDays) != -1) {
return [true];
}
return [false];
}
jQuery("#datepicker").datepicker("option", "beforeShowDay", enableAllTheseDays);
如果可能的话,我想结合这些功能。所以要求:
- 每周的第一天和第二天 禁用
- 'vakantie'数组禁用
- 24-12-2018(12 月 24 日)启用
var vakantie = ["25-12-2018", "26-12-2018", "27-12-2018", "28-12-2018", "29-12-2018", "30-12-2018", "31-12-2018"];
var enableDays = ["24-12-2018"];
$("#datepicker").datepicker({beforeShowDay: function(dt) {
var datestring = $.datepicker.formatDate('dd-mm-yy', dt);
if($.inArray(datestring, enableDays) != -1) {
return [true];
}
else{
return [dt.getDay() == 1 || dt.getDay() == 2 ? false : true && vakantie.indexOf(datestring) == -1 ];
}
}});
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery UI Datepicker - Default functionality</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<body>
<p>Date: <input type="datepicker" id="datepicker"></p>
</body>
试试这个..
$("#datepicker").datepicker({beforeShowDay: function(dt) {
var datestring = $.datepicker.formatDate('dd-mm-yy', dt);
if($.inArray(datestring, enableDays) != -1) {
return [true];
}
else{
return [dt.getDay() == 1 || dt.getDay() == 2 ? false : true && vakantie.indexOf(datestring) == -1 ];
}
}});
只需在 beforeShowDay
函数中使用以下条件。它基本上为指定日期创建了一个例外:
var override = ["24-12-2018"];
// ...
var available = (dt.getDay() == 1 || dt.getDay() == 2 || vakantie.indexOf(datestring) >= 0) && (override.indexOf(datestring) === -1)
? false
: true;
return [available];
var vakantie = ["25-12-2018", "26-12-2018", "27-12-2018", "28-12-2018", "29-12-2018", "30-12-2018", "31-12-2018"];
var override = ["24-12-2018"];
function nietbeschikbaar(dt) {
var datestring = jQuery.datepicker.formatDate('dd-mm-yy', dt);
var available = (dt.getDay() == 1 || dt.getDay() == 2 || vakantie.indexOf(datestring) >= 0) && (override.indexOf(datestring) === -1)
? false
: true;
return [available];
}
jQuery("#cfgen-element-7-6").datepicker(jQuery.datepicker.regional["nl"]);
jQuery("#cfgen-element-7-6").datepicker("option", "changeMonth", true);
jQuery("#cfgen-element-7-6").datepicker("option", "changeYear", true);
jQuery("#cfgen-element-7-6").datepicker("option", "minDate", +1);
jQuery("#cfgen-element-7-6").datepicker("option", "firstDay", 1);
jQuery("#cfgen-element-7-6").datepicker("option", "dateFormat", "dd-mm-yy");
jQuery("#cfgen-element-7-6").datepicker("option", "yearRange", "-0:+70");
jQuery("#cfgen-element-7-6").datepicker("option", "beforeShowDay", nietbeschikbaar);
@import url("https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/blitzer/jquery-ui.min.css");
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<p>Navigate to December 2018</p>
<p><input id="cfgen-element-7-6"></p>