Show date picker on frontend in magento

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

<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

<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 :

<?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 !