Kartik's Yii2 Datepicker resets to default after using method/event

Question

I've been having troubles with Kartik's Datepicker. After listening to an event like this:

$('#participationtype-dates').kvDatepicker()
.on('show', function (e) {
    console.log('e');
});

or changing date with a method like this:

'pluginOptions' => [
    'format'         => 'yyyy-mm-dd',
    'autoclose'      => true,
    'todayHighlight' => true,
    'toggleActive'   => true,
],
'pluginEvents'  => [
    'changeDate' => "function(e) {
        var startDate = $('#input-start-date').val();
        if (startDate) { 
        s = startDate.replace(/(\d{4})-(\d{1,2})-(\d{1,2})/, function(match,y,m,d) { 
        return m + '/' + d + '/' + y;  
        });
        }

        $('#input-end-date').kvDatepicker('setStartDate', s);
        $('#input-end-date').kvDatepicker('setDate', s);      
        $('#input-end-date').val(s.replace(/(\d\d)\/(\d\d)\/(\d{4})/, '$3-$1-$2'));            
        }",
],

the whole datepicker resets to defaults, seems like an identical problem here: https://github.com/kartik-v/yii2-widget-datepicker/issues/53 (thread closed, dunno why).

Has anyone got Kartik's Datepicker to work with events and methods?

Answer 1

Use postfixed selector, e.g. "#[your-selector]-kvdate" or "#[your-selector]-disp-kvdate".

Try something like this:

'pluginEvents' =>[
    "changeDate" => "function(e) {
          $('#input-end-date').val('');
          $('#input-end-date-disp-kvdate').kvDatepicker('update', '');
          $('#input-end-date-disp-kvdate').kvDatepicker('setStartDate', new Date(e.date));
    }",
]

Answer 2

I have the same issue. I ended up overwriting the default values I want in JS.

// ¯\_(ツ)_/¯
$.fn.kvDatepicker.defaults.todayHighlight = true;
$.fn.kvDatepicker.defaults.format = 'yyyy-mm-dd';