Bootstrap Datepicker Does Not Work

Hi all,

I’m not able to get the following script working. It’s a bootstrap-datepicker

I’m using this js : www_dot_eyecon_dot_ro/bootstrap-datepicker

In my view I’m loading it like this :




Yii::app()->clientScript->registerCoreScript('jquery'); 

Yii::app()->clientScript->registerCoreScript('jquery.ui'); 

Yii::app()->clientScript->registerScriptFile(Yii::app()->baseUrl.'/helpers/datepicker/js/bootstrap-datepicker.js');

Yii::app()->clientScript->registerCssFile(Yii::app()->baseUrl.'/helpers/datepicker/css/datepicker.css');



I have also the following sections on my view :




<script type="text/javascript">

	


	$('#dp3').datepicker({

		format: 'mm-dd-yyyy'

	});




</script>


 <div class="input-append date" id="dp3" data-date="12-02-2012" data-date-format="dd-mm-yyyy">

  <input class="span2" size="16" type="text" value="12-02-2012">

  <span class="add-on"><i class="icon-th"></i></span>

</div>






I can’t get the popup/modal to choose the date.

Can anyone help me with this?

Thank you for your help

I use YiiBooster CJuiDatePicker - it is extremely simple. You can download YiiBooster from here. You only need a few modifications to your configuration file then to use CJuiDatePicker it is as simple as placing the following in your view.




$this->widget('zii.widgets.jui.CJuiDatePicker', array(

    'name'=>'publishDate',

    // additional javascript options for the date picker plugin

    'options'=>array(

        'showAnim'=>'fold',

    ),

    'htmlOptions'=>array(

        'style'=>'height:20px;'

    ),

));



It works extremely well plus the other YiiBooster elements are easy to use and you can use Booster and Bootstrap together with no problems. Just an alternative for you.

Hi Anthony

Thank you for you reply and for your suggestion.

Actually, i’m try to provide a DateTimeRangePicker. So i’m using also bootstrap-time picker (jdewit_dot_github_dot_com/bootstrap-timepicker/wihich does not work neither for some reason. I think i’m doing something wrong while loading these scripts. Do you have any idea?

Otherwise, does YiiBooster have a TimePicker component?

Is your browser’s console reporting any javascript errors?

Hi,

I just want to point out that we do not necessarily need bootstrap for CJuiDatePicker.

This is as you can see




$this->widget('zii.widgets.jui.CJuiDatePicker',



a default yii widget and you can use it as follow

Keith- unfortunatly my browser does not show ant error except css warnings.

Any idea?

Why not try another browser?

I did try with firefox and the popup is not showed neither.

Is the loading of the script is correct? I’m new on Yii.

Can you show us all your form code ?

ok, here is my view




<?php

$this->pageTitle=Yii::app()->name;

Yii::app()->clientScript->registerCoreScript('jquery'); 

Yii::app()->clientScript->registerCoreScript('jquery.ui');

Yii::app()->clientScript->registerScriptFile(Yii::app()->baseUrl.'/helpers/bootstrap-datepicker/js/bootstrap-datepicker.js');

Yii::app()->clientScript->registerCssFile(Yii::app()->baseUrl.'/helpers/bootstrap-datepicker/css/datepicker.css'); 

?>

 <script type="text/javascript">

$("#dp3").datepicker({

    format: 'mm-dd-yyyy'

});

</script>  


<h2>Text here</h2>


<div class="input-append date" id="dp3" data-date="12-02-2012" data-date-format="mm-dd-yyyy">

  <input class="span2" size="16" type="text" value="12-02-2012">

  <span class="add-on"><i class="icon-th"></i></span>

</div>




<table class="table table-striped  table-hover  table-condensed">

	<caption></caption>

		<thead>

		<tr>

		  <th style="width : 17%"><i class="icon-calendar"></i> Date</th>      

		  <th><i class="icon-wrench"></i> Intervention</th>			  

		</tr>

		</thead>

	<tbody>

	<?php  foreach($modelHistory as $models) : ?>

		<tr>

		  <td><?php echo $models['col1'] ; ?></td>

		  <td><?php echo $models['col2] ; ?></td>	  

			

		</tr>

	<?php endforeach; ?>

	</tbody>

</table>






I wanted to know how you use CJuiDatePicker but I can not see it here?

Actually I’m not using it because it does not provide a time picker which i need it on my view. Is there any suggestion?

One option you have is clockpick. To use this you will need to add a public variable $time to your model. A nicer time picker would be a jquery time picker such as jtimepicker and again you will need to add a public variable to your model for this to work (timeStart).

I think the real reason is jquery in bootstrap and jquery in Yii framework conflicted.

When I use tab control in bootstrap ,it’s doesn’t work. But tab control in Yii framework is fine.

But until now, I havn’t find the way to solve this problem .