Kartiv yii2 datepicker with model and custom id - yii2

I am using kartik datepicker extension http://demos.krajee.com/widget-details/datepicker in Yii2.
Issue :
If I use this with custom id for input it does not show show model validations
echo kartik\date\DatePicker::widget([
'model' => $objPatientModel,
'form'=>$objActiveForm,
'attribute' => 'date_of_birth',
'options' => ['placeholder' => 'Enter birth date ...', 'id' => 'patient_dob'], **// with id clientside validations for model does not work**
'pluginOptions' => [
'format' => 'dd-mm-yyyy',
'endDate' => date('d-m-Y'),
]
]);
While below code works
echo kartik\date\DatePicker::widget([
'model' => $objPatientModel,
'form'=>$objActiveForm,
'attribute' => 'date_of_birth',
'options' => ['placeholder' => 'Enter birth date ...'],**//id is not used here**
'pluginOptions' => [
'format' => 'dd-mm-yyyy',
'endDate' => date('d-m-Y'),
]
]);
But I want to use custom id .Any suggestions ?

You have to override the selectors, example:
$form->field($model, 'comment', ['selectors' => ['input' => '#myCustomId']])
->textarea(['id' => 'myCustomId']);?>
See https://github.com/yiisoft/yii2/issues/7627

<?=
$form->field($model, 'sales_date')->widget(DateControl::classname(), [
'name' => 'sales_date',
'value' => date('d-m-Y h:i:s'),
'type' => DateControl::FORMAT_DATETIME,
'autoWidget' => true,
'displayFormat' => 'php:d-m-Y h:i:s',
'saveFormat' => 'php:Y-m-d h:i:s',
'saveOptions' => [
'type' => 'hidden',
'form' => 'sales-form-red',
],
])
?>
by using the following option you can add extra form tag to input
'saveOptions' => [
'type' => 'hidden',
'form' => 'sales-form-red',
'class' => 'sales_date',
]
In my case out was
<input type="hidden" id="sales-sales_date" name="Sales[sales_date]" form="sales-form-red">
check by using link
Date Control Demo

Related

Hide historical dropdown selected value in Yii2 DatePicker widget

How to hide history dropdown list in Yii2 kartik select2?
This is my source code:
<div class="col-sm-offset-2 col-sm-10" style="margin-left:135px;margin-bottom:15px">
<label class="control-label">Range Perjalanan Dinas</label>
<?= DatePicker::widget([
'type' => DatePicker::TYPE_RANGE,
'model' => $model,
'attribute' => 'tgl_mulai',
'attribute2' => 'tgl_selesai',
'options' => ['placeholder' => 'Start date'],
'options2' => ['placeholder' => 'End date'],
'form' => $form,
'pluginOptions' => [
'format' => 'dd-mm-yyyy',
'autoclose' => true,
]
]); ?>
</div>
Try 'autocomplete' => 'off' in your date picker options:
<?= DatePicker::widget([
'type' => DatePicker::TYPE_RANGE,
'model' => $model,
'attribute' => 'tgl_mulai',
'attribute2' => 'tgl_selesai',
'options' => ['placeholder' => 'Start date','autocomplete' => 'off'],
'options2' => ['placeholder' => 'End date'],
'form' => $form,
'pluginOptions' => [
'format' => 'dd-mm-yyyy',
'autoclose' => true,
]
]); ?>
You may have to turn off the autocomplete in your form element
Turning off form autocomplete

How to add error messages for DateValidation?

