Azoth Azoth - 26 days ago 11
PHP Question

Yii2 kartik datepicker multiple inline

I want a Datepicker inline with multidate enabled.

It is rendered correctly but returns only the last selected date.

Return value:

'12.11.2016'


If I set
'type'
to
TYPE_INPUT
everything is working fine.


Expected return Value:
'23.11.2016, 24.11.2016, 18.11.2016, 12.11.2016'


<?= $form->field($model, 'dateString')->widget(DatePicker::className(), [
'type' => DatePicker::TYPE_INLINE,
'pluginOptions' => [
'multidate' => true,

],
]);
?>


I'm using
"kartik-v/yii2-widget-datepicker": "@dev"
and the model is a ActiveRecord Model.

Answer

Yes it seems like the problem exists and already someone asked about it here

https://github.com/2amigos/yii2-date-picker-widget/issues/14

It seems currently there is no workaround for that in the plugin yet.So for a temporary solution what I did was I changed the DatePicker.php code found at vendor/karthik-v/yii2-widget-datepicker/DatePicker.php.

Change the function registerAssets() inside DatePicker.php as given below

 public function registerAssets()
    {
        if ($this->disabled) {
            return;
        }
        $view = $this->getView();
        $view->registerJs('jQuery.fn.kvDatepicker.dates={};');
        if (!empty($this->_langFile)) {
            DatePickerAsset::register($view)->js[] = $this->_langFile;
        } else {
            DatePickerAsset::register($view);
        }
        $id = $this->options['id'];
        $input = "jQuery('#{$id}')";
        $el = "jQuery('#" . $this->options['data-datepicker-source'] . "')";
        $this->registerPlugin($this->pluginName, $el);
         if($this->type === self::TYPE_INLINE && isset($this->pluginOptions["multidate"]) && $this->pluginOptions["multidate"] == true)
        {
            $view->registerJs("{$el}.on('changeDate',function(e){if({$input}.val() === ''){{$input}.val(e.format()).trigger('change');}else{{$input}.val({$input}.val()+','+e.format()).trigger('change')}});");
        }
        else if ($this->type === self::TYPE_INLINE) {
            $view->registerJs("{$el}.on('changeDate',function(e){{$input}.val(e.format()).trigger('change')});");             
        }

        if ($this->_hasAddon && $this->removeButton !== false) {
            $view->registerJs("initDPRemove('{$id}');");
        }
        if ($this->_hasAddon) {
            $view->registerJs("initDPAddon('{$id}');");
        }
        if ($this->type === self::TYPE_RANGE) {
            FieldRangeAsset::register($view);
            $view->registerJs("initDPRemove('{$id}', true);");
        }
    }

Essentially what I did was I added the lines

 if($this->type === self::TYPE_INLINE && isset($this->pluginOptions["multidate"]) && $this->pluginOptions["multidate"] == true)
        {
            $view->registerJs("{$el}.on('changeDate',function(e){if({$input}.val() === ''){{$input}.val(e.format()).trigger('change');}else{{$input}.val({$input}.val()+','+e.format()).trigger('change')}});");
        }

So that the new date value selected will get appended with a comma with the old values as you suggested in the question.I have tested this and is working fine in my system

enter image description here

Hope this post would be helpful to those who are facing this problem. It would be nice if you could also add a clear button so that if wrong date gets selected you can clear it without refreshing page :).