DateTime icker doesn't work

Hi people,

I am using This Ext for the DateTime picker.

I am using it in an ActiveForm inside _search.php

I want to search from a starting date to an end date.

The problems are :

1- The first calendar is populated and works fine (screenshot) but the second calander doesn’t apear when I clik on the text area or the calender icon

2- Wen I insert a starting date and a finish date and hit search button, the starting date is like deleted and replaced by the finish date in the two text areas why ?


<div class="form-group kv-fieldset-inline">

    <?= Html::activeLabel($model, 'calldate', ['label'=>'Recording Time', 'class'=>'col-sm-2 control-label']) ?>

    <div class="col-sm-2" style="width:22%; position:absolute; top:195px; left:265px;">

		<?php //echo '<label style="position:absolute; top:5px; text-align:left;">Recording Time</label>';

				echo DateTimePicker::widget([

					'model'=>$model,

					'attribute' => 'calldate',

					'type' => DateTimePicker::TYPE_COMPONENT_APPEND,

				   // 'size'=> 'md',

				   'options' => ['placeholder' => 'From date'],

					'pluginOptions' => [

						'autoclose'=>true,

						'todayBtn' => true,	

						'format' => 'yyyy-mm-dd hh:ii:ss'

					]

				]);?>

		</div>

    <div class="col-sm-2" style="width:22%; position:absolute; top:195px; left:535px;">

		<?php //echo '<label style="position:absolute; top:5px; text-align:left;">Recording Time</label>';

				echo DateTimePicker::widget([

					'model'=>$model,

					'attribute' => 'calldate',

					'type' => DateTimePicker::TYPE_COMPONENT_APPEND,

				   'options' => ['placeholder' => 'To date'],

				   // 'size'=> 'md',

					'pluginOptions' => [

						'autoclose'=>true,

						'todayBtn' => true,	

						'format' => 'yyyy-mm-dd hh:ii:ss'

					]

				]);?>

    </div>

</div>

Taking a short look at your code I see that you named both attributes the same:




'attribute' => 'calldate',



There is a simple example on that page where you can use both fields, with less code




use kartik\widgets\DatePicker

 

// Client validation of date-ranges when using with ActiveForm

$form = ActiveForm::begin();

echo '<label class="control-label">Select date range</label>';

echo DatePicker::widget([

    'model' => $model,

    'attribute' => 'from_date',

    'attribute2' => 'to_date',

    'options' => ['placeholder' => 'Start date'],

    'options2' => ['placeholder' => 'End date'],

    'type' => DatePicker::TYPE_RANGE,

    'form' => $form,

    'pluginOptions' => [

        'format' => 'dd-M-yyyy',

        'autoclose' => true,

    ]

]);

ActiveForm::end();



Yes I am using only one attribute because I have only this one and I want to search using it

is there any way to do it ?

Your attributes (and HTML input ids) must be unique - else jQuery plugin initializations will behave incorrectly (since they are initialized on a input id). Hence, DatePicker widget that initialize plugins based on ID is expected to give a wrong result (not render the plugin functionality properly) for every duplicate input id you have on the page.

Your use case can be achieved by having two different inputs from_date and to_date and you could trigger your search for your attribute based on these two datasets as well.

Thank you for your help (you have great extensions by the way)

The problem is I have only one attribute for the date in my db “calldate” I don’t have tow like it’s required for this ext.

I used to have a smilar issue with Yii 1.1 and I found a solution to trigger my search by using only one attribute like this

Inside view


. '<div class="row">'

. CHtml::textField('UnitSizeMin', (isset($_GET['UnitSizeMin'])) ? $_GET['UnitSizeMin'] : '', array('style' => 'width:40%;')) 

. CHtml::encode(' To ')

. CHtml::textField('UnitSizeMax', (isset($_GET['UnitSizeMax'])) ? $_GET['UnitSizeMax'] : '', array('style' => 'width:40%;'))

 . '</div>'

And controller


if($item == 'UnitSize' and isset($_GET['UnitSizeMax']) and isset($_GET['UnitSizeMin']) )

{

 if($_GET['UnitSizeMin'] != ""and $_GET['UnitSizeMax'] != "")

   {

     if($propcondition=="")

      $propcondition .= /*"prop_unit.".*/$item." BETWEEN ".$_GET['UnitSizeMin']." AND ". $_GET['UnitSizeMax']. " ";

        else if(isset($_GET['operator']))

         $propcondition .= $_GET['operator']." "/*."prop_unit."*/.$item." BETWEEN ".$_GET['UnitSizeMin']." AND ". $_GET['UnitSizeMax']. " ";

           else 

            $propcondition .= "AND "/*."prop_unit."*/.$item." BETWEEN".$_GET['UnitSizeMin']." AND ". $_GET['UnitSizeMax']. " ";

                         }

                         }

The attribute is UnitSize

So I am wondering if something similar is possible here ? and if yes How can I do it ?

I’ve tried but it’s doesn’t work

This task is actually out of scope of the DateTimePicker :).

For your use case, one option is to use two different non database attributes (from_date and to_date) in your model to capture this - and build your query.

It is very similar to what you have done for UnitSize - you have used two different attributes UnitSizeMin and UnitSizeMax to build your query condition for UnitSize.

and I have to call the function from the controller (TableController) or from the search model(TableSearch) ? (I am a bit lost)

cause I’ve tried with controller and I got an error message like calldateMin does not exist in TableSearch