web-dev-qa-db-ja.com

jquery UIの日付ピッカーで日付を強調表示する

JQuery UIの日付ピッカーで日を強調表示するためにbeforeShowDayを使用する方法次の日付配列があります

Array
(
    [0] => 2011-07-07
    [1] => 2011-07-08
    [2] => 2011-07-09
    [3] => 2011-07-10
    [4] => 2011-07-11
    [5] => 2011-07-12
    [6] => 2011-07-13
)
jqueryjquery-uijquery-plugins
17
Nisanth Kumar

私は使用して問題を解決しました

var disabledDays = ["2011-7-21","2011-7-24","2011-7-27","2011-7-28"];
var date = new Date();
jQuery(document).ready(function() { 
    $( "#dateselector").datepicker({ 
        dateFormat: 'yy-mm-dd',
        beforeShowDay: function(date) {
            var m = date.getMonth(), d = date.getDate(), y = date.getFullYear();
            for (i = 0; i < disabledDays.length; i++) {
                if($.inArray(y + '-' + (m+1) + '-' + d,disabledDays) != -1) {
                    //return [false];
                    return [true, 'ui-state-active', ''];
                }
            }
            return [true];

        }
    });
});
21
Nisanth Kumar

ドキュメントをご覧ください。

beforeShowDay 関数は日付をパラメーターとして受け取り、[0]がtrue/falseで、この日付が選択可能かどうかを示す配列を返す必要があります。[1]はCSSクラス名と同じです）または ''（デフォルトのプレゼンテーションの場合）、[2]この日付のオプションのポップアップツールチップ。表示される前に、日付ピッカーで毎日呼び出されます。

つまり、日付を取り、パラメータの配列を返す関数を作成する必要があります。ここで、値は次のとおりです。

  1. ブール-日付を選択できるかどうかを示します
  2. 文字列-日付に適用されるcssクラスの名前
  3. 文字列-この日付のオプションのポップアップツールチップ

ここに例があります：

var your_dates = [new Date(2011, 7, 7),new Date(2011, 7, 8)]; // just some dates.

$('#whatever').datepicker({
   beforeShowDay: function(date) {
      // check if date is in your array of dates
      if($.inArray(date, your_dates)) {
         // if it is return the following.
         return [true, 'css-class-to-highlight', 'tooltip text'];
      } else {
         // default
         return [true, '', ''];
      }
   }
});

そして、日付を強調するスタイルを追加できます

<style>
   .css-class-to-highlight{
       background-color: #ff0;
   }
</style>
33
Nikita Ignatov

最も投票された回答が機能していないことがわかりました。機能するようにコードを少し更新しました。 $ .inArray（）は主にindexOf（）を検索します。また、2つの日付が等しいかどうかを直接比較することもできません。参照： JavaScriptで2つの日付を比較

function inArrayDates(needle, haystack){
    var found = 0;
    for (var i=0, len=haystack.length;i<len;i++) {
        if (haystack[i].getTime() == needle.getTime()) return i;
            found++;
        }
    return -1;
}

そして受け入れられた関数を次のように更新します

if(inArrayDates(date, markDates) != -1) {
            return [true, 'selected-highlight', 'tooltip here'];
          } else {
             return [true, '', ''];
          }
2
Karan Sharma

JSの日付はオブジェクトDateのインスタンスであるため、==または===を使用して日付が等しいかどうかを適切にチェックすることはできません。

シンプルなソリューション：

var your_dates = [
   new Date(2017, 4, 25),
   new Date(2017, 4, 23)
];

$( "#some_selector" ).datepicker({
    beforeShowDay: function(date) {
        are_dates_equal = d => d.getTime() === date.getTime();
        if(your_dates.some(are_dates_equal)) {
            return [true, 'ui-state-active', ''];
        }
        return [true, '', ''];
    }
})
1
Mark Mishyn

無効になる日付を指定し、使用可能な日付の色を表示するだけでよい単純な解決策が得られました。

   <style>
    .availabledate a {
         background-color: #07ea69 !important;
         background-image :none !important;
         color: #ffffff !important;
     }
     </style>

そしてスクリプトではこれを使用します：

<script>

    $(function() {
        //This array containes all the disabled array
          datesToBeDisabled = ["2019-03-25", "2019-03-28"];

            $("#datepicker").datepicker({
              changeMonth: true,
              changeYear: true,
              minDate : 0,
              todayHighlight: 1,
              beforeShowDay: function (date) {
                var dateStr = jQuery.datepicker.formatDate('yy-mm-dd', date);
                if(dateStr){
                  return [datesToBeDisabled.indexOf(dateStr) == -1,"availabledate"];
                }else{
                  return [datesToBeDisabled.indexOf(dateStr) == -1,""];
                }

              },

            });


    });

  </script>

それが誰かを助けることを願っています。

1
S Debasish Nayak

http://jqueryui.com/demos/datepicker/#event-beforeShowDay

BeforeShowDayの日付パラメーターを配列にある日付と比較し、一致がある場合は、上記のリンクで定義されている配列を返します。

BeforeShowDayから返す配列では、2番目の要素を使用して、日付に使用されるクラス名を設定します。その後、cssを使用して、そのクラスのスタイルを設定できます。

0
manubkk