In my model I use DateValidation
['date_birthday', 'date', 'format' => 'd.m.yy', 'min' => '01.01.1900', 'max' => date('d.m.yy'), 'tooSmall'=>'The date is from past. Try another','tooBig' => 'The date is from future. Try another', 'message' => 'Try to input the date'],
In view I call the widget
<?php echo $form->field($modelForm, 'date_birthday')->widget(\kartik\date\DatePicker::classname(), [
'type' => \kartik\date\DatePicker::TYPE_COMPONENT_APPEND,
'pickerButton' => false,
'options' => [
'placeholder' => '',
],
'pluginOptions' => [
'format' => 'dd.mm.yyyy',
'autoclose' => true,
'showMeridian' => true,
'startView' => 2,
'minView' => 2,
]
]) ?>
It checks for min and max dates, but show no error message. I think its because of different date formats in model and view. How to fix it?
If you submit form you will see error messages. According to this issue https://github.com/yiisoft/yii2/issues/7745 yii2 have not client-side validations of date
You can enable ajax validation. Add in create and update action before if statement
if (Yii::$app->request->isAjax && $model->load(Yii::$app->request->post())) {
Yii::$app->response->format = yii\web\Response::FORMAT_JSON;
return ActiveForm::validate($model);
}
And add use yii\widgets\ActiveForm; on the top of controller class. In your _form.php file enable ajax for whole form
<?php $form = ActiveForm::begin([
'enableAjaxValidation' => true,
]); ?>
, or for the field only
<?php echo $form->field($model, 'date_birthday', ['enableAjaxValidation' => true])->widget(\kartik\date\DatePicker::classname(), [
...
Also, you can add plugin options for limit date with startDate and endDate (https://bootstrap-datepicker.readthedocs.io/en/latest/options.html#startdate)
<?php echo $form->field($model, 'date_birthday', ['enableAjaxValidation' => true])->widget(\kartik\date\DatePicker::classname(), [
'type' => \kartik\date\DatePicker::TYPE_COMPONENT_APPEND,
'pickerButton' => false,
'options' => [
'placeholder' => '',
],
'pluginOptions' => [
'format' => 'dd.mm.yyyy',
'autoclose' => true,
'showMeridian' => true,
'startView' => 2,
'minView' => 2,
'startDate' => '01.01.1900',
'endDate' => date('d.m.Y'),
]
]) ?>

Yii2 Custom filter Dropdown for gridview

I am trying to add a custom filter named Sort By Month in the grid view header here is an example of the previous version of the site which I am revamping see below image
I was looking into the layout option of the grid view and added a drop-down in the layout template before {items}
GridView::widget(
[
'dataProvider' => $dataProvider,
'filterModel' => $searchModel,
'layout' => '{summary}{errors}' . \kartik\widgets\Select2::widget(
[
'model' => $searchModel,
'attribute' => 'filter_month',
'theme' => \kartik\widgets\Select2::THEME_DEFAULT,
'data' => $searchModel->getFilterMonths(),
'pluginEvents' => [
"select2:select" => 'function() { $("#w2").submit();}',
// 'select2:select'=> new \yii\web\JsExpression("function(){console.log('here')}"),
],
'options' => [
'placeholder' => '--Select Month--',
],
'pluginOptions' => [
'allowClear' => true,
'width' => '160px',
],
]
) . '{items}{pager}',
'columns' => [
['class' => 'yii\grid\SerialColumn'],
'name',
'title',
'catalog',
'upc_code',
[
'attribute' => 'created_on',
'label' => 'Created On',
'filter' => \yii\jui\DatePicker::widget(['dateFormat' => 'yyyy-MM-dd', 'model' => $searchModel, 'attribute' => 'created_on']),
'format' => 'html',
],
[
'attribute' => 'status',
'label' => 'Status',
'format' => 'raw',
'value' => function ($data) {
switch ($data->status) {
case 0:
return "Being Edited (" . $data->created_on . ")";
break;
case 1:
return ($data->maxdate == '') ? 'Active' : 'Active';
break;
case 2:
return "Expired";
break;
}
},
],
['class' => 'yii\grid\ActionColumn'],
],
]
);
Now I want to submit the filters form when I select an option from the drop-down, but could not figure out how to attach the default filter submit event with the drop-down options so that it filters the results when I select any option in the drop-down.
For Custom filter you have used the perfect layout but you have to provide your custom field as a filterSelector.
"filterSelector" => "#". Html::getInputId($searchModel, 'AttributeName'),

yii2 datepicker show start date greater than current date

I want to show dates which are greater than current date
in ValidFrom and dates greater than ValidFrom in ValidUpto field but unable to show.I want hide previous dates in date picker.
My code is below.
echo DatePicker::widget([
'model' => $model,
'attribute' => 'ValidFrom',
'attribute2' => 'ValidUpto',
'options' => ['placeholder' => 'valid from',
],
'options2' => ['placeholder' => 'valid to'],
'type' => DatePicker::TYPE_RANGE,
'form' => $form,
'pluginOptions' => [
'format' => 'yyyy-mm-dd',
'autoclose' => true,
],
]);
Add a id attribute to the date picker:
echo DatePicker::widget([
'id'=>'mydatepicker',
'model' => $model,
'attribute' => 'ValidFrom',
'attribute2' => 'ValidUpto',
'options' => ['placeholder' => 'valid from',
],
'options2' => ['placeholder' => 'valid to'],
'type' => DatePicker::TYPE_RANGE,
'form' => $form,
'pluginOptions' => [
'format' => 'yyyy-mm-dd',
'autoclose' => true,
],
]);
Set minDate to the date picker in your view file:
<?
$script = <<< JS
$( "#mydatepicker").datepicker({dateFormat: "yyyy-mm-dd", minDate: 0});
JS;
$this->registerJs($script, View::POS_END);
?>

Yii2-editable-widget. Doesn't work with few widgets

I'm using editable widget (2amigos/yii2-editable-widget or kartik-v/yii2-editable). It works fine, but when I try it in foreach it works with first element only. I want to use a several widgets for a model. How can I solve it?
Here is the code:
foreach ($models as $model) {
echo Editable::widget( [
'model' => $model,
'attribute' => 'name',
'url' => 'site/rename',
'type' => 'text',
'mode' => 'pop',
'clientOptions' => [
' pk' => $model->id,
]
]);
}
I guess you have to set a unique id for each Editable Widget. Look how the js code for the widget is embedded.
e.g. if you use kartiks widget
echo Editable::widget([
'model' => $model,
'attribute' => 'name',
'type' => 'primary',
'size'=> 'lg',
'inputType' => Editable::INPUT_TEXT,
'editableValueOptions' => ['class' => 'text-success h3'],
'options'=> [
'id'=>'name-editable'.uniqid(),
]
]);