Materialize Datepicker Only Update if Done button clicked

Question

I am using the materializecss Datepicker (https://materializecss.com/pickers.html), and this seems like it should be really straightforward so I'm losing my mind a bit over it. Put simply, I'm trying to trigger an event only if the "Ok" button is clicked, but cannot identify that in the onClose() function provided. If I try to listen for the specific button click, I lose all that comes with the onClose() function (which nicely packages up all the info I need on that event).

Is there any way, with the onClose() function, that I can identify which button caused that onClose() to fire?

I'm admittedly a novice when it comes to javascript and jquery, so any help is appreciated.

HTML

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

Javascript Code to initialize the datepicker

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

Datepicker modal created

<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

This code below can help you get the right button you want to do some stuff with it. Add 2 listeners to the done and cancel buttons of that opened modal right in onOpen(), and remove listeners onClose(). This will work for you.

<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>