Flatpickr onDayCreate添加类

Question

我正在努力使用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有一个例子,但它使用数学函数随机化哪些日期应该有新的span元素(例子).但是我无法将我的if else配置为addClass.

Answer 1

为了方便起见，我创建了一个类字典。当 flatpickr 触发 onCreateDay 回调时，您可以使用对象的键来检索与某一天关联的数字。通过与一天关联的值，您可以从字典中获取类，如果它不为空，则将其添加到元素中。

我在代码中添加了一些解释，以突出显示一些我认为相关的内容。

您可以在此页面中运行脚本来检查它（如果没有看到它，则全屏），或者您可以在此小提琴中检查它。

希望能帮助到你。

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..">

更新

字典的想法是简化添加/删除类并避免丑陋的开关或长 ifs。但是，您可以轻松修改代码，以便按值过滤（只有大于 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 始终返回 flatpicker 当前显示的月份，而不是当天的月份（日历可以显示 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);
    }
  }
});