web-dev-qa-db-ja.com

jQueryの日付ピッカーで特定の範囲の日付を強調表示する

指定できるように、開始日と終了日の間の日付を強調表示する必要があります。誰か助けてもらえますか？

jquerydatepickerdatehighlight
20
user286928

beforeShowDayイベント を使用できます。カレンダーに表示する必要のある日付ごとに呼び出されます。日付を渡し、[0] = isSelectable、 1 = cssClass、[2] = Some tooltip textの配列を返します

$('#whatever').datepicker({
            beforeShowDay: function(date) {
             if (date == myDate) {
              return [true, 'css-class-to-highlight', 'tooltipText'];

              }
           }
});
32
Dave Archer

これが実際の例です！ http://jqueryui.com/download でコア、ウィジェット、日付ピッカーを使用して、ここからパッケージを作成する必要があります。

前に置くJavaScript部分：

<script>
$(document).ready(function() {

    var dates = ['22/01/2012', '23/01/2012']; //
            //tips are optional but good to have
    var tips  = ['some description','some other description'];      

    $('#datepicker').datepicker({                
        dateFormat: 'dd/mm/yy',
        beforeShowDay: highlightDays,
        showOtherMonths: true,
        numberOfMonths: 3,
    });

    function highlightDays(date) {
        for (var i = 0; i < dates.length; i++) {
            if (new Date(dates[i]).toString() == date.toString()) {              
                return [true, 'highlight', tips[i]];
            }
        }
        return [true, ''];
     } 

});
</script>

HTML部分：

<div id="datepicker"></div>

このCSSのどこかに追加：

    td.highlight {border: none !important;padding: 1px 0 1px 1px !important;background: none !important;overflow:hidden;}
td.highlight a {background: #99dd73 url(bg.png) 50% 50% repeat-x !important;  border: 1px #88a276 solid !important;}

そして、あなたはそれを動作させるためにbg.pngと呼ばれる小さな画像を作る必要があります

23
Mike

他のものよりも速くて軽いように見えるので、私は私の2セントを投入すると思いました。

jQuery(function($) {
  var dates = {
    '2012/6/4': 'some description',
    '2012/6/6': 'some other description'
  };

  $('#datepicker').datepicker({
    beforeShowDay: function(date) {
      var search = date.getFullYear() + '/' + (date.getMonth() + 1) + '/' + date.getDate();

      if (search in dates) {
        return [true, 'highlight', (dates[search] || '')];
      }

      return [false, '', ''];
    }
  });
});
13
Mark Murphy

これがまだ役立つかどうかはわかりませんが、これは私にとって便利だったので、私がしたことを共有したいと思います。

私のJavaScriptでは：

var holidays= ["2016/09/18", "2016/09/19", "2016/01/01", "2016/05/01", "2016/06/27", "2016/08/15"];

$("#SomeID").datepicker({ beforeShowDay: highLight });

function highLight(date) {
        for (var i = 0; i < holidays.length; i++) {
            if (new Date(holidays[i]).toString() == date.toString()) {
                return [true, 'ui-state-holiday'];
            }
        }
        return [true];
    }

そして、jquery-ui-theme.cssに追加した

.ui-state-holiday .ui-state-default {
    color: red;
}

週末も強調したい場合は、代わりにこのCSSを使用する必要があります

.ui-state-holiday .ui-state-default, .ui-datepicker-week-end .ui-state-default {
    color: red;
}

そしてこれが結果です：
jqueryUI Calendar with Weekends and Holidays Highlight

（私は私の言語をスペイン語に設定しましたが、これはこのコードにとって重要ではありません）

3
Angelo Bernardi

キース・ウッドの datepick を使用している場合は、 here の次の例を使用できます。

$(selector).datepick({onDate: highlightDays}); 

function highlightDays(date) { 
    return {selectable: true, dateClass: 'highlight-custom', title: 'tooltip'}; 
}
1
a_fan

パーティーには遅れましたが、ここで私がテストに使用したJSFiddleがあります。

https://jsfiddle.net/gq6kdoc9/

HTML：

  <div id="datepicker"></div>

JavaScript：

var dates = ['11/13/2017', '11/14/2017'];
   //tips are optional but good to have
   var tips = ['some description', 'some other description'];

   $('#datepicker').datepicker({
     dateFormat: 'dd/mm/yy',
     beforeShowDay: highlightDays,
     showOtherMonths: true,
     numberOfMonths: 3,
   });

   function highlightDays(date) {
     for (var i = 0; i < dates.length; i++) {
       if (new Date(dates[i]).toString() == date.toString()) {
         return [true, 'highlight', tips[i]];
       }
     }
     return [true, ''];
   }

そしてCSS：

td.highlight {
  border: none !important;
  padding: 1px 0 1px 1px !important;
  background: none !important;
  overflow: hidden;
}

td.highlight a {
  background: #ad3f29 url(bg.png) 50% 50% repeat-x !important;
  border: 1px #88a276 solid !important;
}

上記のマイクの動作例に基づいて構築されました！

0
Ben

mugur、あなたのコードはFirefoxやSafariでは私にとってはうまくいきませんでした。date変数をフォーマットする必要がありました（これは here から取得したものです）。ここに

function highlightDays(date) {
for (var i = 0; i < dates.length; i++) {

var d = date.getDate();
var m =  date.getMonth();
m += 1;  // JavaScript months are 0-11
var y = date.getFullYear();

var dateToCheck = (d + "/" + m + "/" + y);
    if (dates[i] == dateToCheck) {
        return [true, 'highlight', tips[i]];
    }
    }
return [true, ''];
}

そしてもちろん、上記の関数が示すように、先行ゼロのパディングは考慮されないため、dates配列を次のように変更する必要があります。

var dates = ['22/1/2014', '23/1/2014'];
0
Todd