前几天项目中的一个表单需要用到时间选择器,经网上查找,掌握了日期的选择,但时间总是不出来,后来通过分析,发现通过修改一下页面js,搞定!
1:在需要用日期选择器的layout文件,添加:
<reference name="head">
<action method="addItem"><type>js_css</type><name>calendar/calendar-win2k-1.css</name><params/></action>
<action method="addJs"><script>calendar/calendar.js</script></action>
<action method="addJs"><script>calendar/calendar-setup.js</script></action>
<block type="core/html_calendar" name="head.calendar" as="calendar" template="page/js/calendar.phtml"/>
</reference>
2:在表单上添加:
<li class="fields">
<div class="field">
<label for="deliveryDateTime"><?php echo Mage::helper('contacts')->__('Delivery DateTime') ?></label>
<div class="input-box">
<input name="date_time" readonlyid="date_time" title="<?php echo Mage::helper('contacts')->__('Delivery DateTime') ?>" value="" class="input-text" type="text" />
</div>
</div>
<div class="field">
<label > </label>
<div class="input-box">
<img src="<?php echo $this->getSkinUrl().'images/grid-cal.gif'?>" border="0" alt="" title="" id="datatimePicker"/>
</div>
</div>
</li>
3:添加js
<script type="text/javascript">
//<![CDATA[
Calendar.setup({
inputField:"date_time",
ifFormat:"<?php echo Mage::app()->getLocale()->getDateStrFormat(Mage_Core_Model_Locale::FORMAT_TYPE_SHORT) ?> %H:%M",
showsTime:true,
button:"datatimePicker",
align:"br",
singleClick:false
});
//]]>
</script>
如果不需要时间,把showsTime设置为false,同时把标绿色的时间格式去掉