Generally, there are many ways to do it. In this tutorial, I will show you two ways to show date picker on frontend in magento.
Both ways have the same ideas :
Firstly, we must include all javascript and css which are vital for displaying date picker.
As the second, image calendar , input button and generated javascript also need to be implemented on phtml file.
First way :
In your file phtml
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 |
<script src="<?php echo Mage::getBaseUrl('js')."calendar/calendar.js" ?>" type="text/javascript"></script> <script src="<?php echo Mage::getBaseUrl('js')."calendar/calendar-setup.js" ?>" type="text/javascript"></script> <link rel="stylesheet" type="text/css" href="<?php echo Mage::getBaseUrl('js') ?>calendar/calendar-win2k-1.css" /> <?php echo $this->getLayout()->createBlock('core/html_calendar')->setTemplate('page/js/calendar.phtml')->toHtml();?> <label for="date_picker_id"><?php echo $this->__('Your Label') ?> </label> <img style="" title="Select Date" id="date_select_trig" alt="" src="<?php echo $this->getSkinUrl("images/calendar.gif");?> "/> <input type="text" name="shipping_pickup_at_store_date" id="shipping_pickup_at_store_date" value=""/> <script type="text/javascript"> // <![CDATA[ Calendar.setup({ inputField : 'shipping_pickup_at_store_date', ifFormat : '%m-%d-%Y', showsTime: false, button : 'date_select_trig', singleClick : true, disableFunc: function(date) { //disable previous day in datepicker var now= new Date(); if(date.getFullYear()<now.getFullYear()) { return true; } if(date.getFullYear()==now.getFullYear()) { if(date.getMonth()<now.getMonth()) { return true; } } if(date.getMonth()==now.getMonth()) { if(date.getDate()<now.getDate()) { return true; } } }, }); // ]]> </script> |
Second way :
1/Js and css were embedded in your layout.xml by using the following code :
layout.xml
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<checkout_onepage_index> <reference name="head"> <action method="addItem"><type>js_css</type><name>calendar/calendar-win2k-1.css</name><params/></action> <action method="addItem"><type>js</type><name>calendar/calendar.js</name></action> <action method="addItem"><type>js</type><name>calendar/calendar-setup.js</name></action> </reference> <reference name='checkout.onepage.shipping'> <block type="core/html_calendar" name="html_calendar" as="html_calendar" template="page/js/calendar.phtml"/> <action method='setTemplate'><template>inbusiness/checkout/onepage/shipping.phtml</template></action> </reference> </checkout_onepage_index> |
2/In your phtml file : inbusiness/checkout/onepage/shipping.phtml . Put the blow code :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 |
<?php echo $this->getChildHtml('html_calendar') ?> <label for="date_picker_id"><?php echo $this->__('Your Label') ?> </label> <img style="" title="Select Date" id="date_select_trig" alt="" src="<?php echo $this->getSkinUrl("images/calendar.gif");?> "/> <input type="text" name="shipping_pickup_at_store_date" id="shipping_pickup_at_store_date" value=""/> <script type="text/javascript"> // <![CDATA[ Calendar.setup({ inputField : 'shipping_pickup_at_store_date', ifFormat : '%m-%d-%Y', showsTime: false, button : 'date_select_trig', singleClick : true, disableFunc: function(date) { //disable previous day in datepicker var now= new Date(); if(date.getFullYear()<now.getFullYear()) { return true; } if(date.getFullYear()==now.getFullYear()) { if(date.getMonth()<now.getMonth()) { return true; } } if(date.getMonth()==now.getMonth()) { if(date.getDate()<now.getDate()) { return true; } } }, }); // ]]> </script> |
Note : disableFunc() in init js calendar is using for disable previous days in date picker calendar.
Happy coding !
POST HASN'T TAG.
