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元素（example）。但是我无法将我的if else配置为addClass。

Answer 1

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

我已经为代码添加了一些解释，以突出我认为相关的一些内容。

您可以检查它在此页面中运行脚本（如果不看，则全屏显示），或者您可以在此fiddle中查看。

希望它有所帮助。

＆＃13;

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;
    }
  }
});

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

<强>更新

字典的想法是简化添加/删除类并避免丑陋的开关或长ifs。但是，您可以轻松修改代码以按值过滤（只有大于3的值获取类）并在满足条件时添加所需的任何类。

例如（fiddle）：

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月），因此需要进行一些修改以避免标记错误的日期。

在此 fiddle 中，您可以找到一个不使用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);
    }
  }
});

Answer 2

这样的事情应该这样做（故意详细，以便你可以看到正在发生的事情）：

   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
   };

    flatpickr("#dayCreate", {
      onDayCreate: function (dObj, dStr, fp, dayElem) {
        //because you're working with an object and not an array, 
        //we'll iterate using its keys
        var myDateKeys = Object.keys(dates);
        for (var i = 0; i < myDateKeys.length; i++) {
            var myDateKey = myDateKeys[i]; // "20161029 
            var myDateVal = dates[myDateKey]; // 3       
            var myYear = parseInt(myDateKey.substr(0, 4));
            var myMonth = parseInt(myDateKey.substr(4, 2));
            var myDay = parseInt(myDateKey.substr(6, 2));

            var myDateObj = new Date(myYear + '-' + myMonth + '-' + myDay + ' 00:00:00');
            var fDateObj = dayElem.dateObj;

            //compare with event date 

             if (myDateObj.getTime() == fDateObj.getTime()) {
                    $(dayElem).addClass('myFancyDateClass' + myDateVal);
             }
        }
    }
});

然后在页面中添加样式规则以相应地突出显示日期：

.myFancyDateClass0{
   color: red;
}
.myFancyDateClass1{
   color: green;
}
.myFancyDateClass3{
   color: blue;
}
.myFancyDateClass4{
   color: yellow;
}
.myFancyDateClass5{
   color: pink;
}

Answer 3

感谢nfreeze和acontell帮助我解决这个问题，因为我认为该插件的文档很难理解（至少对我而言）。

当我通过n_GetVisibility找出错误时，nfreeze和acontell的答案从一开始就有效。

该错误是由于我的旧版本的插件。我有2.0.5（目前是bower的版本），dayElem.dateObj在我手动更新到2.0.6版时开始工作。

我实际使用它的方法是制作新对象（出于我自己的目的，以备将来使用），然后将每个项目值用于类：

dateObj

然后onCreate事件我使用了：

var obj = dates,
    keys = Object.keys(obj),
    notAvailable = {},
    fewAvailable = {},
    available = {},
    value,
    date;

    var formattedDates = keys.filter(function(key) {
        if ( !obj[key]) {
          date = moment( key, 'YYYYMMDD' ).format();
          value = 'full';
          return notAvailable[date] = value;
        } else if( obj[key] < 3 ) {
          date = moment( key, 'YYYYMMDD' ).format();
          value = 'fewAvailable';
          return fewAvailable[date] = value;
        } else if( obj[key] >= 3 ) {
          date = moment( key, 'YYYYMMDD' ).format();
          value = 'available';
          return available[date] = value;
        }
 });

 var datesForPicker = Object.assign(notAvailable, fewAvailable, available);

Moment.js的使用是合乎逻辑的，因为我已经在我的项目中使用它，时刻格式的原因是以相同的格式获取这些日期。你也可以采取其他方式。

Flatpickr onDayCreate添加课程

3 个答案: