物化日期选择器仅在单击完成按钮时更新

Question

我正在使用 materializecss Datepicker (https://materializecss.com/pickers.html)，这看起来应该非常简单，所以我有点失去理智了。简而言之，我试图仅在单击“确定”按钮时触发事件，但无法在提供的 onClose() 函数中识别该事件。如果我尝试监听特定的按钮点击，我会丢失 onClose() 函数附带的所有内容（它很好地打包了我需要的关于该事件的所有信息）。

有什么方法可以通过 onClose() 函数确定是哪个按钮导致 onClose() 触发？

当谈到 javascript 和 jquery 时，我无疑是个新手，因此感谢您提供任何帮助。

HTML

<input type="text" class="datepicker" value="8/4/2018" job="533">

用于初始化日期选择器的 Javascript 代码

$(document).ready(function(){
    $('.datepicker').datepicker({
      "format": "m/d/yyyy",
      onClose() {
          // only do something if this was fired from the "Done" button
      }
    })
});

已创建日期选择器模式

<div class="modal datepicker-modal" id="modal-a5a43c91-2426-5565-c216-1d8ccd0cfc1d" tabindex="0">
    <div class="modal-content datepicker-container">
        <div class="datepicker-date-display">
            <span class="year-text">
            </span>
            <span class="date-text">
            </span>
        </div>
        <div class="datepicker-calendar-container">
            <div class="datepicker-calendar">
            </div>
            <div class="datepicker-footer">
                <button class="btn-flat datepicker-clear waves-effect" style="visibility: hidden;" type="button">
                </button>
                <div class="confirmation-btns">
                    <button class="btn-flat datepicker-cancel waves-effect" type="button">
                        Cancel
                    </button>
                    <button class="btn-flat datepicker-done waves-effect" type="button">
                         Ok
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>

Answer 1

下面的这段代码可以帮助你找到想要用它做一些事情的正确按钮。在 onOpen() 中将 2 个侦听器添加到该打开模式的完成和取消按钮，并删除侦听器 onClose()。 这对你有用。

<script>
    $(document).ready(function() {
        function Cancel() {
            if(!this.hasEvent) {
                this.hasEvent = true;
                console.log('Clicked on cancel btn:', this.cancelBtn);
            }
        }
        function Done() {
            if(!this.hasEvent) {
                this.hasEvent = true;
                console.log('Clicked on done btn:', this.doneBtn);
            }
        }
        $('.datepicker').datepicker({
            "format": "m/d/yyyy",
            onOpen: function(e) {
                var that = this;
                that.hasEvent = false;
                this.cancelBtn.addEventListener('click', Cancel.bind(that))
                this.doneBtn.addEventListener('click', Done.bind(that))
            },               
            onClose: function(e) {
                var that = this;
                this.cancelBtn.removeEventListener('click', Cancel.bind(that))
                this.doneBtn.removeEventListener('click', Done.bind(that))
            }
        })
    });
</script>

Answer 2

首先你可以使用vanillaJS初始化Datepicker，然后如果你检查materialize.css文件，你会发现Ok按钮的class name，即.datepicker-done。您可以将 addEventListener 附加到此按钮并调用您想要的任何函数。

document.addEventListener('DOMContentLoaded', function () {
    var elems = document.querySelector('.datepicker'); 
    var instance = M.Datepicker.init(elems);
    var doneBtn = document.querySelector('.datepicker-done');
    doneBtn.addEventListener('click', callThis); //Attaching a 'click' event to done button

    function callThis() {
        console.log('Done Button clicked only!'); //Checking the done button click
        console.log(elems.getAttribute('job')); //To get the job attribute value
    }
});

Answer 3

所有的回复都对解决这个问题非常有帮助，感谢那些做出贡献的人！

我不知道这是否是最优雅的解决方案，但它对我有用。我保留 jquery 调用来初始化页面上的所有日期选择器，然后使用 forEach 循环添加事件侦听器。为了获得我想要的值，我不得不进行一系列看起来很疯狂的.parent() 电话，但它始终能让我得到正确的信息。希望这有助于将来处理相同问题的人（或者它可以帮助其他人提供更有效的答案！）。

$(document).ready(function(){
    $('.datepicker').datepicker({
      "format": "m/d/yyyy",
    })
  });
  document.addEventListener('DOMContentLoaded', function () {
    var doneBtn = document.querySelectorAll('.datepicker-done');
    doneBtn.forEach(function(elem) {
        elem.addEventListener('click', callThis)
    });
  });

function callThis() { 
    var update = $(this).parent().parent().parent().parent().parent().siblings('input');
    // do the thing I want with that input value
};