javascript - 如何将 dateRange-array 传递给 jquery 函数
问题描述
我正在尝试使用dateRangePickerisInvalidDate
功能禁用特定日期范围,以阻止日期选择器中已占用的日期。
我有一个填充了多个值dateRanges
的数组:dateRangePicker
dateRange
dateRanges = [
{start': moment('2020-02-10), 'end': moment('2020-02-15')},
{start': moment('2020-02-20), 'end': moment('2020-02-25')},
{start': moment('2020-02-27), 'end': moment('2020-02-28')},
];
我正在尝试将dateRanges
数组dateRangePicker
作为参数传递给:
$(function(dateRanges) {
$('input[name="datefilter"]').daterangepicker({
alwaysShowCalenders: true,
autoUpdateInput: false,
locale: {
firstDay: 1,
format: "DD.MM.YYYY",
separator: " bis ",
applyLabel: "Bestätigen",
cancelLabel: "Abbrechen",
fromLabel: "Von",
toLabel: "Bis",
customRangeLabel: "Custom",
weekLabel: "W",
daysOfWeek: [
"So",
"Mo",
"Di",
"Mi",
"Do",
"Fr",
"Sa"
],
monthNames: [
"Januar",
"Februar",
"März",
"April",
"Mai",
"Juni",
"Juli",
"August",
"September",
"Oktober",
"November",
"Dezember"
],
},
"isInvalidDate": function(date, dateRanges) {
return dateRanges.reduce(function(bool, range) {
return bool || (date >= range.start && date <= range.end);
}, false);
},
minDate: moment(),
});
但我会在 chrome 控制台中不断收到以下错误:
sun_odyssey_349.php:225 Uncaught TypeError: Cannot read property 'reduce' of undefined
at a.isInvalidDate (sun_odyssey_349.php:225)
at a.renderCalendar (daterangepicker.min.js:7)
at a.updateCalendars (daterangepicker.min.js:7)
at a.updateView (daterangepicker.min.js:7)
at a.show (daterangepicker.min.js:7)
at HTMLInputElement.e (jquery.min.js:2)
at HTMLInputElement.dispatch (jquery.min.js:3)
at HTMLInputElement.q.handle (jquery.min.js:3)
isInvalidDate @ sun_odyssey_349.php:225
renderCalendar @ daterangepicker.min.js:7
updateCalendars @ daterangepicker.min.js:7
updateView @ daterangepicker.min.js:7
show @ daterangepicker.min.js:7
e @ jquery.min.js:2
dispatch @ jquery.min.js:3
q.handle @ jquery.min.js:3
你能帮我吗?
解决方案
试试这个
$(function() {
var dateRanges = [{
"start": moment("2020-02-10"),
"end": moment("2020-02-15")
},
{
"start": moment("2020-02-20"),
"end": moment("2020-02-25")
},
{
"start": moment("2020-02-27"),
"end": moment("2020-02-28")
},
];
$('input[name="datefilter"]').daterangepicker({
alwaysShowCalenders: true,
autoUpdateInput: false,
locale: {
firstDay: 1,
format: "DD.MM.YYYY",
separator: " bis ",
applyLabel: "Bestätigen",
cancelLabel: "Abbrechen",
fromLabel: "Von",
toLabel: "Bis",
customRangeLabel: "Custom",
weekLabel: "W",
daysOfWeek: [
"So",
"Mo",
"Di",
"Mi",
"Do",
"Fr",
"Sa"
],
monthNames: [
"Januar",
"Februar",
"März",
"April",
"Mai",
"Juni",
"Juli",
"August",
"September",
"Oktober",
"November",
"Dezember"
],
},
"isInvalidDate": function(date) {
return dateRanges.reduce(function(bool, range) {
return bool || (date >= range.start && date <= range.end);
}, false);
},
minDate: moment(),
});
});
推荐阅读
- python - 不再能够在 python 中制作简单的数据框图
- xcode - SwiftUI 菜单选择器导航栏仅显示图标
- vue.js - 无法解压缩工件 - 需要回答 shell 问题
- angular-cli - Angular CLI 是如何落后的?
- javascript - 如何检查 React JS 中的数组包含什么?
- reactjs - 无法读取未定义的属性“_targets”(传单+打字稿)
- asp.net - 如何在 Vs2019 中使用 Shift 和 F2
- delphi - 使用 Delphi 以编程方式计算 FastReport 中的所有页面
- sql-server - 如何使用 jest 模拟 SQL Server 数据库连接
- node.js - NodeJs App + AWS EC2 + Nginx + Websocket 配置