Question

我正在使用“Hotel Datepicker”脚本：http://lopezb.com/hoteldatepicker/

我正在尝试内联显示日期选择器（例如，显示所有时间而不是在选择日期时关闭）。

我添加了一个函数，当datepicker关闭时会调用该函数来单击输入字段（单击时会打开日期选择器）。 datepicker确实保持打开状态，但在选择了第一组日期后无法使用。

JSFiddle：http://jsfiddle.net/ngu48heq/1/

var daterangepicker = new HotelDatepicker(document.getElementById('daterangepicker'), {
                disabledDates: ['2018-04-20','2018-04-21','2018-04-22','2018-04-23','2018-04-29','2018-04-30'],
                enableCheckout: true,
                format: 'DD/MM/YYYY'
            });

            var input = document.getElementById('daterangepicker');

            input.addEventListener('afterClose', function () {
                $('#daterangepicker').click();
            }, false);

仅供参考，因为datepicker没有使用jQueryUI标准的“datepicker”脚本，我知道它有一个内置的内联选项。

如果有人能告诉我哪里出错了，我会非常感激！

Answer 1

我怀疑点击事件正在搞乱插件的事件监听器。在任何情况下，我都尝试了以下内容，它似乎可以满足您的需求：

var daterangepicker = new HotelDatepicker(document.getElementById('daterangepicker'), {
            disabledDates: ['2018-04-20','2018-04-21','2018-04-22','2018-04-23','2018-04-29','2018-04-30'],
            enableCheckout: true,
            format: 'DD/MM/YYYY'
        });

        var input = document.getElementById('daterangepicker');

        input.addEventListener('afterClose', function () {
            daterangepicker.open(); //use the library's own API
        }, false);

请告诉我这是否适合您？

Answer 2

'afterClose'方法用于在关闭datepicker后执行方法。并且您正在动态设置datepicker上的单击操作，该操作不会让datepicker关闭。

var daterangepicker = new HotelDatepicker(document.getElementById('daterangepicker'), {
                    disabledDates: ['2018-04-20','2018-04-21','2018-04-22','2018-04-23','2018-04-29','2018-04-30'],
                    enableCheckout: true,
                    format: 'DD/MM/YYYY'
                });

            var input = document.getElementById('daterangepicker');

            input.addEventListener('afterClose', function () {
               // Commented the following line, makes the code work. 
               // $('#daterangepicker').click();
            }, false);

http://jsfiddle.net/idhruvs/ngu48heq/10/

内联显示JavaScript创建的元素（单击无法正常工作）

2 个答案: