Bootstrap Datepicker Does Not Work


(Besmm) #1

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


(Anthony Gough) #2

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.


(Besmm) #3

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?


(Kburton) #4

Is your browser’s console reporting any javascript errors?


(Jsfousseni) #5

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


(Besmm) #6

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

Any idea?


(Jsfousseni) #7

Why not try another browser?


(Besmm) #8

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.


(Jsfousseni) #9

Can you show us all your form code ?


(Besmm) #10

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>







(Jsfousseni) #11

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


(Besmm) #12

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?


(Anthony Gough) #13

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).


(Dahuzizyd) #14

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 .