DatePicker Yii2 in material design style

Viewed 12

I'm working on a project with Yii2. By default, Bootstrap 4.6 is connected to the project. And additionally to this MDB. With most of the Inputs I had no problem reworked to those with Material Design Pro. Only problem is the difference in the datepicker.

My current dp in Yii2 (kartik widget):

<?= DatePicker::widget([
            'model' => $model,
            'options' => ['placeholder' => 'Create date'],
            'attribute' => 'fld_created_at',

            'pluginOptions' => [
                'autoclose' => true,
                'format' => 'yyyy-mm',
                'minViewMode' => 1
            ],

            'pluginEvents' => [
                'changeDate' => 'function(e) { console.log("pick"); window.location.assign("' . $baseUrl . '/exam/index" + "?fld_created_at=" + $("#examsearch-fld_created_at").val());}',
                'clearDate' => 'function(e) { console.log("clear")}',
            ]
        ]); ?>

The result of which is:

<div id="examsearch-fld_created_at-kvdate" class="input-group  date">
    <div class="input-group-prepend">
        <span class="input-group-text kv-date-picker" title="Take date">
              <i class="fas fa-calendar-alt kv-dp-icon"></i>
        </span>
    </div>
<div class="input-group-prepend">
    <span class="input-group-text kv-date-remove" title="Clear">
        <i class="fas fa-times kv-dp-icon"></i>
    </span>
</div>
<input type="text" id="examsearch-fld_created_at" class="form-control krajee-datepicker" name="ExamSearch[fld_created_at]" placeholder="Create date" data-datepicker-source="examsearch-fld_created_at-kvdate" data-datepicker-type="2" data-krajee-kvdatepicker="kvDatepicker_5172a3d4">

</div>

MDB Design:

<div class="md-form">
    <input placeholder="Selected date" type="text" id="date-picker-example" class="form-control datepicker">
    <label for="date-picker-example">Try me...</label>
</div>

Achieving a similar design is not such a big problem. The problem is hooking the action buttons that are outside in the bootstrap of this datepicker. And in MDB, the buttons are located in the calendar window.

Please, direct me to some solution. Thanks!

0 Answers
Related