Yii Framework Forum: Bootstrap Datepicker Does Not Work - Yii Framework Forum

Jump to content

Page 1 of 1
  • You cannot start a new topic
  • You cannot reply to this topic

Bootstrap Datepicker Does Not Work Rate Topic: -----

#1 User is offline   codex 

  • Newbie
  • Yii
  • Group: Members
  • Posts: 9
  • Joined: 28-November 12

Posted 04 December 2012 - 05:23 PM

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
0

#2 User is offline   Anthony Gough 

  • Junior Member
  • Pip
  • Yii
  • Group: Members
  • Posts: 52
  • Joined: 29-October 12

Posted 04 December 2012 - 09:37 PM

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

#3 User is offline   codex 

  • Newbie
  • Yii
  • Group: Members
  • Posts: 9
  • Joined: 28-November 12

Posted 05 December 2012 - 02:44 AM

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?
0

#4 User is offline   Keith 

  • Elite Member
  • Yii
  • Group: Moderators
  • Posts: 1,485
  • Joined: 04-March 10
  • Location:UK

Posted 05 December 2012 - 04:02 AM

Is your browser's console reporting any javascript errors?
0

#5 User is offline   fouss 

  • Advanced Member
  • PipPipPip
  • Yii
  • Group: Members
  • Posts: 385
  • Joined: 05-October 10
  • Location:Bamako Mali

Posted 05 December 2012 - 04:40 AM

View PostAnthony Gough, on 04 December 2012 - 09:37 PM, said:

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,
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
Posted Image
0

#6 User is offline   codex 

  • Newbie
  • Yii
  • Group: Members
  • Posts: 9
  • Joined: 28-November 12

Posted 05 December 2012 - 04:47 AM

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

Any idea?
0

#7 User is offline   fouss 

  • Advanced Member
  • PipPipPip
  • Yii
  • Group: Members
  • Posts: 385
  • Joined: 05-October 10
  • Location:Bamako Mali

Posted 05 December 2012 - 05:24 AM

View Postcodex, on 05 December 2012 - 04:47 AM, said:

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

Any idea?

Why not try another browser?
Posted Image
0

#8 User is offline   codex 

  • Newbie
  • Yii
  • Group: Members
  • Posts: 9
  • Joined: 28-November 12

Posted 05 December 2012 - 05:45 AM

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

#9 User is offline   fouss 

  • Advanced Member
  • PipPipPip
  • Yii
  • Group: Members
  • Posts: 385
  • Joined: 05-October 10
  • Location:Bamako Mali

Posted 05 December 2012 - 06:07 AM

View Postcodex, on 05 December 2012 - 05:45 AM, said:

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 ?
Posted Image
0

#10 User is offline   codex 

  • Newbie
  • Yii
  • Group: Members
  • Posts: 9
  • Joined: 28-November 12

Posted 05 December 2012 - 02:57 PM

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>



0

#11 User is offline   fouss 

  • Advanced Member
  • PipPipPip
  • Yii
  • Group: Members
  • Posts: 385
  • Joined: 05-October 10
  • Location:Bamako Mali

Posted 06 December 2012 - 01:37 PM

View Postcodex, on 05 December 2012 - 02:57 PM, said:

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?
Posted Image
0

#12 User is offline   codex 

  • Newbie
  • Yii
  • Group: Members
  • Posts: 9
  • Joined: 28-November 12

Posted 07 December 2012 - 04:21 AM

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?
0

#13 User is offline   Anthony Gough 

  • Junior Member
  • Pip
  • Yii
  • Group: Members
  • Posts: 52
  • Joined: 29-October 12

Posted 09 December 2012 - 09:19 PM

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

#14 User is offline   dahuzizyd 

  • Junior Member
  • Pip
  • Yii
  • Group: Members
  • Posts: 25
  • Joined: 21-June 11

Posted 10 December 2012 - 02:39 AM

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

Share this topic:


Page 1 of 1
  • You cannot start a new topic
  • You cannot reply to this topic

1 User(s) are reading this topic
0 members, 1 guests, 0 anonymous users