Flatpickr - 限制可以选择的日期数量
Flatpickr - Limit the amount of dates that can be selected
我在我的应用程序上使用 'flatpickr' 作为日期时间选择器。此日期选择器允许选择多个日期,但在阅读文档后我找不到任何方法来限制所选日期的最大数量。
Jquery:
$('#gig_date_multi').flatpickr({
"mode": "multiple",
"locale": "<%= I18n.locale %>",
minDate: new Date(),
enableTime: true,
time_24hr: true,
minuteIncrement: 15,
onChange: function(selectedDates, dateStr, instance) {
var array = selectedDates;
if (array.length >= 3) {
console.log("YOU HAVE REACHED YOUR LIMIT")
} else {
console.log("YOU CAN STILL SELECT MORE DATES")
}
var newHTML = [];
$.each(array, function(index, value) {
var formatted = moment(value).format("HH:mm - dddd Do MMMM YYYY");
newHTML.push('<span>' + formatted + '</span>');
});
$(".multi-dates").html(newHTML.join(""));
}
});
在此选择3个日期时,控制台输出"YOU HAVE REACHED YOUR LIMIT",我想也许我可以在发生这种情况时禁用所有日期(除了先前选择的日期)。
Flatpickr 有一个 disable
和 enable
函数,但我不确定如何将其集成到代码中...我是 jquery 初学者。
文档显示了这两种方法;
{
"disable": [
function(date) {
// return true to disable
return (date.getDay() === 5 || date.getDay() === 6);
}
],
"locale": {
"firstDayOfWeek": 1 // start week on Monday
}
}
和
{
enable: ["2017-03-30", "2017-05-21", "2017-06-08", new Date(2017, 8, 9) ]
}
您可以使用:
set(option, value): Sets a config option optionto value, redrawing the calendar and updating the current view, if necessary
要禁用除选定的 3 个以外的所有日期,您可以这样写:
instance.set('enable', selectedDates);
并且,为了重置您可以:
instance.set('enable', []);
不同的方法可以基于 Enabling dates by a function:
instance.set('enable', [function(date) {
if (selectedDates.length >= 3) {
var currDateStr = FlatpickrInstance.prototype.formatDate(date, "d/m/Y")
var x = selectedDatesStr.indexOf(currDateStr);
return x != -1;
} else {
return true;
}
}]);
片段:
$('#gig_date_multi').flatpickr({
"mode": "multiple",
"locale": 'en',
minDate: new Date(),
enableTime: true,
time_24hr: true,
minuteIncrement: 15,
onChange: function(selectedDates, dateStr, instance) {
var selectedDatesStr = selectedDates.reduce(function(acc, ele) {
var str = instance.formatDate(ele, "d/m/Y");
acc = (acc == '') ? str : acc + ';' + str;
return acc;
}, '');
instance.set('enable', [function(date) {
if (selectedDates.length >= 3) {
var currDateStr = instance.formatDate(date, "d/m/Y")
var x = selectedDatesStr.indexOf(currDateStr);
return x != -1;
} else {
return true;
}
}]);
}
});
input[type="text"] {
width: 100%;
box-sizing: border-box;
-webkit-box-sizing:border-box;
-moz-box-sizing: border-box;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/flatpickr/dist/flatpickr.min.css">
<script src="https://unpkg.com/flatpickr"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script>
<input type="text" id="gig_date_multi">
附带说明一下,如果有人想在 Flatpickr 中禁用过去日期以及 time 选择,请使用 Date().getTime()
像这样:
$("input.picker-datetime").flatpickr({
enableTime: true,
dateFormat: "Y-m-d H:i",
time_24hr: true,
minDate: new Date().getTime()
});
我在我的应用程序上使用 'flatpickr' 作为日期时间选择器。此日期选择器允许选择多个日期,但在阅读文档后我找不到任何方法来限制所选日期的最大数量。
Jquery:
$('#gig_date_multi').flatpickr({
"mode": "multiple",
"locale": "<%= I18n.locale %>",
minDate: new Date(),
enableTime: true,
time_24hr: true,
minuteIncrement: 15,
onChange: function(selectedDates, dateStr, instance) {
var array = selectedDates;
if (array.length >= 3) {
console.log("YOU HAVE REACHED YOUR LIMIT")
} else {
console.log("YOU CAN STILL SELECT MORE DATES")
}
var newHTML = [];
$.each(array, function(index, value) {
var formatted = moment(value).format("HH:mm - dddd Do MMMM YYYY");
newHTML.push('<span>' + formatted + '</span>');
});
$(".multi-dates").html(newHTML.join(""));
}
});
在此选择3个日期时,控制台输出"YOU HAVE REACHED YOUR LIMIT",我想也许我可以在发生这种情况时禁用所有日期(除了先前选择的日期)。
Flatpickr 有一个 disable
和 enable
函数,但我不确定如何将其集成到代码中...我是 jquery 初学者。
文档显示了这两种方法;
{
"disable": [
function(date) {
// return true to disable
return (date.getDay() === 5 || date.getDay() === 6);
}
],
"locale": {
"firstDayOfWeek": 1 // start week on Monday
}
}
和
{
enable: ["2017-03-30", "2017-05-21", "2017-06-08", new Date(2017, 8, 9) ]
}
您可以使用:
set(option, value): Sets a config option optionto value, redrawing the calendar and updating the current view, if necessary
要禁用除选定的 3 个以外的所有日期,您可以这样写:
instance.set('enable', selectedDates);
并且,为了重置您可以:
instance.set('enable', []);
不同的方法可以基于 Enabling dates by a function:
instance.set('enable', [function(date) {
if (selectedDates.length >= 3) {
var currDateStr = FlatpickrInstance.prototype.formatDate(date, "d/m/Y")
var x = selectedDatesStr.indexOf(currDateStr);
return x != -1;
} else {
return true;
}
}]);
片段:
$('#gig_date_multi').flatpickr({
"mode": "multiple",
"locale": 'en',
minDate: new Date(),
enableTime: true,
time_24hr: true,
minuteIncrement: 15,
onChange: function(selectedDates, dateStr, instance) {
var selectedDatesStr = selectedDates.reduce(function(acc, ele) {
var str = instance.formatDate(ele, "d/m/Y");
acc = (acc == '') ? str : acc + ';' + str;
return acc;
}, '');
instance.set('enable', [function(date) {
if (selectedDates.length >= 3) {
var currDateStr = instance.formatDate(date, "d/m/Y")
var x = selectedDatesStr.indexOf(currDateStr);
return x != -1;
} else {
return true;
}
}]);
}
});
input[type="text"] {
width: 100%;
box-sizing: border-box;
-webkit-box-sizing:border-box;
-moz-box-sizing: border-box;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/flatpickr/dist/flatpickr.min.css">
<script src="https://unpkg.com/flatpickr"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script>
<input type="text" id="gig_date_multi">
附带说明一下,如果有人想在 Flatpickr 中禁用过去日期以及 time 选择,请使用 Date().getTime()
像这样:
$("input.picker-datetime").flatpickr({
enableTime: true,
dateFormat: "Y-m-d H:i",
time_24hr: true,
minDate: new Date().getTime()
});