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
tags:
snippets, shipping, advance
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&amp;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.

Site Tools