Change Width of datepicker field

Yii 2.0 General Discussions
1

Hello everyone,

I’m fairly new to the Yii2 framework, so I’m having some issues solving this simple problem.

I’m using the datepicker of dosamigos.

My code looks something like this:

<?= $form->field($model, ‘Data_entrada’)->widget(

DatePicker::className(), [


    // inline too, not bad


    'language' =&gt; 'pt',


    'inline' =&gt; false, 


    'options' =&gt; ['placeholder' =&gt; 'Escolha a data de entrada ...'],


     // modify template for custom rendering


    //'template' =&gt; '&lt;div class=&quot;well well-sm&quot; style=&quot;background-   color: #fff; width:250px&quot;&gt;{input}&lt;/div&gt;',


'clientOptions' =&gt; [


    'autoclose' =&gt; true,


    'todayHighlight' =&gt; true,


        'format' =&gt; 'yyyy-mm-dd'


    ]

]);?>

My input field is long, so I wanted to change the width of the field to something like 200px.

Can you tell me how to do it?

Thank you.

PS- If I uncomment the line in the code it does make the field shorter, the problem is that the "icon" for the calendar disapears.

2

Just add -> [color=#1C2837][size=2]‘options’ => [‘placeholder’ => ‘Escolha a data de entrada …’,‘style’=>‘width:200px;’],[/size][/color]

3

Hi Joji,

Thanks for the reply.

I had already tried that, but it doesn´t work quiet well, has you can see by the screenshot in attachment.

The field does reduce to the size I want, but the calendar icon doesn’t.

6991

dropdpwn.jpg

4

Try this




<div class="row">

	<div class="col-lg-4">

		<?= $form->field($model, 'Data_entrada')->widget(

		DatePicker::className(), [

		// inline too, not bad

		'language' => 'pt',

		'inline' => false, 

		'options' => ['placeholder' => 'Escolha a data de entrada ...'],

		// modify template for custom rendering

		//'template' => '<div class="well well-sm" style="background- color: #fff; width:250px">{input}</div>',

		'clientOptions' => [

		'autoclose' => true,

		'todayHighlight' => true,

		'format' => 'yyyy-mm-dd'

		]

		]);?>

	</div>

</div>
5

That´s just perfect!

Thank you very much!

6

I did not quite understand the solution provided here. But the answer is fairly straight forward. Just specify the style as one of the options.

‘options’ => [‘style’=>‘width:120px;’, ‘class’ => ‘form-control’,],