如何实现点击输入框第二次时关闭easepick日历组件？

你可以通过监听输入框的点击事件，结合easepick实例的状态判断与内置方法来实现需求，具体实现方式如下：

• 获取目标输入框元素，为其绑定点击事件监听
• 在事件处理逻辑中，通过easepick实例的isShown属性判断日历当前的显示状态
• 若日历已显示，调用hide()方法关闭；若未显示，调用show()方法打开
• 阻止事件冒泡，避免与easepick自身的默认点击逻辑产生冲突

修改后的完整代码如下：

const dateInput = document.getElementById('datepicker');
const picker = new easepick.create({
    element: dateInput,
    css: [
        'https://cdn.jsdelivr.net/npm/@easepick/bundle@1.2.1/dist/index.css',
    ],
    calendars: 2,
    grid: 2,
    plugins: ['LockPlugin','RangePlugin'],
    LockPlugin: {
        minDate: new Date(),
    },
    RangePlugin: {
        tooltip: true,
        startDate: new Date(),
        endDate: new Date('2027-12-31'),
        locale: {
            one: 'day',
            other: 'days',
        },
    },    
});

// 绑定输入框点击事件
dateInput.addEventListener('click', (e) => {
    e.stopPropagation();
    if (picker.isShown) {
        picker.hide();
    } else {
        picker.show();
    }
});

如果你的easepick版本支持toggle()方法（该方法可自动切换日历的显示/隐藏状态），也可以简化事件处理逻辑：

dateInput.addEventListener('click', (e) => {
    e.stopPropagation();
    picker.toggle();
});

内容的提问来源于stack exchange，提问作者user30020307