Javascript FlatPicker onDayCreate添加类

我正在为一个FlatPicker的（）onDayCreate事件而挣扎。这里有人知道如何检查picker的日期对象是否与我的日期数组中的任何日期匹配吗？

我有一个数组（或对象数组，不确定如何调用），日期如下：

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，并将类添加到该日期。FlatPicker有一个例子，但它使用数学函数来随机化哪些日期应该有新的span元素（）。但是我无法将if-else配置为addClass。

类似的东西应该可以做到这一点（故意详细说明，以便您可以看到发生了什么）：

---

为了方便起见，我创建了一本关于这些课程的词典。当FlatPicker触发onCreateDay回调时，可以使用对象的键作为检索与某一天相关联的数字的方法。通过与一天关联的值，可以从字典中获取类，如果该类不是空的，则将其添加到元素中

我在代码中添加了一些解释，以强调一些我认为相关的事情。

您可以在这个页面中运行脚本来检查它（如果看不到它，请全屏显示），也可以在这个页面中检查它

希望能有帮助

var日期={
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:“红色类”，
1:‘绿色课堂’，
3:‘蓝班’，
4:‘greyClass’，
5:‘橘子课堂’
};
//最好在约会对象中始终使用两位数格式
函数get2DigitFmt（val）{
返回（'0'+val）.slice（-2）；
}
//onDayCreate事件，如果date有类，则将类添加到day
FlatPicker（“#dayCreate”{
onDayCreate：函数（dObj、dStr、fp、dayElem）{
变量日期=dayElem.dateObj，
//请注意当月的+1。
key=date.getFullYear（）+get2DigitFmt（date.getMonth（）+1）+get2DigitFmt（date.getDate（）），
value=classDict[日期[键]；
如果（值）{
dayelm.className+=''值；
}
}
});
.redClass{
背景色：红色！重要；
}
格林班斯先生{
背景色：绿色！重要；
}
B.蓝班{
背景色：蓝色！重要；
}
格雷卡斯先生{
背景色：灰色！重要；
}
橘子课堂{
背景色：橙色！重要；
}
感谢nfreeze和acontell帮助我解决了这个问题，当时我觉得该插件的文档有点难以理解（至少对我来说）

当我用
dayelm.dateObj
找出我的错误时，nfreeze和acontell的答案从一开始就起作用了

这个错误是由于我的插件的旧版本造成的。我有2.0.5（目前是bower的版本）和
dateObj
在手动更新到2.0.6版本时开始工作

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

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是合乎逻辑的，因为我的项目中已经有了它，使用Moment格式的原因是以相同的格式获取这些日期。你也可以用其他方法
 既然我不能让它工作，你有没有试过这样做？它不影响datepicker中的day元素。我不能打印任何东西，即使使用dayelm.innerHTML+=“在date的span元素中添加文本”；是的，它已经过测试并且可以工作了。我修改了示例以更改当天的颜色。您可以检查flatpickr日跨度，并看到类正在被添加。我看到，当我再次检查dates对象时，可能有错误。它们的格式如下：dates{“20161103”：3，“20161104”：5等。因此，我认为我的问题是键中的“”。你有什么快速的答案来重新格式化我的密钥吗？在密钥周围加引号是很好的。我的例子也是这样。您可能需要重新复制我的示例，因为我更改了它。另外，别忘了在css中添加样式规则。哦，等等，我明白你的意思了。列表中的日期未正确突出显示。我更新了示例，您能再试一次吗？仅供参考，您不会将其称为数组或对象数组
dates
是一个对象，它有一系列类似的命名属性（不是列表中的元素）。我想有人不喜欢这个问题及其答案，因为每个人都在同一时间投了一票反对票。这似乎在你的小提琴工作，但在我的情况下，我不能使用你的答案，因为这些日期可用性可能会在未来发生变化，然后我不得不硬编码的风格。这意味着在@nfreeze的回答中，我可以更容易地（在我看来）设置一个条件，即如果值大于ex:3，则日期将获得特定的类，依此类推。（很难解释，但希望你明白了！）Ejjas我已经更新了我的解决方案，你提到的点和一些我认为值得考虑的事情。谢谢我不知道为什么，但是我的
dayElem
没有
dateObj
对象。所以它没有定义。有什么想法吗？是的，我刚下载了最新版本，下一步就要试用了。现在我使用的最新版本，他们为鲍尔，这是0.1版本订单比CDN版本。看看这能不能解决这个问题。太好了，就是这样！现在我的dateElem中有了dateObj！这应该是我检查的第一件事。。想知道为什么他们没有bower下载的最新版本（实际上版本号上的差异只有0.0.1）。。。我会接受你的回答，因为这更接近我的实现。我会用一种不同的方式来完成这项工作。我想先回答正确的问题在这里并不总是有回报；）@恩，那是一个艰难的选择。但我选择了一个接近我自己的代码。
.myFancyDateClass0{
   color: red;
}
.myFancyDateClass1{
   color: green;
}
.myFancyDateClass3{
   color: blue;
}
.myFancyDateClass4{
   color: yellow;
}
.myFancyDateClass5{
   color: pink;
}

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

flatpickr("#dayCreate", {
 onDayCreate: function(dObj, dStr, fp, dayElem) {

   var date = moment(dayElem.dateObj).format(),
       value = datesForPicker[date];

   if( value ){
    dayElem.className += ' ' + value;
   }

 }
});