Zend Framework and jQuery Datepicker

I am pretty new to Zend Framework, and have been reading its reference for awhile. Today I was trying to work with Zend jQuery class and playing with datepicker. My task was trying to make two datepicker start_date and end_date, and so that after choosing the start_date, end_date will began from the selected start date (which will be using the demo code from the jQuery UI demo datepicker Event Search .


First, it is pretty easy. I assume you know how to load jQuery. (If not, maybe you should watch ZendCasts which save me a lot of time to understand Zend Framework.)

This is my simple ZendX_JQuery_Form:

class Form_Test extends ZendX_JQuery_Form 
{
   		$elem = new ZendX_JQuery_Form_Element_DatePicker('start_date', array(
					'label' 		=> 'Start Date',
					'required'		=> true,
					'validators'	=> array('Date'),
					'jQueryParams'	=> array(
						'dateFormat' => 'dd-mm-yy',
						'minDate'	 => '+1'
		)));
		
		$this->addElement($elem);
		
		$elem = new ZendX_JQuery_Form_Element_DatePicker('end_date', array(
					'label' 		=> 'End Date',
					'required'		=> true,
					'validators'	=> array('Date'),
					'jQueryParams'	=> array(
						'dateFormat' 	=> 'dd-mm-yy',
						'minDate'	 	=> '+1')			
		));

		$this->addElement($elem);
}

and in my controller class:

class TestController extends Zend_Controller_Action 
{
 public function init()
    {
        /* Initialize action controller here */
    	$this->view->addHelperPath('ZendX/JQuery/View/Helper', 'ZendX_JQuery_View_Helper');
    }
    
	public function indexAction() 
	{
		$this->view->testform = new Form_Test();
		
	}
}

and viewscript:

<?php echo $this->doctype()?>
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>

<?= $this->headLink();?>
<link type="text/css" href="/css/redmond/jquery-ui-1.8.5.custom.css" rel="Stylesheet" />	
<?= $this->jQuery();?>

</head>
<body>
<?= $this->testform; ?>
</body>
</html>

and the output on my browser is :


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>

<link href="/css/screen.css" media="screen, projection" rel="stylesheet" type="text/css" />
<!--[if IE]> <link href="/css/ie.css" media="screen, projection" rel="stylesheet" type="text/css" />
<![endif]-->
<link href="/css/print.css" media="print" rel="stylesheet" type="text/css" />
<link type="text/css" href="/css/redmond/jquery-ui-1.8.5.custom.css" rel="Stylesheet" />	

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js">
</script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/jquery-ui.min.js">
</script>

<script type="text/javascript">
//<![CDATA[
$(document).ready(function() {
    $("#start_date").datepicker({"dateFormat":"dd-mm-yy","minDate":"+1"});
    $("#end_date").datepicker({"dateFormat":"dd-mm-yy","minDate":"+1"});
});
//]]>

</script>
</head>

<body>

<form action="" method="post">
<dt id="start_date-label"><label for="start_date" class="required">Start Date
</label>
</dt>
<dd>
<input type="text" name="start_date" id="start_date" value="" />
</dd><dt id="end_date-label"><l;abel for="end_date" class="required">End Date
</label>
</dt>
<dd>
<input type="text" name="end_date" id="end_date" value="" />
</dd>
</form>
</body>
</html>

So my question is how can I add the jQuery demo event search code to this: (copied from jQuery UI demo datepicker event search)

<script>
	$(function() {
		var dates = $( "#from, #to" ).datepicker({
			defaultDate: "+1w",
			changeMonth: true,
			numberOfMonths: 3,
			onSelect: function( selectedDate ) {
				var option = this.id == "from" ? "minDate" : "maxDate",
					instance = $( this ).data( "datepicker" );
					date = $.datepicker.parseDate(
						instance.settings.dateFormat ||
						$.datepicker._defaults.dateFormat,
						selectedDate, instance.settings );
				dates.not( this ).datepicker( "option", option, date );
			}
		});
	});
	</script>

(Note that I change #from to #start_date and #to to #end_date from the above code to suit my application.)

I have tried to add to jQueryParams “onSelect”, but it did not work because the parameter seem to quoted and also the javascript is escaped. Then I tried to add it directly to the viewscript, but it also did not work because the datepicker is already initialized.

Then I modified little bit on my viewscript: the line with jQuery, and I changed $this->jQuery to $this->jQuery(ZendX_JQuery::RENDER_LIBRARY) (you may want to see jQuery Ref to see all options), and it is working. The reason is this time the jQuery view helper only render the jQuery and jQuery UI library, but not the javascript code:

<script type="text/javascript">
//<![CDATA[
$(document).ready(function() {
    $("#start_date").datepicker({"dateFormat":"dd-mm-yy","minDate":"+1"});
    $("#end_date").datepicker({"dateFormat":"dd-mm-yy","minDate":"+1"});
});
//]]>

</script>

So that the datepicker is not initialized by jQuery view helper, but rendered by me at the viewscript.

However, I still want jQuery view helper render the javascript for me…. finally, I found the way to add option to datepicker even if it is already initialized. (actually it is written at jQuery

This is my new code that added to the viewscript:

<script type="text/javascript">
$(document).ready(function() {

var dates = $( "#start_date, #end_date" ).datepicker('option','onSelect',
		function( selectedDate ) 
			{					
				var option = this.id == "start_date" ? "minDate" : "maxDate",
				instance = $( this ).data( "datepicker" );
				date = $.datepicker.parseDate(
						instance.settings.dateFormat,
						selectedDate, instance.settings );
				dates.not( this ).datepicker( "option", option, date );
			});
});
</script> 

By using datepicker(‘option’,options), I can add event to my datepicker, which I think it is the best solution so far to handle event to it. There are probably better ways to do it when I read more about Zend Framework and jQuery, but this is just a little reminder for myself, so that I do not have to spend time again to look for it. 🙂

Post to Twitter Post to Plurk Post to Yahoo Buzz Post to Delicious Post to Digg Post to Facebook Post to MySpace Post to Ping.fm Post to Reddit Post to StumbleUpon

6 thoughts on “Zend Framework and jQuery Datepicker

  1. Thanks. Yea, it took me awhile to investigate how to work the best with them. I am sure there are many ways to do it. I am going to try to see if I can use Zend_Json_Expr to pass in javascript expressions to jQueryParams. I think it may work. 🙂

  2. Thank you for this approach zendx,
    despite all this code I have a basic error: “datepicker is Not a function” but I don’t see where it comes from the code generated is the same as this post.
    Do you have an idea of where is the error.
    Thank you in advance.
    Sorry for my English

  3. Hi,
    I am not sure about your error, but if it is error from Javascript, then probably you did not include jQuery file on your page. If it is error from Zend, then I guess you may be something wrong with your configuration file. For example, I will need to add autoloaderNamespaces[] = “ZendX_” in my .ini configuration file in order to setup my application to work with ZendX library. I am not sure if you have done that because I did not mention it in my post. hope this may help.

  4. Hi
    Very helpful, and your article made ​​clear understanding of the principles of ZendX, extremely helpful, good luck!

Leave a Reply