2017-05-22 11 views
0

jQueryのdatepickerでいくつかの日付とすべての週末を無効にしたコードがあります。今、私は週末のいくつかの日付を有効にする必要があります。jquery datepicker:すでに無効な週末から週末を有効にする必要があります

これらの日付で配列に追加しようとしましたが、有効にしようとしましたが動作しません。私はこの問題の解決策が必要です。現在のコードは、週末と特定の日付のセットを無効にするためにうまくいきます。すべてのヘルプは高く評価され

<script> 
var unavailableDates = ["16-9-2017", "22-9-2017" , "19-10-2017", "1-12-2017" , "11-12-2017" , "25-12-2017", "1-1-2018" , "31-1-2018" , "16-2-2018" , "17-2-2018" , "1-5-2018"]; 

$(function() { 
    $("#datepicker").datepicker({ minDate: +2, beforeShowDay:noSunday, numberOfMonths:2, 
     onSelect: function(date, obj){ 
      $('#date_input').val(date); //Updates value of of your input 
     } 
    }); 

    $("#datepicker").datepicker("option", "dateFormat", "dd-mm-yy"); 

    function noSunday(date){ 
     var dmy = date.getDate() + "-" + (date.getMonth() + 1) + "-" + date.getFullYear(); 
     var day = date.getDay(); 
     if (day == 0) { 
      return [false, "Highlighted", date]; 
     } 

     for (var i = 0; i < unavailableDates.length; i++) { 
      if ($.inArray(dmy, unavailableDates) != -1) { 
       return [false, "Highlighted", date]; 
      } 
     } 
     return [true, '', '']; 
    }; 
}); 
</script> 

私は(例えば28-05-2017用)5月か6月の月中の日曜日のカップルを可能とするためのコードを追加する方法を教えてください。

答えて

0

beforeShowDay関数の戻り値のうちの1つが有効な配列を返していませんでした。 documentationから、それは述べて:

を、この日付

if (day == 0) { 
    return [false, "Highlighted"]; 
} 

のための[2]オプションのポップアップツールチップinArrayのあなたのループと使用は、働いていた一方で、あなたはすでに困難な部分を行っていますカレンダーの日付の文字列表現を作成して、配列内の日付の形式と一致させる必要があります。

私はindexOfを使用して、文字列が日付配列に存在するかどうかを識別しました。そうでない場合は、[true, '']を返し、そうでない場合は、偽の状態[false, "Highlighted"]を返します。

var unavailableDates = ["16-9-2017", "22-9-2017", "19-10-2017", "1-12-2017", "11-12-2017", "25-12-2017", "1-1-2018", "31-1-2018", "16-2-2018", "17-2-2018", "1-5-2018"]; 
 

 
$(function() { 
 
    $("#datepicker").datepicker({ 
 
    minDate: +2, 
 
    beforeShowDay: noSunday, 
 
    numberOfMonths: 2, 
 
    onSelect: function(date, obj) { 
 
     $('#date_input').val(date); //Updates value of of your input 
 
    } 
 
    }); 
 

 
    $("#datepicker").datepicker("option", "dateFormat", "dd-mm-yy"); 
 

 
    function noSunday(date) { 
 
    var dmy = date.getDate() + "-" + (date.getMonth() + 1) + "-" + date.getFullYear(); 
 
    var day = date.getDay(); 
 
    if (day == 0) { 
 
     return [false, "Highlighted"]; 
 
    } else { 
 
     return (unavailableDates.indexOf(dmy) !== -1) ? [false, "Highlighted"] : [true, '']; 
 
    } 
 
    }; 
 
});
<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width"> 
 
    <title>JS Bin</title> 
 
</head> 
 

 
<body> 
 
    <script src="https://code.jquery.com/jquery-3.1.0.js"></script> 
 
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> 
 

 
    <p>Date: <input type="text" id="datepicker"></p> 
 
</body> 
 

 
</html>

0

あなたは単にあなたがそれらを無効にするために使用されているかの条件を変更することができます有効に同じ日曜日を維持したい場合。代わりに:

if (day == 0) 

使用availableDatesはあなたが有効になっておきたいすべての日曜日を含む配列である

if (day == 0 && $.inArray(dmy, availableDates) == -1) 

。ここで

ライブのサンプル:私は$.datepicker.formatDateにを使用しました日付ピッカー

  • を初期化するとき、私はdateFormatオプションを使用しました

    • :という

      var unavailableDates = ["16-9-2017", "22-9-2017" , "19-10-2017", "1-12-2017" , "11-12-2017" , "25-12-2017", "1-1-2018" , "31-1-2018" , "16-2-2018" , "17-2-2018" , "1-5-2018"]; 
       
      
       
      var availableDates = ["28-5-2017"]; 
       
      
       
      $("#datepicker").datepicker({ 
       
          minDate: +2, 
       
          beforeShowDay: noSunday, 
       
          numberOfMonths:2, 
       
          onSelect: function(date, obj){ 
       
          $('#date_input').val(date); //Updates value of of your input 
       
          }, 
       
          dateFormat: "dd-mm-yy" 
       
      }); 
       
      
       
      function noSunday(date){ 
       
          var dmy = $.datepicker.formatDate("d-m-yy", date); 
       
          
       
          var day = date.getDay(); 
       
          if (day == 0 && $.inArray(dmy, availableDates) == -1) { 
       
          return [false, "Highlighted"]; 
       
          } 
       
      
       
          for (var i = 0; i < unavailableDates.length; i++) { 
       
          if ($.inArray(dmy, unavailableDates) != -1) { 
       
           return [false, "Highlighted"]; 
       
          } 
       
          } 
       
          return [true, '']; 
       
      };
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
       
      <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.js"></script> 
       
      <link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.css" rel="stylesheet"/> 
       
      
       
      <input type="text" id="datepicker"> 
       
      <input type="text" id="date_input">

      注意の形式の日付10フォーマット。

    • 私はbeforeShowDay関数からツールチップパラメータを削除しました。
  • 関連する問題