Reusing the Magento’s Calender Control

Magento contains so many controls (widgets, blocks), etc. that you can reuse on the frontend or on the backend. One such control is the calendar control. Calender control mostly used in the backend area of the magento. Now, We can used in the frontend.

Calender Control

To reuse the calendar control in the frontend just we have to follow the below two steps and we used in the frontend area or in any module.
1) Include the javascript files in the app/design/frontend/ [Package_name]/[Theme_name] /layout/mymodule.xml.

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

2) Include the below code in to your phtml file app/design/frontend/ [Package_name]/[Theme_name] /template/mymodule.phtml.

    <img style="" title="Select Date" id="date_select_trig" class="v-middle" alt="" src="<?php echo $this->getSkinUrl("images/calendar.gif");?> "/>
    <input type="text" style="width: 120px;" class="input-text" value="" id="selected_date" name="selected_date"/>
    <script type="text/javascript">
            inputField: "selected_date",
            ifFormat: "%m/%e/%Y %H:%M:%S",
            showsTime: true,
            button: "date_select_trig",
            align: "Bl",
            singleClick : true

By applying above code, we used in any .phtml file or at any place in the magento frontend.
Hope this was helpful.

Speak Your Mind

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: