Yii2 DatePicker within Modal - datepicker

Question

when I use the kartik\date\DatePicker within Modal,but it's report error that like https://******.com/assets/d9620747/css/bootstrap-datepicker3.css.map Failed to load resource: the server responded with a status of 404 (Not Found).plz help me;
My Controller's code:
public function actionBook($id = null)
{
$ticket = $this->findModel($id);
$model = new TicketOrder();
if (Yii::$app->request->isPost && $model->load(Yii::$app->request->post())) {
// userCreate scenario
$model->scenario = 'create';
} else {
return $this->renderAjax('book', [
'ticket' => $ticket,
'model' => $model,
]);
}
}
My View's code:
<?php
Modal::begin([
'id' => 'create-modal',
'header' => '<h4 class="modal-title">订票</h4>',
'size' => 'modal-lg',
// 'footer' => 'Close',
]);
Modal::end();
?>
<?php
$js = <<<JS
$(function(){
$(".modal-wraper").click(function(){
var id = $(this).attr('data-id');
var url = "/sights/product-ticket/book?id=" + id;
$.get(url,{},function(data){
$(".modal-body").html(data);
});
$('#create-modal').on('shown.bs.modal', function(){
$('[data-toggle="popover"]').popover();
});
$("#create-modal").modal('show');
});
});
JS;
$this->registerJs($js);
My ajaxRender view's code:
<?php
use kartik\form\ActiveForm;
use kartik\date\DatePicker;
?>
<h3>由于资源方过多，建议一个手机号只购买一张票。</h3>
<?php
$form = ActiveForm::begin([
'type' => ActiveForm::TYPE_HORIZONTAL,
]);
?>
<?= $form->field($model, 'fullname')->textInput() ?>
<?= $form->field($model, 'mobile')->textInput() ?>
<?= $form->field($model, 'plantime')->widget(DatePicker::className(), [
'type' => DatePicker::TYPE_COMPONENT_APPEND,
]) ?>
<?= $form->field($model, 'comment')->textarea() ?>
<div class="button-group">
<?= \yii\helpers\Html::a('关闭', ['#'], ['class' => "btn btn-primary", 'data-dismiss' => "modal"]) ?>
<?= \yii\helpers\Html::button('购买', ['class' => 'btn btn-success pull-right', 'type' => 'submit']) ?>
</div>
<?php
$form->end();
?>
Like this:
image
I got error when I click the DatePicker Button.
[Error] Failed to load resource: the server responded with a status of 404 (Not Found) (bootstrap-datepicker3.css.map, line 0)

Answer 1

This issue has been already resolved. See it on GitHub.
Upgrade datepicker to version 1.4.2.