I have recently set magento default datepicker at frontend but its not work. I add required file using xml like this,
<layout version="0.1.0">
<!--
Default layout, loads most of the pages
-->
<default translate="label" module="page">
<label>All Pages</label>
<block type="page/html" name="root" output="toHtml" template="page/3columns.phtml">
<block type="page/html_head" name="head" as="head">
<action method="addJs"><script>prototype/prototype.js</script></action>
<action method="addJs"><script>lib/jquery/jquery-1.10.2.min.js</script></action>
<action method="addJs"><script>lib/jquery/noconflict.js</script></action>
<action method="addJs"><script>lib/ccard.js</script></action>
<action method="addJs"><script>prototype/validation.js</script></action>
<action method="addJs"><script>scriptaculous/builder.js</script></action>
<action method="addJs"><script>scriptaculous/effects.js</script></action>
<action method="addJs"><script>scriptaculous/dragdrop.js</script></action>
<action method="addJs"><script>scriptaculous/controls.js</script></action>
<action method="addJs"><script>scriptaculous/slider.js</script></action>
<action method="addJs"><script>varien/js.js</script></action>
<action method="addJs"><script>varien/form.js</script></action>
<action method="addJs"><script>mage/translate.js</script></action>
<action method="addJs"><script>mage/cookies.js</script></action>
<block type="page/js_cookie" name="js_cookies" template="page/js/cookie.phtml"/>
<!-- Remove items which the RWD package is not dependent upoTypeError: this.each is not a functionn -->
<action method="removeItem"><type>skin_js</type><name>js/ie6.js</name></action>
<!-- Add vendor dependencies -->
<action method="addItem"><type>skin_js</type><name>js/lib/modernizr.custom.min.js</name></action>
<action method="addItem"><type>skin_js</type><name>js/lib/selectivizr.js</name></action>
<action method="addItem"><type>skin_js</type><name>js/lib/matchMedia.js</name></action>
<action method="addItem"><type>skin_js</type><name>js/lib/matchMedia.addListener.js</name></action>
<action method="addItem"><type>skin_js</type><name>js/lib/enquire.js</name></action>
<action method="addItem"><type>skin_js</type><name>js/app.js</name></action>
<action method="addItem"><type>skin_js</type><name>js/lib/jquery.cycle2.min.js</name></action>
<action method="addItem"><type>skin_js</type><name>js/lib/jquery.cycle2.swipe.min.js</name></action>
<action method="addItem"><type>skin_js</type><name>js/slideshow.js</name></action>
<action method="addItem"><type>skin_js</type><name>js/lib/imagesloaded.js</name></action>
<action method="addLinkRel"><rel>stylesheet</rel><href>//fonts.googleapis.com/css?family=Raleway:300,400,500,700,600</href></action>
<action method="addItem"><type>skin_js</type><name>js/minicart.js</name></action>
<action method="addItem"><type>js_css</type><name>calendar/calendar-win2k-1.css</name><params></params></action>
<action method="addItem"><type>js</type><name>calendar/calendar.js</name><params></params></action>
<action method="addItem"><type>js</type><name>calendar/calendar-setup.js</name><params></params></action>
<block type="core/html_calendar" name="html_calendar" as="html_calendar" template="page/js/calendar.phtml"/>
<!-- Add stylesheets with no media queries for use in IE 8 and below -->
<action method="addItem"><type>skin_css</type><name>css/styles-ie8.css</name><params/><if><![CDATA[ (lte IE 8) & (!IEMobile)]]></if></action>
<action method="addItem"><type>skin_css</type><name>css/madisonisland-ie8.css</name><params/><if><![CDATA[ (lte IE 8) & (!IEMobile)]]></if></action>
<!-- Add stylesheets with media queries for use by modern browsers -->
<action method="addItem"><type>skin_css</type><name>css/custom.css</name><params/><if><![CDATA[<!--[if (gte IE 9) | (IEMobile)]><!-->]]></if></action>
<action method="addItem"><type>skin_css</type><name>css/styles.css</name><params/><if><![CDATA[<!--[if (gte IE 9) | (IEMobile)]><!-->]]></if></action>
<action method="addItem"><type>skin_css</type><name>css/madisonisland.css</name><params/><if><![CDATA[<!--[if (gte IE 9) | (IEMobile)]><!-->]]></if></action>
<!-- Sets viewport meta tag using text block -->
<block type="core/text" name="head.viewport">
<action method="setText"><text><![CDATA[<meta name="viewport" content="initial-scale=1.0, width=device-width" />]]> </text></action>
</block>
</block>
<block type="core/text_list" name="after_body_start" as="after_body_start" translate="label">
<label>Page Top</label>
</block>
<block type="page/html_notices" name="global_notices" as="global_notices" template="page/html/notices.phtml" />
<block type="page/html_header" name="header" as="header">
<block type="page/template_links" name="top.links" as="topLinks"/>
<block type="page/switch" name="store_language" as="store_language" template="page/switch/languages.phtml"/>
<block type="core/text_list" name="top.menu" as="topMenu" translate="label">
<label>Navigation Bar</label>
<block type="page/html_topmenu" name="catalog.topnav" template="page/html/topmenu.phtml">
<block type="page/html_topmenu_renderer" name="catalog.topnav.renderer" template="page/html/topmenu/renderer.phtml"/>
</block>
</block>
<block type="page/html_wrapper" name="top.container" as="topContainer" translate="label">
<label>Page Header</label>
<action method="setElementClass"><value>top-container</value></action>
</block>
<block type="page/html_welcome" name="welcome" as="welcome"/>
</block>
<block type="page/html_breadcrumbs" name="breadcrumbs" as="breadcrumbs"/>
<block type="core/text_list" name="left_first" as="left_first" translate="label">
<label>Left Column First (shows above main column on smaller screens)</label>
</block>
<block type="core/text_list" name="left" as="left" translate="label">
<label>Left Column</label>
</block>
<block type="core/messages" name="global_messages" as="global_messages"/>
<block type="core/messages" name="messages" as="messages"/>
<block type="core/text_list" name="content" as="content" translate="label">
<label>Main Content Area</label>
</block>
<block type="core/text_list" name="right" as="right" translate="label">
<label>Right Column</label>
</block>
<block type="page/html_wrapper" name="footer.before" as="footer_before" translate="label">
<label>Page Footer</label>
<action method="setElementClass"><value>footer-before-container</value></action>
</block>
<block type="page/html_footer" name="footer" as="footer" template="page/html/footer.phtml">
<block type="page/html_wrapper" name="bottom.container" as="bottomContainer" translate="label">
<label>Page Footer</label>
<action method="setElementClass"><value>bottom-container</value></action>
</block>
<block type="page/switch" name="store_switcher" as="store_switcher" after="*" template="page/switch/stores.phtml"/>
<block type="page/template_links" name="footer_links" as="footer_links" template="page/template/links.phtml">
<action method="setTitle"><title>Quick Links</title></action>
</block>
<block type="page/template_links" name="footer_links2" as="footer_links2" template="page/template/links.phtml">
<action method="setTitle"><title>Account</title></action>
</block>
<!-- This static block can be created and populated in admin. The footer_links cms block can be used as a starting point. -->
<!--<block type="cms/block" name="footer_social_links">
<action method="setBlockId"><block_id>footer_social_links</block_id></action>
</block>-->
</block>
<block type="core/text_list" name="before_body_end" as="before_body_end" translate="label">
<label>Page Bottom</label>
<block type="page/html_cookieNotice" name="global_cookie_notice" as ="global_cookie_notice" template="page/html/cookienotice.phtml" before="-" />
</block>
</block>
<block type="core/profiler" output="toHtml" name="core_profiler"/>
</default>
Form.phtml
<form action="<?php echo Mage::getUrl('checkout/cart/add', array('product'=>$_product->getId(),'qty'=>1, 'form_key' => Mage::getSingleton('core/session')->getFormKey())) ?>" method="post" name="headstone-product-form" id="headstone-product-form" enctype="multipart/form-data">
<?php /* catagory Block start */ ?>
<div class="headstone-tab-block" >
<input type="hidden" value="<?php echo $productId; ?>" name="productName" id="productName" />
<div class="headstone-tab" id="memorial-category"><span> MEMORAIL CATEGORY </span></div>
<?php if(!empty($images)){
foreach($images as $image){
$imageData = $image->getData();
?>
ata-name="<?php echo $imageData['category_name']; ?>" id="headstone-category-<?php echo $imageData['category_name']; ?>" value=" <?php echo $imageData['category_id']; ?>" /> <label for="headstone-category-<?php echo $imageData['category_name']; ?>" ><?php echo $imageData['category_name']; ?></label>
</div>
</div>
<?php } } ?>
</div>
<?php /* catagory Block end */ ?>
<?php /* Type, style, size Block Start */ ?>
<div class="headstone-tab-block" >
<div class="headstone-tab" id="memorial-type"><span>SELECT MEMORAIL TYPE AND SIZE </span></div>
<div class="memorial-block" id="memorial-block-type">
<div class="headstone-style" id="ajax-style-fillup">
<?php /* full data using ajax */ ?>
</div>
<div class="headstone-type" id="ajax-type-fillup">
<?php /* full data using ajax */ ?>
</div>
<div class="headstone-type" id="size-ajax-fillup">
<?php /* fill up using ajax */ ?>
</div>
<input type="hidden" name="stonePrice" id="stonePrice" value="<?php echo $_product->getPrice(); ?>" />
<input type="hidden" name="finalPrice" id="finalPrice" value="<?php echo $_product->getPrice(); ?>" />
<div class="price-info" id="price-info"><?php echo $_product->getPrice(); ?></div>
</div>
</div>
<?php /* Type, style, size Block end */ ?>
<?php /* Color, Pattern Block start */ ?>
<div class="headstone-tab-block" >
<div class="headstone-tab" id="memorial-color"><span>SELECT COLOR AND DESIGN </span></div>
<div class="memorial-block" id="memorial-block-color">
<div class="headstone-color" id="headstone-ajax-color">
<?php /* fill color using ajax */ ?>
</div>
<div class="headstone-pannel" id="headstone-ajax-pannel">
<?php /* fill pannel using ajax */ ?>
</div>
</div>
</div>
<?php /* Color, Pattern Block end */ ?>
<div class="headstone-result hidden">
<div class="headstone-result-head">
<h3 id="headstone-result-title"></h3>
</div>
<div class="headstone-result-parent hidden" id="result-block-single">
<div class="headstone-category-result">
<div class="headstone-color-result" id="headstone-color-result">
<div class="headstone-pannel-result">
<!-- <div class="left-image" id="left-image"></div> -->
<div class="right-image" id="right-image"></div>
<input type="file" name="leftImageName" id="leftImageName" class="hidden" />
<input type="file" name="rightImageName" id="rightImageName" class="hidden" />
<div class="result-name">
<input type="text" class="name required-entry" name="name" id="name" value="" />
</div>
<div class="result-bod">
<input type="text" class="bod required-entry validate-date validate-date-range date-range-start_date-from" name="bod" id="bod" value="" />
<img title="Select date" id="bod_trig" src="<?php echo $this->getSkinUrl('images/calendar.gif')?>" class="v-middle img-bod">
</div>
<div class="result-expire-date">
<input type="text" class="expire-date required-entry validate-date validate-date-range date-range-start_date-to" name="expire-date" id="expire-date" value="" />
<img title="Select date" id="expire_trig" src="<?php echo $this->getSkinUrl('images/calendar.gif')?>" class="v-middle img-bod">
</div>
<div class="result-about-person">
<input type="text" class="result-about required-entry" name="result-about" id="result-about" value="" />
<input type="hidden" class="result-div" name="result_image" id="result_image" value="" />
</div>
</div>
</div>
</div>
</div>
<div class="headstone-result-couple hidden" id="result-block-couple">
<div class="headstone-category-couple">
<div class="headstone-color-couple" id="headstone-color-couple">
<div class="headstone-pannel-couple" id="headstone-pannel-couple">
<div class="left-image-couple" id="left-image-couple"></div>
<div class="right-image-couple" id="right-image-couple"></div>
<input type="file" name="leftImageNameCouple" id="leftImageNameCouple" class="hidden" />
<input type="file" name="rightImageNameCouple" id="rightImageNameCouple" class="hidden" />
<div class="result-namecouple">
<input type="text" class="namecouple required-entry" name="name" id="nameCouple" value="" />
<input type="text" class="namecouple required-entry" name="wifeNameCouple" id="wifeNameCouple" value="" />
</div>
<div class="result-bodcouple">
<span class="left-couple-date">
<input type="text" class="bodcouple required-entry validate-date validate-date-range date-range-start_date-from" name="bod" id="bodCouple" value="" />
<img title="Select date" id="bodCouple_trig" src="<?php echo $this->getSkinUrl('images/calendar.gif')?>" class="v-middle img-bod">
</span>
<span class="right-couple-date">
<input type="text" class="bodcouple required-entry validate-date validate-date-range date-range-start_date-from" name="wifeBodCouple" id="wifeBodCouple" value="" />
<img title="Select date" id="wifeBodCouple_trig" src="<?php echo $this->getSkinUrl('images/calendar.gif')?>" class="v-middle img-bod">
</span>
</div>
<div class="result-expire-datecouple">
<span class="left-couple-date">
<input type="text" class="expire-datecouple required-entry validate-date validate-date-range date-range-start_date-to" name="expire-date" id="expire-date-couple" value="" />
<img title="Select date" id="expire-date-couple_trig" src="<?php echo $this->getSkinUrl('images/calendar.gif')?>" class="v-middle img-bod">
</span>
<span class="right-couple-date">
<input type="text" class="expire-datecouple required-entry validate-date validate-date-range date-range-start_date-to" name="wifeExpire-date-couple" id="wifeExpire-date-couple" value="" />
<img title="Select date" id="wifeExpire_trig" src="<?php echo $this->getSkinUrl('images/calendar.gif')?>" class="v-middle img-bod">
</span>
</div>
<div class="result-about-personcouple">
<input type="text" class="result-aboutcouple required-entry" name="result-aboutCouple" id="result-aboutCouple" value="" />
<input type="hidden" class="result-div" name="result_image_couple" id="result_image_couple" value="" />
</div>
</div>
</div>
</div>
</div>
<?php $buttonTitle = Mage::helper('core')->quoteEscape($this->__('Add to Cart')); ?>
<?php if($_product->isSaleable()): ?>
<div class="price-info" id="price-info-bottom"> <?php echo $_product->getPrice(); ?> </div>
<div class="add-to-cart">
<div class="add-to-cart-buttons">
<button type="submit" title="<?php echo $buttonTitle ?>" class="button btn-cart" ><span><span><?php echo $buttonTitle ?></span></span></button>
<?php echo $this->getChildHtml('', true, true) ?>
</div>
</div>
<?php endif; ?>
</div>
</form> <div class="memorial-block" id="headstone-category">
<div class="headstone-category-image">
<image src="<?php echo Mage::getBaseUrl(Mage_Core_Model_Store::URL_TYPE_MEDIA).$imageData['category_image']; ?>" />
<input type="radio" name="headstone-category" data-image="<?php echo Mage::getBaseUrl(Mage_Core_Model_Store::URL_TYPE_MEDIA).$imageData['category_image']; ?>" data-name="<?php echo $imageData['category_name']; ?>" id="headstone-category-<?php echo $imageData['category_name']; ?>" value=" <?php echo $imageData['category_id']; ?>" /> <label for="headstone-category-<?php echo $imageData['category_name']; ?>" ><?php echo $imageData['category_name']; ?></label>
</div>
</div>
<?php } } ?>
</div>
<?php /* catagory Block end */ ?>
<?php /* Type, style, size Block Start */ ?>
<div class="headstone-tab-block" >
<div class="headstone-tab" id="memorial-type"><span>SELECT MEMORAIL TYPE AND SIZE </span></div>
<div class="memorial-block" id="memorial-block-type">
<div class="headstone-style" id="ajax-style-fillup">
<?php /* full data using ajax */ ?>
</div>
<div class="headstone-type" id="ajax-type-fillup">
<?php /* full data using ajax */ ?>
</div>
<div class="headstone-type" id="size-ajax-fillup">
<?php /* fill up using ajax */ ?>
</div>
<input type="hidden" name="stonePrice" id="stonePrice" value="<?php echo $_product->getPrice(); ?>" />
<input type="hidden" name="finalPrice" id="finalPrice" value="<?php echo $_product->getPrice(); ?>" />
<div class="price-info" id="price-info"><?php echo $_product->getPrice(); ?></div>
</div>
</div>
<?php /* Type, style, size Block end */ ?>
<?php /* Color, Pattern Block start */ ?>
<div class="headstone-tab-block" >
<div class="headstone-tab" id="memorial-color"><span>SELECT COLOR AND DESIGN </span></div>
<div class="memorial-block" id="memorial-block-color">
<div class="headstone-color" id="headstone-ajax-color">
<?php /* fill color using ajax */ ?>
</div>
<div class="headstone-pannel" id="headstone-ajax-pannel">
<?php /* fill pannel using ajax */ ?>
</div>
</div>
</div>
<?php /* Color, Pattern Block end */ ?>
<div class="headstone-result hidden">
<div class="headstone-result-head">
<h3 id="headstone-result-title"></h3>
</div>
<div class="headstone-result-parent hidden" id="result-block-single">
<div class="headstone-category-result">
<div class="headstone-color-result" id="headstone-color-result">
<div class="headstone-pannel-result">
<!-- <div class="left-image" id="left-image"></div> -->
<div class="right-image" id="right-image"></div>
<input type="file" name="leftImageName" id="leftImageName" class="hidden" />
<input type="file" name="rightImageName" id="rightImageName" class="hidden" />
<div class="result-name">
<input type="text" class="name required-entry" name="name" id="name" value="" />
</div>
<div class="result-bod">
<input type="text" class="bod required-entry validate-date validate-date-range date-range-start_date-from" name="bod" id="bod" value="" />
<img title="Select date" id="bod_trig" src="<?php echo $this->getSkinUrl('images/calendar.gif')?>" class="v-middle img-bod">
</div>
<div class="result-expire-date">
<input type="text" class="expire-date required-entry validate-date validate-date-range date-range-start_date-to" name="expire-date" id="expire-date" value="" />
<img title="Select date" id="expire_trig" src="<?php echo $this->getSkinUrl('images/calendar.gif')?>" class="v-middle img-bod">
</div>
<div class="result-about-person">
<input type="text" class="result-about required-entry" name="result-about" id="result-about" value="" />
<input type="hidden" class="result-div" name="result_image" id="result_image" value="" />
</div>
</div>
</div>
</div>
</div>
<div class="headstone-result-couple hidden" id="result-block-couple">
<div class="headstone-category-couple">
<div class="headstone-color-couple" id="headstone-color-couple">
<div class="headstone-pannel-couple" id="headstone-pannel-couple">
<div class="left-image-couple" id="left-image-couple"></div>
<div class="right-image-couple" id="right-image-couple"></div>
<input type="file" name="leftImageNameCouple" id="leftImageNameCouple" class="hidden" />
<input type="file" name="rightImageNameCouple" id="rightImageNameCouple" class="hidden" />
<div class="result-namecouple">
<input type="text" class="namecouple required-entry" name="name" id="nameCouple" value="" />
<input type="text" class="namecouple required-entry" name="wifeNameCouple" id="wifeNameCouple" value="" />
</div>
<div class="result-bodcouple">
<span class="left-couple-date">
<input type="text" class="bodcouple required-entry validate-date validate-date-range date-range-start_date-from" name="bod" id="bodCouple" value="" />
<img title="Select date" id="bodCouple_trig" src="<?php echo $this->getSkinUrl('images/calendar.gif')?>" class="v-middle img-bod">
</span>
<span class="right-couple-date">
<input type="text" class="bodcouple required-entry validate-date validate-date-range date-range-start_date-from" name="wifeBodCouple" id="wifeBodCouple" value="" />
<img title="Select date" id="wifeBodCouple_trig" src="<?php echo $this->getSkinUrl('images/calendar.gif')?>" class="v-middle img-bod">
</span>
</div>
<div class="result-expire-datecouple">
<span class="left-couple-date">
<input type="text" class="expire-datecouple required-entry validate-date validate-date-range date-range-start_date-to" name="expire-date" id="expire-date-couple" value="" />
<img title="Select date" id="expire-date-couple_trig" src="<?php echo $this->getSkinUrl('images/calendar.gif')?>" class="v-middle img-bod">
</span>
<span class="right-couple-date">
<input type="text" class="expire-datecouple required-entry validate-date validate-date-range date-range-start_date-to" name="wifeExpire-date-couple" id="wifeExpire-date-couple" value="" />
<img title="Select date" id="wifeExpire_trig" src="<?php echo $this->getSkinUrl('images/calendar.gif')?>" class="v-middle img-bod">
</span>
</div>
<div class="result-about-personcouple">
<input type="text" class="result-aboutcouple required-entry" name="result-aboutCouple" id="result-aboutCouple" value="" />
<input type="hidden" class="result-div" name="result_image_couple" id="result_image_couple" value="" />
</div>
</div>
</div>
</div>
</div>
<?php $buttonTitle = Mage::helper('core')->quoteEscape($this->__('Add to Cart')); ?>
<?php if($_product->isSaleable()): ?>
<div class="price-info" id="price-info-bottom"> <?php echo $_product->getPrice(); ?> </div>
<div class="add-to-cart">
<div class="add-to-cart-buttons">
<button type="submit" title="<?php echo $buttonTitle ?>" class="button btn-cart" ><span><span><?php echo $buttonTitle ?></span></span></button>
<?php echo $this->getChildHtml('', true, true) ?>
</div>
</div>
<?php endif; ?>
</div>
</form>
My Script.
Calendar.setup({
inputField : "bodCouple",
ifFormat : "%e/%m/%y",
button : "bodCouple_trig",
showsTime: false,
align : "Bl",
singleClick : true
});
I don't know what is issue with this.
Best Answer
You need to add following file in your page using xml.
Add following code in your
Form.phtmlfile.