5

Flatpickr ( https://chmln.github.io/flatpickr/ ) の onDayCreate イベントに苦労しています。ピッカーの日付オブジェクトが私の日付配列の日付と一致するかどうかを確認する方法をよく知っている人はいますか?

日付が次のようになる配列（またはオブジェクトの配列、これを呼び出す方法がよくわかりません）があります：

dates: {
"20161029": 3,
"20161030": 0,
"20161031": 0,
"20161101": 4,
"20161102": 4,
"20161103": 4,
"20161104": 5,
"20161105": 1,
"20161106": 0,
"20161107": 4,
"20161108": 3,
"20161109": 3,
"20161110": 4
}

そして、値が 0、>3、または 5 かどうかを確認し、その日付にクラスを追加する必要があります。Flatpickr には例がありますが、数学関数を使用して、どの日付に新しいスパン要素を持たせるかをランダム化しています ( example )。しかし、if else を addClass に設定することはできません。

4

3 に答える 3

4

便宜上、クラスの辞書を作成しました。flatpickr が onCreateDay コールバックをトリガーしている日に関連付けられた番号を取得する方法として、オブジェクトのキーを使用できます。日に関連付けられた値を使用して、ディクショナリからクラスを取得し、それが空でない場合は要素に追加できます。

関連すると思われるいくつかのことを強調するために、コードにいくつかの説明を追加しました。

このページでスクリプトを実行して確認するか (表示されない場合は全画面表示)、このfiddleで確認できます。

それが役に立てば幸い。

var dates = {
    20161029: 3,
    20161030: 0,
    20161031: 0,
    20161101: 4,
    20161102: 4,
    20161103: 4,
    20161104: 5,
    20161105: 1,
    20161106: 0,
    20161107: 4,
    20161108: 3,
    20161109: 3,
    20161110: 4
  },
  classDict = {
    0: 'redClass',
    1: 'greenClass',
    3: 'blueClass',
    4: 'greyClass',
    5: 'orangeClass'
  };

// Better always use a two digit format in your dates obj
function get2DigitFmt(val) {
  return ('0' + val).slice(-2);
}

// onDayCreate event, add class to day if date has a class
flatpickr("#dayCreate", {
  onDayCreate: function(dObj, dStr, fp, dayElem) {
    var date = dayElem.dateObj,
      // Note the + 1 in the month.
      key = date.getFullYear() + get2DigitFmt(date.getMonth() + 1) + get2DigitFmt(date.getDate()),
      value = classDict[dates[key]];
    if (value) {
      dayElem.className += ' ' + value;
    }
  }
});
.redClass {
  background-color: red !important;
}
.greenClass {
  background-color: green !important;
}
.blueClass {
  background-color: blue !important;
}
.greyClass {
  background-color: grey !important;
}
.orangeClass {
  background-color: orange !important;
}
<link rel="stylesheet" href="https://unpkg.com/flatpickr/dist/flatpickr.min.css">
<script src="https://unpkg.com/flatpickr"></script>
<input id="dayCreate" type="text" placeholder="Select Date..">

アップデート

ディクショナリのアイデアは、クラスの追加/削除を簡素化し、醜いスイッチや長い if を避けることでした。ただし、コードを簡単に変更して、値 (3 より大きい値のみがクラスを取得) でフィルタリングし、条件が満たされたときに必要なクラスを追加することができます。

たとえば（フィドル）：

function getClass(value) {
  // Here you could put any logic you want. Ifs, add the value to a string, whatever...
    return value === 4 ? 'redClass' : 'blueClass';
}
// onDayCreate event, add class to day if date has a class
flatpickr("#dayCreate", {
  onDayCreate: function(dObj, dStr, fp, dayElem) {
    var date = dayElem.dateObj,
      // Note the + 1 in the month.
      key = date.getFullYear() + get2DigitFmt(date.getMonth() + 1) + get2DigitFmt(date.getDate()),
      value = dates[key];
    if (value > 3) {
      dayElem.className += ' ' + getClass(value);
    }
  }
});

私が提供したソリューションでわかるように、日付に関連付けられた値を取得するためにオブジェクトを常にループする必要はありません。flatpickr の日付から日付のキーを構成する定数時間で取得できます。日を構築する際に提供します (onCreateDay コールバック)。

アップデート

ドキュメントによると (またはそのように思われます)、onDayCreate コールバック内で現在の日付を取得するには、fp (currentYear および currentMonth) と dayElem (textContent) のプロパティを使用する必要があります。

ただし、 currentMonth は、常にフラットピッカーが現在表示している月を返します。その日の月ではありません (カレンダーは 11 月を表示できますが、日は 10 月または 12 月の可能性があります)。 .

このフィドルでは、dateObj を使用せず、ドキュメントのように機能するソリューションを見つけることができます。

コードは次のとおりです。

// Better always use a two digit format in your dates obj
function get2DigitFmt(val) {
  return ('0' + val).slice(-2);
}

function getClass(value) {
  // Here you could put any logic you want. Ifs, add the value to a string, whatever...
  return value === 4 ? 'redClass' : 'blueClass';
}

// Adjust month depending on the month's day
function getMonth(currentMonth, dayClass) {
  return currentMonth + (dayClass.contains('prevMonthDay') ? 0 : (1 + Number(dayClass.contains('nextMonthDay'))));
}

function getDateKey(year, month, day) {
  return year + get2DigitFmt(month) + get2DigitFmt(day);
}

// onDayCreate event, add class to day if date has a class
flatpickr("#dayCreate", {
  onDayCreate: function(dObj, dStr, fp, dayElem) {
    var key = getDateKey(fp.currentYear, getMonth(fp.currentMonth, dayElem.className), dayElem.textContent),
      value = dates[key];
    if (value > 3) {
      dayElem.className += ' ' + getClass(value);
    }
  }
});
于 2016-11-03T22:07:50.820 に答える