- Java 双重比较
- java - 比较器与 Apache BeanComparator
- Objective-C 完成 block 导致额外的方法调用?
- database - RESTful URI 是否应该公开数据库主键?
我正在努力处理 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。
最佳答案
为了方便起见,我创建了一个类字典。当 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..">
更新
字典的想法是简化添加/删除类并避免丑陋的开关或长 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);
}
}
});
关于javascript - Flatpickr onDayCreate 添加类,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40324781/
我正在使用 flatpickr 来设置日期, onChange: function(selectedDates, dateStr, instance) { var myDate = selec
这可能是一个基本问题,但我正在努力。本质上,我有一个 livewire 组件,用于更新用户输入的一系列航类信息。每当组件被重新渲染时, flatpickr 功能就会完全停止工作。我认为这是因为在该字段
当我打开然后关闭 Flatpickr 实例而不选择日期时,它会将其设置为今天的日期。如何防止这种行为?当用户未设置时,我需要日期输入保持为空。 Flatpickr 实例用 React-Flatpick
我正在使用平面选择器,输入的日期如下: 01/02/1991 (Day 1 / Month Feb / Year 1991. 但是,当我添加 Flatpickr 类时,它将日期转换为: 02/01/1
我正在使用 flatpikr https://flatpickr.js.org/我希望在出站(仅日期)选择器的关闭事件中,将返回选择器的初始日期设置为第一个选择器中选择的相同日期。我编写的这段代码可以
我正在使用 Flatpickr满足我的日历需求。它提供了一个带有箭头的输入字段来更改年份。 我需要在日历中有一个下拉列表,以便我可以从该下拉列表中选择一年,然后日历指向那一年。 我动态地给日历元素一个
我正在使用 Flatpickr满足我的日历需求。它提供了一个带有箭头的输入字段来更改年份。 我需要在日历中有一个下拉列表,以便我可以从该下拉列表中选择一年,然后日历指向那一年。 我动态地给日历元素一个
我在我的应用程序上使用“flatpickr”作为日期时间选择器。此日期选择器允许选择多个日期,但在阅读文档后,我找不到任何方法来限制所选日期的最大数量。 Jquery: $('#gig_date_mu
我有以下 html: @Html.LabelFor(x => x.StartDate) @Html.TextBoxFor(m => m.StartDate, "{0:dd-MM-yy
我正在尝试使用 Jquery 实现 flatpickr。到目前为止一切顺利。 我有以下代码,它确实有效: flatpickr("#booking_start", {}); flatpickr("#bo
我有一些使用 flatpickr 日历实例的 HTML。我想做的是在单击随附的跨度时仅打开特定的日历实例。 附带的 Javascript 是
我正在使用这个加载 flatpickr: jQuery(document).ready(function($){ $('#Mydatetime').flatpickr({ a
我开始使用 flatpickr (从 xdsoft datetimepicker 开始,似乎不再积极维护)并希望实现滚动行为,就像 xdsoft 的 datetimepicker 一样,即允许使用鼠标
我正在使用“angularx-flatpickr”以 Angular 形式选择日期。当我点击输入区域然后弹出月份 View 时出现但所有日期都被禁用。 在我的 html 文件中, 我将这个
转载链接: https://jsfiddle.net/isaporto/hav7pqs5/ HTML: Click here JS: document.querySelector('button
我的任务是让用户选择一个日期(它在输入框中正常显示)。创建一个包含年份的新变量,但根据需要使用提供的日期中的一些逻辑来更改它。 我不知道我是否只需要使用提供的 .selectedDates 日期数组,
我目前正在使用 vue-flatpickr-component创建更好的日期输入字段。现在我有一个“onClose()”方法(参见下面的代码)来检查输入的日期是否有效。 我删除了大部分代码以使其更具可
我现在有一个范围日期选择器。 我想重复使用这些日期,但无法为所有场景选择它们。我尝试了下面的代码,如果所选日期在同一个月,该代码效果很好。但我的问题是,如果日期跨越多个月,这段代码将不起作用。 $(
如何在 flatpickr 中设置 maxDate? $("#date-picker").flatpickr("minDate", "2019-7-12"); 但是它不起作用。 最佳答案 尝试使用o
如何在 flatpickr 中设置 maxDate? $("#date-picker").flatpickr("minDate", "2019-7-12"); 但是它不起作用。 最佳答案 尝试使用o
我是一名优秀的程序员,十分优秀!