Yii2 Kartik TimePicker - 不能在多个模态窗口中使用

Question

I have a page that launches modal windows that include two TimePicker widgets. When opening the first modal, everything works. It can be reopened as well. However, when opening another modal, I get a console error:

Uncaught TypeError: Cannot read property 'apply' of undefined
at HTMLInputElement.eval (eval at globalEval (jquery.js:343), <anonymous>:851:29)
at Function.each (jquery.js:365)
at jQuery.fn.init.each (jquery.js:137)
at jQuery.fn.init.$.fn.timepicker (eval at globalEval (jquery.js:343), <anonymous>:841:21)
at HTMLDocument.eval (eval at globalEval (jquery.js:343), <anonymous>:3:107)
at fire (jquery.js:3187)
at Object.add [as done] (jquery.js:3246)
at jQuery.fn.init.jQuery.fn.ready (jquery.js:3496)
at eval (eval at globalEval (jquery.js:343), <anonymous>:1:18)
at eval (<anonymous>)

Here is the code causing the error:

//TIMEPICKER PLUGIN DEFINITION
$.fn.timepicker = function (option) {
    var args = Array.apply(null, arguments);
    args.shift();
    return this.each(function () {
        var $this = $(this),
            data = $this.data('timepicker'),
            options = typeof option === 'object' && option;

        if (!data) {
            $this.data('timepicker', (data = new Timepicker(this, $.extend({}, $.fn.timepicker.defaults, options, $(this).data()))));
        }

        if (typeof option === 'string') {
            data[option].apply(data, args); // This is the line that causes problems
        }
    });
};

Here is the PHP code for one of the widgets:

<?= $form->field($model, 'TimeEntryStartTime',[
                'showLabels'=>false
                ])->widget(TimePicker::classname(),[
                    'options' => ['placeholder' => 'Enter time...'],
                ]); ?>

Here is the javascript that launches the modals (similar for each):

// Modal view for Monday
$('#modalButtonMonday').click(function(){
// get the click of the create button
    $('#modalMonday').modal('show')
        .find('#modalContentMonday')
        .load($(this).attr('value'));
});     
$('#modalMonday').on('hidden.bs.modal', function (e) {
  // reload page when modal closed
  location.reload(true);
});

Answer 1

try setting different names in the widget with

'name'=>timepickerName;

or in the 'option' html array insert an ids or class for each one, ex. 'id'=>'timepickerId'

and write another .fn. with the correspondent name or id.