Включить одну конкретную дату в jquery datepicker - PullRequest
Новая
       9

Включить одну конкретную дату в jquery datepicker

0 голосов
/ 22 ноября 2018

У меня есть jQuery datepicker на моем веб-сайте, и я отключаю каждый первый и второй день (понедельник и вторник) недели.Также у меня есть массив дней, которые отключены (это работает).Теперь я хотел бы также включить 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);

Мне также удалось заставить этот код работать только для включения 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);

Я хотел бы объединить эти функции, если это возможно.Итак, требования:

  • Каждый 1-й и 2-й день недели отключен
  • Массив 'vakantie' отключен
  • 24-12-2018 (24 декабря) включено

Ответы [ 2 ]

0 голосов
/ 23 ноября 2018

Просто используйте следующее условие внутри вашей функции 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>
0 голосов
/ 23 ноября 2018 

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 ];
     }


}});
...