- type:
- snippet
- category:
- Add to cart form
- name:
- Using a calendar date-picker to add dates to products.
- versions:
- 0.6.0
- reference:
- http://forum.foxycart.com/comments.php?DiscussionID=3343&page=1
- date:
- 2011-05-26
Using a calendar date-picker to add dates to products.
This calendar setup requires having a link and an input with coinciding id's. An input an link should be setup like this:
<input type="text" name="date" id="date2" class="datepicker"> <a href="https://yourstore.foxycart.com/cart?name=Large%20Box&price=15" id="link_date2" class="foxycart">Add to basket</a>
Paste the following just above your </head> tag in your template. Built for version 6.0.
<script type="text/javascript"> $(function() { $(".datepicker").datepicker({ dateFormat: 'yy-mm-dd', onClose: function(dateText, inpt) { updateDates(dateText, inpt.id); } }); jQuery(".datepicker").each(function() { if($(this).val() != "") { updateDates($(this).val(), $(this).attr("id")); } }); }); function updateDates(dateString, inputid) { alterInput = jQuery("#"+inputid); alterLink = jQuery("a#link_"+inputid); pattern_qty = /(?:(?:&|\?){1}date=)((?:[0-9\-])*)/; href = alterLink.attr("href"); newDate = (dateString == "") ? "" : "&date="+dateString; if ( pattern_qty.test(href) ) { prefix = pattern_qty.exec(href); newHref = href.replace(prefix[0], newDate); alterLink.attr("href", newHref); } else { alterLink.attr("href", href + newDate); } } function fc_PreProcess(oData, oID) { alterID = jQuery("#"+oID).attr("id").split("_")[1]; alterInput = jQuery("#"+alterID); if(jQuery(alterInput).val() == "") { alert('You need to choose a delivery date before adding a box'); return false; } else { return true; } } </script>
For further details, please see the forum link below.