我正在使用 easepick 插件为我的用户提供选择日期范围的方法。但是，当选择数据范围时，我很难触发事件。谁能帮忙解决这个问题吗？
enableEasepick = function() {
const picker = new easepick.create({
element: document.getElementById('datepicker'),
grid: 2,
zIndex: "1000",
calendars: 2,
css: [
'https://cdn.jsdelivr.net/npm/@easepick/[email protected]/dist/index.css'
],
plugins: ['RangePlugin', 'LockPlugin'],
RangePlugin: {
tooltipNumber(num) {
return num - 1;
},
locale: {
one: 'night',
other: 'nights',
},
},
LockPlugin: {
minDate: new Date(),
minDays: 2,
inseparable: true,
},
autoApply: true,
});
};
以下方法不起作用：
var input = document.getElementById('datepicker');
input.addEventListener("change", function() {
});
标准事件处理程序（如
change您需要使用此库提供的自定义事件 - https://easepick.com/packages/core.html#events
- 提交选择时调用事件。select
这可能就是您想要的。
第二行 “常量选择器=新的easepick.create（{” 您忘记添加第二个）。 我相信部分代码未正确连接。 “const picker = neweasepick.create() {”将帮助代码连接并帮助事件工作。
此代码用作 onchange 事件。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>easepick</title>
<script src="https://cdn.jsdelivr.net/npm/@easepick/[email protected]/dist/index.umd.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@easepick/[email protected]/dist/index.umd.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@easepick/[email protected]/dist/index.umd.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@easepick/[email protected]/dist/index.umd.min.js"></script>
</head>
<body>
<input id="datepicker"/>
<script>
const picker = new easepick.create({
element: document.getElementById('datepicker'),
css: [
'https://cdn.jsdelivr.net/npm/@easepick/[email protected]/dist/index.css',
'https://cdn.jsdelivr.net/npm/@easepick/[email protected]/dist/index.css',
],
plugins: ['RangePlugin'],
RangePlugin: {
tooltip: true,
},
});
picker.on('select', (e) => {
console.log(picker.getStartDate().format('DD-MM-YYYY'));
console.log(picker.getEndDate().format('DD-MM-YYYY'));
})
</script>
</body>
</html>