kartik datepicker not working in yii2

Question

I have used kartik datepicker in yii2 advance application, It was working before I using custom css, not getting any error only input field showing. View Code:

<?php
use yii\helpers\Html;
use yii\widgets\ActiveForm;
use \yii\helpers\ArrayHelper;
use \app\models\Company;
use yii\bootstrap\Modal;
use kartik\datecontrol\Module;
use kartik\datecontrol\DateControl;
use kartik\date\DatePicker;
use kartik\datetime\DateTimePicker;
use \app\models\Project;
use \app\models\Doctype;
use \app\models\Status;
/* @var $this yii\web\View */
/* @var $model app\models\Project */
/* @var $form yii\widgets\ActiveForm */
?>

<div class="project-form">

    <?php $form = ActiveForm::begin(); ?>

    <!--DropdownList created here-->
    <?= $form->field($model, 'project_comp_id')->dropDownList(
        ArrayHelper::map(Company::find()->all(), 'comp_id', 'comp_name'),
        [
            'prompt' => 'Select Project',
        ]);
    ?>
    <?= $form->field($model, 'project_name')->textInput(['maxlength' => true]) ?>

    <?= $form->field($model, 'project_desc')->textArea(['rows' => '6']) ?>
    <?=  $form-> field($model, 'project_start_date')->widget(DatePicker::classname(), [

                    'options' => ['placeholder' => 'Start date & time'],
                    'pluginOptions' => [
                        'autoclose' => true,
                        'format' => 'yyyy-mm-dd', 
                    ]
                ]);
    ?>  
     <?=  $form-> field($model, 'project_end_date')->widget(DatePicker::classname(), [

                    'options' => ['placeholder' => 'End date & time'],
                    'pluginOptions' => [
                        'autoclose' => true,
                        'format' => 'yyyy-mm-dd', 
                    ]
                ]);
        ?>

<!-- 
    <?= $form->field($model, 'created')->textInput() ?>

    <?= $form->field($model, 'verified')->dropDownList([ 'Y' => 'Y', 'N' => 'N', ], ['prompt' => '']) ?>

    <?= $form->field($model, 'updated')->textInput() ?>

    <?= $form->field($model, 'deleted')->dropDownList([ 'Y' => 'Y', 'N' => 'N', ], ['prompt' => '']) ?>
 -->
    <div class="form-group">
        <?= Html::submitButton($model->isNewRecord ? 'Create' : 'Update', ['class' => $model->isNewRecord ? 'btn btn-success' : 'btn btn-primary']) ?>
    </div>

    <?php ActiveForm::end(); ?>

</div>

In the following image form structure is showing:

Answer 1

I had the input field displayed too, but when I clicked on it, it didn't open the date selection box. Although DateRangePicker widget works fine when clicked.

Then it turned out that it opens, just from the bottom in the body.

Anyway, I specified a container for the widget to be displayed in (next to the field) and everything worked. However, it is stretched in width, but with the help of CSS you can fix it.

<div>
<div class="tours-search__field">
    <?= $form->field($searchModel, 'start_date')->widget(DatePicker::classname(), [
        'options' => ['placeholder' => 'Enter date ...'],
        'pluginOptions' => [
            'autoclose' => true,
            'container' => '#date-picker-container',
            'format' => 'dd M, D',
        ]
    ]);
    ?>
</div>
<div id="date-picker-container"></div>
</div>

Answer 2

This is simple solution

use kartik\date\DatePicker;

echo '<label>Check Issue Date</label>';
echo DatePicker::widget([
    'name' => 'check_issue_date', 
    'value' => date('d-M-Y', strtotime('+2 days')),
    'options' => ['placeholder' => 'Select issue date ...'],
    'pluginOptions' => [
        'format' => 'dd-M-yyyy',
        'todayHighlight' => true
    ]
]);

Add this to the require section of your composer.json file:

"kartik-v/yii2-widget-datepicker": "@dev"