Как превратить TimePicker Джонатаса Уокера в плагин класса JS или jQuery

Question

Как превратить TimePicker Джонатаса Уокера в плагин класса JS или jQuery

1

Я поклонник timepicker из этого SO-ответа, но не могу заставить его работать в проекте, где элементы input создаются динамически. Проблема в том, что этот timepicker должен хранить объект, возвращаемый конструктором. В идеале, timepicker должен работать как datepicker из jQuery-UI. Поэтому я старался быть умным, и перед созданием плагина jQuery я попытался сделать класс javascript следующим образом:

    function MyTimePicker(inputelement) {
        // store the timepicker object
        this.mytimepicker = new TimePicker(inputelement);
        // show picked time in the element
        this.mytimepicker.on('change', function (evt) {
            var value = (evt.hour || '00') + ':' + (evt.minute || '00');
            evt.element.value = value;
        });
    }

и использовать его так на трех входных элементах:

    var dummy1;
    var dummy2;
    var dummy3;
    window.onload = function () {
        dummy1 = new MyTimePicker(jQuery('#time2').get(0));
        dummy2 = new MyTimePicker(jQuery('#time3').get(0));
        dummy3 = new MyTimePicker(jQuery('#time4').get(0));
    };

Это не работает. Всплывающее окно timepicker появляется при нажатии в каждом из элементов ввода, но событие on(change) никогда не вызывается так, что выбранное время не отображается во входном элементе.

Либо из-за отсутствия достаточного опыта работы с объектами Javascript, либо с использованием этого параметра timepicker.

Обновление: я улучшил свой код с помощью прототипа, вот полный код, полностью автономный для игры:

    <!DOCTYPE html>
    <html>
    <head>
        <title>Timepicker class, standalone, by Jonatas Walker</title>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <script src="/jquery.min.js"></script>
        <!--  source: https://github.com/jonataswalker/timepicker.js SO: /questions/114716/html5-time-inputs-shows-12-hours/710080#710080 -->
        <link href="/timepicker.min.css" rel="stylesheet">
        <script src="/timepicker.min.js"></script>
    </head>
    <body>
        <div id="arrayoftimes">
            <input id="time2" type="time" placeholder="Time HH:MM"><br />
            <input id="time3" type="time" placeholder="Time HH:MM"><br />
            <input id="time4" type="time" placeholder="Time HH:MM"><br />
        </div>
        <script>
            // Javascript Class. this disturbs the above reference application of TimePicker. It probably is not re-entrant.
            //constructor
            function MyTimePicker(selector) {
                this.mytimepicker;
                this.init(selector);
            }
            //prototype
            MyTimePicker.prototype = {
                init: function (selector) {
                    var inputelement = jQuery(selector).get(0);
                    this.mytimepicker = new TimePicker(inputelement);
                    // show picked time in the element
                    this.mytimepicker.on('change', function (evt) {
                        var value = (evt.hour || '00') + ':' + (evt.minute || '00');
                        evt.element.value = value;
                    });
                }
            };
        </script>
        <script>
            var dummy1;
            var dummy2;
            var dummy3;
            window.onload = function () {
                dummy1 = new MyTimePicker('#time2');
                dummy2 = new MyTimePicker('#time3');
                dummy3 = new MyTimePicker('#time4');
            };
        </script>
    </body>
    </html>

Теперь первый элемент ввода работает нормально, но выбранное значение времени входит во все три элемента ввода. Остальные два входа показывают диалог timepicker, но выбранное значение не отображается.

В консоли Firebug, после выбора в первый раз, я вижу две ошибки в timepicker.js: TypeError: active undefined.

Может ли это указать, что, как-то, внутренний код timepicker не является повторным?

Или я делаю что-то неправильно с объектно-ориентированным javascript?

Обновить:

Я уверен, что есть ошибка в timepicker.js. Я сообщу здесь, как только найду.

Roland 07 июнь 2017, в 18:16

Источник

Теги:

javascript

object

timepicker

1 ответ

Ещё вопросы

Roland · Answer 1 · 2017-06-14T18-47-00.000Z

Когда gforce301 помогает мне читать документы, я пришел к этому решению, чтобы превратить timepicker в плагин jQuery. Этот код имеет тестовый код и является автономным и содержит флажки для выбора или отмены выбора входов для таймера.

Плагин находится в конце этого кода.

Работа: вы можете добавить дополнительные входы с помощью timepicker. Проверьте это, выбрав больше флажков.

Не работает: вы не можете удалить таймер из ввода. Если вы отмените выбор флажка, соответствующий вход не будет указан в новом целевом списке, переданном setTarget(), но timepicker продолжает работать с выбранным входом.

<!DOCTYPE html>
<html>
    <head>
        <title>Test of Timepicker class, standalone, by Jonatas Walker</title>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <script src="/jquery.min.js"></script>
        <!--  source: https://github.com/jonataswalker/timepicker.js SO: https://stackoverflow.com/a/36758501/1845672 -->
        <link href="http:/timepicker.min.css" rel="stylesheet">
        <script src="http:/timepicker.min.js"></script>
        <style>
            .timepicker {background-color: yellow;}
        </style>
    </head>
    <body>
        <div id="arrayoftimes">
            Time 1
            <input type="checkbox" onclick="settimeclass(this, '#time1')" />
            <input id="time1" type="text" placeholder="Time HH:MM"/>
            <br />
            Time 2
            <input type="checkbox" onclick="settimeclass(this, '#time2')" />
            <input id="time2" type="text" placeholder="Time HH:MM"/>
            <br />
            Time 3
            <input type="checkbox" onclick="settimeclass(this, '#time3')" />
            <input id="time3" type="text" placeholder="Time HH:MM"/>
            <br />
            <br />
            ID with timepicker: <span id='msg'></span>
        </div>
        <script> //this code is specific for this particular page
            // at page load, uncheck all checkboxes
            $('input:checkbox').prop('checked', false);
            $('input:text').val('');
            // when (un)checking a checkbox, adjust the timepicker class on each time input
            function settimeclass(self, id){
                if ($(self).prop('checked')){
                    $(id).addClass('timepicker');
                }else{
                    $(id).removeClass('timepicker');
                }
                // apply the new jquery plugin for the timepicker
                $('.timepicker').timepicker();
            }
        </script>
        <script> // this code could be moved to a library
            // jquery plugin for Jonatas timepicker
            (function ( $ ) {
                // create time picker object
                var _timepickerobj = new TimePicker([]);//([...], {lang:'en', theme:'dark'});
                // attach event for formatting the time
                _timepickerobj.on('change', function(evt) {              
                  var value = (evt.hour || '00') + ':' + (evt.minute || '00');
                  evt.element.value = value;
                });
                // set timepicker target to jquery selector
                $.fn.timepicker = function() {
                    var sel_array = this.toArray();
                    //_timepickerobj.target = [];// no effect
                    _timepickerobj.setTarget(sel_array);
                    // debugging: list time input id with timepicker
                    var sel_ids = $.map(sel_array ,function(sel) {return sel.id;});
                    $('#msg').text(sel_ids);
                    return this;
                }
            }( jQuery ));
        </script>
    </body>
</html>

Этот плагин достаточно хорош для моего проекта, но было бы неплохо, если бы кто-то мог улучшить, например, при удалении таймера с входа.