在Magento前端页面使用日历控件_magento教程_php教程

网上各种Calendar、DatePicker令人眼花缭乱，但是成熟度相差很大，有的没有本地化、有的响应速度慢。
由于Magento默认基于Prototype，所以我们选择范围主要限制在protoype上建立的日历控件，感觉免费的prototype日历控件并不多好找。

如果进入Magento后台，大家会看到有很多地方使用了calendar控件:

Magento选择的这个Calendar比较完善，使用的是开源项目：http://www.dynarch.com/projects/calendar/
前台如果想使用它需要载入如下js和css

			Html代码  

			<reference name="head">  

			   <action method="addItem"><type>js_css</type><name>calendar/calendar-win2k-1.css</name><params/><!--<if/><condition>can_load_calendar_js</condition>--></action>  

			   <action method="addItem"><type>js</type><name>calendar/calendar.js</name><!--<params/><if/><condition>can_load_calendar_js</condition>--></action>  

			   <action method="addItem"><type>js</type><name>calendar/calendar-setup.js</name><!--<params/><if/><condition>can_load_calendar_js</condition>--></action>  

			</reference>

然后载入本地化js，Magento对其进行了封装，为一个html文件,将后台使用的模板文件复制一份到前台模板目录(calendar.phtml)

			Xml代码  

			<reference name="content">  

			    <block type="core/html_calendar" name="head.calendar" as="calendar" template="page/js/calendar.phtml"/>  

			</reference>

这样代码中就可以使用它了

			Html代码  

			<input type="text" name="birthday" id="birthday" value="" class="input-text" />  

			<img src="<?php echo $this->getSkinUrl('images/grid-cal.gif') ?>" id="birthday-trig" />  

			<script type="text/javascript">  

			//<![CDATA[ 

			Calendar.setup({ 

			  inputField: "birthday", 

			  ifFormat: "%Y-%m-%d", 

			  showsTime: false, 

			  button: "birthday-trig", 

			  align: "Bl", 

			  singleClick : true 

			}); 

			//]]>  

			</script>

仔细看上面的代码是如何将image和input对象绑定的。 (责任编辑：好模板)