Materialize Datepicker Only Update if Done 按钮被点击

Question

我正在使用 materializecss Datepicker (https://materializecss.com/pickers.html)，这看起来应该非常简单，所以我有点失去理智。简而言之，我试图仅在单击 "Ok" 按钮时触发事件，但无法在提供的 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文件然后你会发现class name的Ok按钮，那个是，.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
};

Materialize Datepicker Only Update if Done 按钮被点击

Materialize Datepicker Only Update if Done button clicked

javascript

jquery

materialize