Обновление DatePicker только при материализации, если нажата кнопка «Готово» - PullRequest
Новая
       7

Обновление DatePicker только при материализации, если нажата кнопка «Готово»

0 голосов
/ 21 сентября 2018

Я использую DatePicker materializecss (https://materializecss.com/pickers.html),, и похоже, что это должно быть действительно просто, поэтому я немного схожу с ума по этому поводу. Проще говоря, я пытаюсь вызвать событие, только есликнопка «ОК» нажата, но не может идентифицировать это в предоставленной функции onClose (). Если я пытаюсь прослушать конкретное нажатие кнопки, я теряю все, что идет с функцией onClose () (которая приятно упаковывает всю информациюМне нужно на это событие).

Есть ли какой-либо способ с помощью функции onClose (), чтобы я мог определить, какая кнопка вызвала срабатывание onClose ()?

Я по правуновичок, когда дело доходит до javascript и jquery, поэтому любая помощь приветствуется.

HTML 

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

Javascript код для инициализации DatePicker 

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

Создан модальный DatePicker 

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

Ответы [ 3 ]

0 голосов
/ 21 сентября 2018

Сначала вы можете инициализировать Datepicker просто с помощью vanillaJS, затем, если вы проверите файл materialize.css, вы найдете кнопку class name of 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
    }
});
0 голосов
/ 26 сентября 2018

Все ответы были чрезвычайно полезны для выяснения этого, спасибо тем, кто внес свой вклад!

Я не знаю, является ли это самым элегантным решением, но оно работает для меня.Я сохранил вызов 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
};
0 голосов
/ 21 сентября 2018

Этот код ниже поможет вам найти нужную кнопку, с которой вы хотите что-то сделать.Добавьте 2 слушателя к кнопке «Готово» и «Отмена» этого открытого модального режима в onOpen (), и удалите слушателей 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>
...