在前端页面使用日历控件

koda

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

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



Magento选择的这个Calendar比较完善，使用的是开源项目：http://www.dynarch.com/projects/calendar/
前台如果想使用它需要载入如下js和css
<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)
<reference name="content">    <block type="core/html_calendar" name="head.calendar" as="calendar" template="page/js/calendar.phtml"/></reference>

这样代码中就可以使用它了
<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对象绑定的。