Jump to content

  • You cannot start a new topic
  • You cannot reply to this topic

Date Option MOD Rate Topic   - - - - -

 
  • Triplets
  • Senior Member
  • Members
  • Join Date: 23-Sep 08
  • 1179 posts

Posted 01 October 2008 - 02:39 AM #1

OK, here is my second Mod for Cs-Cart. This one allows a Date field option type:

Posted Image

In admin/product/pages/option_type.tpl

add
<option value="D" {if $value == "D"}selected="selected"{/if}>Date</option>

below
<option value="T" {if $value == "T"}selected="selected"{/if}>{$lang.textarea}</option>

Then in customer/product_pages/product_options.tpl

add
{elseif $po.option_type == "D"} {*Date*}
        {include file="templates/`$product.product_code`.tpl"}
        {include file="scripts/date.tpl"}
        <div class="clear-both">
<input type="text" readonly name="{$name}[{$id}][product_options][{$po.option_id}]" id="option_{$id}_{$po.option_id}_{$NEWpoOptionRequired}" size="{$NEWpoOptionLength}" maxlength="{$NEWpoOptionLength}" value="{$po.value|escape:html}" {if $product.exclude_from_calculate && !$product.choosable_product_options}disabled="disabled"{/if} onkeypress="cart_changed = true;" class="valign input-text" /> <input type=button value="select" onclick="displayDatePicker('{$name}[{$id}][product_options][{$po.option_id}]');"><br />{if $NEWpoOptionRequired == "R"}<font size="1" color="red">* required field</font></div>{/if}

after

{elseif $po.option_type == "T"} {*Textarea*}
        {include file="templates/`$product.product_code`.tpl"}
			<p class="textarea-break"><textarea class="input-textarea" style="width: 250px;" rows="3" name="{$name}[{$id}][product_options][{$po.option_id}]" id="option_{$id}_{$po.option_id}_{$NEWpoOptionRequired}" {if $product.exclude_from_calculate && !$product.choosable_product_options}disabled="disabled"{/if} onkeypress="cart_changed = true;">{$po.value|escape:html}</textarea><br />{if $NEWpoOptionRequired == "R"}<font size="1" color="red">* required field</font>      {/if}

Then in the customer/scripts/ create a file called date.tpl with the following contents

{* $Id: date.tpl 4998 2008-03-27 08:59:10Z imac $ *}
{literal}
<script language=JavaScript>
var datePickerDivID = "datepicker";
var iFrameDivID = "datepickeriframe";
var dayArrayShort = new Array('Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa');
var dayArrayMed = new Array('Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat');
var dayArrayLong = new Array('Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday');
var monthArrayShort = new Array('Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec');
var monthArrayMed = new Array('Jan', 'Feb', 'Mar', 'Apr', 'May', 'June', 'July', 'Aug', 'Sept', 'Oct', 'Nov', 'Dec');
var monthArrayLong = new Array('January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December');
 
var defaultDateSeparator = "/";        // common values would be "/" or "."
var defaultDateFormat = "mdy"    // valid values are "mdy", "dmy", and "ymd"
var dateSeparator = defaultDateSeparator;
var dateFormat = defaultDateFormat;


function displayDatePicker(dateFieldName, displayBelowThisObject, dtFormat, dtSep)
{
  var targetDateField = document.getElementsByName (dateFieldName).item(0);
 
  // if we weren't told what node to display the datepicker beneath, just display it
  // beneath the date field we're updating
  if (!displayBelowThisObject)
    displayBelowThisObject = targetDateField;
 
  // if a date separator character was given, update the dateSeparator variable
  if (dtSep)
    dateSeparator = dtSep;
  else
    dateSeparator = defaultDateSeparator;
 

  if (dtFormat)
    dateFormat = dtFormat;
  else
    dateFormat = defaultDateFormat;
 
  var x = displayBelowThisObject.offsetLeft;
  var y = displayBelowThisObject.offsetTop + displayBelowThisObject.offsetHeight ;
 

  var parent = displayBelowThisObject;
  while (parent.offsetParent) {
    parent = parent.offsetParent;
    x += parent.offsetLeft;
    y += parent.offsetTop ;
  }
 
  drawDatePicker(targetDateField, x, y);
}


function drawDatePicker(targetDateField, x, y)
{
  var dt = getFieldDate(targetDateField.value );
 
  // the datepicker table will be drawn inside of a <div> with an ID defined by the
  // global datePickerDivID variable. If such a div doesn't yet exist on the HTML
  // document we're working with, add one.
  if (!document.getElementById(datePickerDivID)) {
    // don't use innerHTML to update the body, because it can cause global variables
    // that are currently pointing to objects on the page to have bad references
    //document.body.innerHTML += "<div id='" + datePickerDivID + "' class='dpDiv'></div>";
    var newNode = document.createElement("div");
    newNode.setAttribute("id", datePickerDivID);
    newNode.setAttribute("class", "dpDiv");
    newNode.setAttribute("style", "visibility: hidden;");
    document.body.appendChild(newNode);
  }
 
  // move the datepicker div to the proper x,y coordinate and toggle the visiblity
  var pickerDiv = document.getElementById(datePickerDivID);
  pickerDiv.style.position = "absolute";
  pickerDiv.style.left = x + "px";
  pickerDiv.style.top = y + "px";
  pickerDiv.style.visibility = (pickerDiv.style.visibility == "visible" ? "hidden" : "visible");
  pickerDiv.style.display = (pickerDiv.style.display == "block" ? "none" : "block");
  pickerDiv.style.zIndex = 10000;
 
  // draw the datepicker table
  refreshDatePicker(targetDateField.name, dt.getFullYear(), dt.getMonth(), dt.getDate());
}


/**
This is the function that actually draws the datepicker calendar.
*/
function refreshDatePicker(dateFieldName, year, month, day)
{
  // if no arguments are passed, use today's date; otherwise, month and year
  // are required (if a day is passed, it will be highlighted later)
  var thisDay = new Date();
 
  if ((month >= 0) && (year > 0)) {
    thisDay = new Date(year, month, 1);
  } else {
    day = thisDay.getDate();
    thisDay.setDate(1);
  }
 
  // the calendar will be drawn as a table
  // you can customize the table elements with a global CSS style sheet,
  // or by hardcoding style and formatting elements below
  var crlf = "\r\n";
  var TABLE = "<table cols=7 class='dpTable'>" + crlf;
  var xTABLE = "</table>" + crlf;
  var TR = "<tr class='dpTR'>";
  var TR_title = "<tr class='dpTitleTR'>";
  var TR_days = "<tr class='dpDayTR'>";
  var TR_todaybutton = "<tr class='dpTodayButtonTR'>";
  var xTR = "</tr>" + crlf;
  var TD = "<td class='dpTD' onMouseOut='this.className=\"dpTD\";' onMouseOver=' this.className=\"dpTDHover\";' ";    // leave this tag open, because we'll be adding an onClick event
  var TD_title = "<td colspan=5 class='dpTitleTD'>";
  var TD_buttons = "<td class='dpButtonTD'>";
  var TD_todaybutton = "<td colspan=7 class='dpTodayButtonTD'>";
  var TD_days = "<td class='dpDayTD'>";
  var TD_selected = "<td class='dpDayHighlightTD' onMouseOut='this.className=\"dpDayHighlightTD\";' onMouseOver='this.className=\"dpTDHover\";' ";    // leave this tag open, because we'll be adding an onClick event
  var xTD = "</td>" + crlf;
  var DIV_title = "<div class='dpTitleText'>";
  var DIV_selected = "<div class='dpDayHighlight'>";
  var xDIV = "</div>";
 
  // start generating the code for the calendar table
  var html = TABLE;
 
  // this is the title bar, which displays the month and the buttons to
  // go back to a previous month or forward to the next month
  html += TR_title;
  html += TD_buttons + getButtonCode(dateFieldName, thisDay, -1, "<") + xTD;
  html += TD_title + DIV_title + monthArrayLong[ thisDay.getMonth()] + " " + thisDay.getFullYear() + xDIV + xTD;
  html += TD_buttons + getButtonCode(dateFieldName, thisDay, 1, ">") + xTD;
  html += xTR;
 
  // this is the row that indicates which day of the week we're on
  html += TR_days;
  for(i = 0; i < dayArrayShort.length; i++)
    html += TD_days + dayArrayShort[i] + xTD;
  html += xTR;
 
  // now we'll start populating the table with days of the month
  html += TR;
 
  // first, the leading blanks
  for (i = 0; i < thisDay.getDay(); i++)
    html += TD + " " + xTD;
 
  // now, the days of the month
  do {
    dayNum = thisDay.getDate();
    TD_onclick = " onclick=\"updateDateField('" + dateFieldName + "', '" + getDateString(thisDay) + "');\">";
    
    if (dayNum == day)
      html += TD_selected + TD_onclick + DIV_selected + dayNum + xDIV + xTD;
    else
      html += TD + TD_onclick + dayNum + xTD;
    
    // if this is a Saturday, start a new row
    if (thisDay.getDay() == 6)
      html += xTR + TR;
    
    // increment the day
    thisDay.setDate(thisDay.getDate() + 1);
  } while (thisDay.getDate() > 1)
 
  // fill in any trailing blanks
  if (thisDay.getDay() > 0) {
    for (i = 6; i > thisDay.getDay(); i--)
      html += TD + " " + xTD;
  }
  html += xTR;
 
  // add a button to allow the user to easily return to today, or close the calendar
  var today = new Date();
  var todayString = "Today is " + dayArrayMed[today.getDay()] + ", " + monthArrayMed[ today.getMonth()] + " " + today.getDate();
  html += TR_todaybutton + TD_todaybutton;
  html += "<button class='dpTodayButton' onClick='refreshDatePicker(\"" + dateFieldName + "\");'>this month</button> ";
  html += "<button class='dpTodayButton' onClick='updateDateField(\"" + dateFieldName + "\");'>close</button>";
  html += xTD + xTR;
 
  // and finally, close the table
  html += xTABLE;
 
  document.getElementById(datePickerDivID).innerHTML = html;
  // add an "iFrame shim" to allow the datepicker to display above selection lists
  adjustiFrame();
}


/**
Convenience function for writing the code for the buttons that bring us back or forward
a month.
*/
function getButtonCode(dateFieldName, dateVal, adjust, label)
{
  var newMonth = (dateVal.getMonth () + adjust) % 12;
  var newYear = dateVal.getFullYear() + parseInt((dateVal.getMonth() + adjust) / 12);
  if (newMonth < 0) {
    newMonth += 12;
    newYear += -1;
  }
 
  return "<button class='dpButton' onClick='refreshDatePicker(\"" + dateFieldName + "\", " + newYear + ", " + newMonth + ");'>" + label + "</button>";
}


/**
Convert a JavaScript Date object to a string, based on the dateFormat and dateSeparator
variables at the beginning of this script library.
*/
function getDateString(dateVal)
{
  var dayString = "00" + dateVal.getDate();
  var monthString = "00" + (dateVal.getMonth()+1);
  dayString = dayString.substring(dayString.length - 2);
  monthString = monthString.substring(monthString.length - 2);
 
  switch (dateFormat) {
    case "dmy" :
      return dayString + dateSeparator + monthString + dateSeparator + dateVal.getFullYear();
    case "ymd" :
      return dateVal.getFullYear() + dateSeparator + monthString + dateSeparator + dayString;
    case "mdy" :
    default :
      return monthString + dateSeparator + dayString + dateSeparator + dateVal.getFullYear();
  }
}


/**
Convert a string to a JavaScript Date object.
*/
function getFieldDate(dateString)
{
  var dateVal;
  var dArray;
  var d, m, y;
 
  try {
    dArray = splitDateString(dateString);
    if (dArray) {
      switch (dateFormat) {
        case "dmy" :
          d = parseInt(dArray[0], 10);
          m = parseInt(dArray[1], 10) - 1;
          y = parseInt(dArray[2], 10);
          break;
        case "ymd" :
          d = parseInt(dArray[2], 10);
          m = parseInt(dArray[1], 10) - 1;
          y = parseInt(dArray[0], 10);
          break;
        case "mdy" :
        default :
          d = parseInt(dArray[1], 10);
          m = parseInt(dArray[0], 10) - 1;
          y = parseInt(dArray[2], 10);
          break;
      }
      dateVal = new Date(y, m, d);
    } else if (dateString) {
      dateVal = new Date(dateString);
    } else {
      dateVal = new Date();
    }
  } catch(e) {
    dateVal = new Date();
  }
 
  return dateVal;
}


/**
Try to split a date string into an array of elements, using common date separators.
If the date is split, an array is returned; otherwise, we just return false.
*/
function splitDateString(dateString)
{
  var dArray;
  if (dateString.indexOf("/") >= 0)
    dArray = dateString.split("/");
  else if (dateString.indexOf(".") >= 0)
    dArray = dateString.split(".");
  else if (dateString.indexOf("-") >= 0)
    dArray = dateString.split("-");
  else if (dateString.indexOf("\\") >= 0)
    dArray = dateString.split("\\");
  else
    dArray = false;
 
  return dArray;
}

function updateDateField(dateFieldName, dateString)
{
  var targetDateField = document.getElementsByName (dateFieldName).item(0);
  if (dateString)
    targetDateField.value = dateString;
 
  var pickerDiv = document.getElementById(datePickerDivID);
  pickerDiv.style.visibility = "hidden";
  pickerDiv.style.display = "none";
 
  adjustiFrame();
  targetDateField.focus();
 
  // after the datepicker has closed, optionally run a user-defined function called
  // datePickerClosed, passing the field that was just updated as a parameter
  // (note that this will only run if the user actually selected a date from the datepicker)
  if ((dateString) && (typeof(datePickerClosed) == "function"))
    datePickerClosed(targetDateField);
}


function adjustiFrame(pickerDiv, iFrameDiv)
{
  // we know that Opera doesn't like something about this, so if we
  // think we're using Opera, don't even try
  var is_opera = (navigator.userAgent.toLowerCase().indexOf("opera") != -1);
  if (is_opera)
    return;
  
  // put a try/catch block around the whole thing, just in case
  try {
    if (!document.getElementById(iFrameDivID)) {
      // don't use innerHTML to update the body, because it can cause global variables
      // that are currently pointing to objects on the page to have bad references
      //document.body.innerHTML += "<iframe id='" + iFrameDivID + "' src='javascript:false;' scrolling='no' frameborder='0'>";
      var newNode = document.createElement("iFrame");
      newNode.setAttribute("id", iFrameDivID);
      newNode.setAttribute("src", "javascript:false;");
      newNode.setAttribute("scrolling", "no");
      newNode.setAttribute ("frameborder", "0");
      document.body.appendChild(newNode);
    }
    
    if (!pickerDiv)
      pickerDiv = document.getElementById(datePickerDivID);
    if (!iFrameDiv)
      iFrameDiv = document.getElementById(iFrameDivID);
    
    try {
      iFrameDiv.style.position = "absolute";
      iFrameDiv.style.width = pickerDiv.offsetWidth;
      iFrameDiv.style.height = pickerDiv.offsetHeight ;
      iFrameDiv.style.top = pickerDiv.style.top;
      iFrameDiv.style.left = pickerDiv.style.left;
      iFrameDiv.style.zIndex = pickerDiv.style.zIndex - 1;
      iFrameDiv.style.visibility = pickerDiv.style.visibility ;
      iFrameDiv.style.display = pickerDiv.style.display;
    } catch(e) {
    }
 
  } catch (ee) {
  }
 
}


</script>
<style>

/* the div that holds the date picker calendar */
.dpDiv {
font-family: Verdana, Tahoma, Arial, Helvetica, sans-serif;
	font-size: .8em;

	}


/* the table (within the div) that holds the date picker calendar */
.dpTable {
	font-family: Tahoma, Arial, Helvetica, sans-serif;
	font-size: 11px;
	text-align: center;
	color: #505050;
	background-color: #ece9d8;
	border: 1px solid #AAAAAA;
	width: 200px;
	}


/* a table row that holds date numbers (either blank or 1-31) */
.dpTR {
	}


/* the top table row that holds the month, year, and forward/backward buttons */
.dpTitleTR {
	}


/* the second table row, that holds the names of days of the week (Mo, Tu, We, etc.) */
.dpDayTR {
	}


/* the bottom table row, that has the "This Month" and "Close" buttons */
.dpTodayButtonTR {
	}


/* a table cell that holds a date number (either blank or 1-31) */
.dpTD {
	border: 1px solid #ece9d8;
	}


/* a table cell that holds a highlighted day (usually either today's date or the current date field value) */
.dpDayHighlightTD {
	background-color: #CCCCCC;
	border: 1px solid #AAAAAA;
	}


/* the date number table cell that the mouse pointer is currently over (you can use contrasting colors to make it apparent which cell is being hovered over) */
.dpTDHover {
	background-color: #aca998;
	border: 1px solid #888888;
	cursor: pointer;
	color: red;
	}


/* the table cell that holds the name of the month and the year */
.dpTitleTD {
	}


/* a table cell that holds one of the forward/backward buttons */
.dpButtonTD {
	}


/* the table cell that holds the "This Month" or "Close" button at the bottom */
.dpTodayButtonTD {
	}


/* a table cell that holds the names of days of the week (Mo, Tu, We, etc.) */
.dpDayTD {
	background-color: #CCCCCC;
	border: 1px solid #AAAAAA;
	color: white;
	}


/* additional style information for the text that indicates the month and year */
.dpTitleText {
	font-size: 11px;
	color: gray;
	font-weight: bold;
	}


/* additional style information for the cell that holds a highlighted day (usually either today's date or the current date field value) */ 
.dpDayHighlight {
	color: 4060ff;
	font-weight: bold;
	}


/* the forward/backward buttons at the top */
.dpButton {
	font-family: Verdana, Tahoma, Arial, Helvetica, sans-serif;
	font-size: 10px;
	color: gray;
	background: #d8e8ff;
	font-weight: bold;
	padding: 0px;
	}


/* the "This Month" and "Close" buttons at the bottom */
.dpTodayButton {
	font-family: Verdana, Tahoma, Arial, Helvetica, sans-serif;
	font-size: 10px;
	color: gray;
	background: #d8e8ff;
	font-weight: bold;
	}

</style>

{/literal}

This Mod goes perfect with my Required Option Mod found at http://forum.cs-cart...read.php?t=8769

 
  • baballuci
  • Senior Member
  • Members
  • Join Date: 02-Mar 06
  • 969 posts

Posted 01 October 2008 - 11:25 AM #2

Hi Triplets, can i suggest you enclose your code as

[*code]

YOUR CODE HERE

[*/code]

(without the red stars) for better readability. By the way thanks for the FREE mods, thats what i think this forum should be all about.
Charlie

 
  • roban
  • Senior Member
  • Moderators
  • Join Date: 23-Oct 06
  • 1132 posts

Posted 01 October 2008 - 12:21 PM #3

By the way thanks for the FREE mods, thats what i think this forum should be all about.


It used to be and I agree. Thank you for sharing your work.

 
  • Triplets
  • Senior Member
  • Members
  • Join Date: 23-Sep 08
  • 1179 posts

Posted 01 October 2008 - 05:36 PM #4

I added the [code=auto:0] tags as you requested.

I would never think of charging for these Mods. I understand the benefit of the open community. I only hope that these features will be incorporated into the next release.

David

 
  • baballuci
  • Senior Member
  • Members
  • Join Date: 02-Mar 06
  • 969 posts

Posted 01 October 2008 - 08:48 PM #5

Cheers David and thanks for sharing.
Charlie

 
  • nicattmens
  • Junior Member
  • Members
  • Join Date: 07-Oct 08
  • 2 posts

Posted 10 November 2008 - 04:10 PM #6

Triplets,

I followed your instructions, but still can't show the calendar when I add it in the products options area. Can you send me a copy of those three modified files?

Thanks.
Nicholas

 
  • kidken
  • Junior Member
  • Members
  • Join Date: 20-Dec 08
  • 8 posts

Posted 30 December 2008 - 07:47 AM #7

hi.. Are we able to use this Mod as a functionality in the Checkout process? ie. For customers to define the date that they would like the item to be delivered?

Do we have to setup the Required Options Mod first before setting this up?

Thanks and best regards..

 
  • kidken
  • Junior Member
  • Members
  • Join Date: 20-Dec 08
  • 8 posts

Posted 05 January 2009 - 04:50 AM #8

Did a mod to add date options to my Checkout but I can't seem to parse the date to the orders page or to the invoice... Can someone please help... My shipping_rates.tpl file is attached..

[*code]

{* $Id: shipping_rates.tpl 4409 2007-12-07 16:47:48Z zeke $ *}

{if $settings.Shippings.disable_shipping != 'Y' && $cart.shipping_required == 'Y'}
<div class="clear-both">
{if $settings.General.one_page_checkout != 'Y' && ($target == 'checkout' && $mode == 'checkout')}
{include file="common_templates/subheader.tpl" title=$lang.select_shipping_method content=$smarty.capture.mainbox anchor="shipping_rates"}
{/if}
<script type="text/javascript" language="javascript 1.2">
//<![CDATA[
var sf = new cscart_form('shippings_form', {$use_ajax|default:'false'}{if $use_ajax}, ['checkout_totals','checkout_steps']{/if});
//]]>
</script>
<form action="{$index_script}" method="post" name="shippings_form">
<p>
<input type="hidden" name="{$target_name}" value="checkout" />
<input type="hidden" name="{$mode_name}" value="update_shipping" />
<input type="hidden" name="redirect_mode" value="checkout" />
</p>
<p>{if $settings.Addons.suppliers == 'Y' && $settings.Addons.suppliers_opts.multiple_selectboxes == 'Y' && $cart.use_suppliers == 'Y'}
{include file="addons/suppliers/cart_pages/shipping_rates.tpl" onchange="sf.submit();"}
{else}
{if $shipping_rates} </p>
<div class="form-field">
<label for="ssr"><b>Delivery Time Slot{$lang.shipping_Timing}:</b></label>
<select id="ssr" name="shipping_ids[]" onchange="sf.submit();">
{foreach from=$shipping_rates key=shipping_id item=s_rate}
<option value="{$shipping_id}" {if $cart.shipping.$shipping_id}selected="selected"{/if}>{$s_rate.name} ({$s_rate.delivery_time}) - {include file="common_templates/price.tpl" value=$s_rate.rates|@array_sum}</option>
{/foreach}
</select>

</div>
{/if}
{/if}
</form>
</div>
{/if}


{literal}
<script language="javascript">
var whatField = "formDate";

function dp(){

numDaysInMonth = numDays(new Date());
firstDayOfMonth = firstDay(new Date());

document.getElementById("formYear").innerHTML = returnMDY("year");
document.getElementById("formMonth").selectedIndex = returnMDY("month");
writeDays(numDaysInMonth, firstDayOfMonth);

positionLayer("picker", "calendarButton", 0, 42);

document.getElementById("picker").style.visibility = "visible";

}

function updateCalendar(my, plusminus){

if (my == "year"){
current = parseInt(document.getElementById("formYear").innerHTML);
result = eval(current + plusminus + 1);
document.getElementById("formYear").innerHTML = result;
}

updateYear = parseInt(document.getElementById("formYear").innerHTML);
updateMonth = parseInt(document.getElementById("formMonth").value) - 1;

numDaysInMonth = numDays(new Date(updateYear,updateMonth,1));
firstDayOfMonth = firstDay(new Date(updateYear,updateMonth,1));
//alert("Number of Days: " + numDaysInMonth);
//alert("First Day of Month: " + firstDayOfMonth);


writeDays(numDaysInMonth, firstDayOfMonth);

}


function insertDate(formDay) {
document.getElementById(whatField).value = document.getElementById("formYear").innerHTML + "-" + document.getElementById("formMonth").value + "-" + formDay;

document.getElementById("picker").style.visibility = "hidden";
}



function returnMDY(mdy) {
var dateToday = new Date();
var year = dateToday.getFullYear();
var month = dateToday.getMonth();
var day = dateToday.getDate();


switch(mdy){
case "month":
return month;
break;

case "day":
return day;
break;

case "year":
return year;
break;
}
var dateToday = new Date();
}


function writeDays(numDaysInMonth, firstDayOfMonth) {
var dayCounter = 1;

for (i=1; i <43; i++){
document.getElementById("bx"+i).innerHTML = " ";
}

startNum = firstDayOfMonth;
for (j=1; j<=numDaysInMonth; j++){
document.getElementById("bx"+startNum).innerHTML = "<div align='center' onClick='insertDate(" + j + ")'>" + j + "</div>";
startNum++;
}
}


function firstDay(theDate) {
var dateToday = theDate;
var year = dateToday.getFullYear();
var month = dateToday.getMonth();

dateToday.setDate(1);

return dateToday.getDay() + 1;

}

function numDays(theDate) {
var dateToday = theDate;
var month = dateToday.getMonth() + 1;
var numDaysInMonth = 0;

if ((month==4 || month==6 || month==9 || month==11) ) {
return numDaysInMonth = 30;
}
else if (month==2){
var isleap = (year % 4 == 0 && (year % 100 != 0 || year % 400 == 0));
if (isleap) {
return numDaysInMonth = 29;
}
else {
return numDaysInMonth = 28;
}
}
else {
return numDaysInMonth = 31;
}

}

/*
positionLayer() moves a layer to any specified point on the screen based on the location of any image.
The layer position can be adjusted up adn down or side to side with top and left.
currentMenu, and startingPoint are the id attributes of a the laeyr being moved and the image used a reference point.
*/
function positionLayer(currentMenu, startingPoint, top, left)
{
menuLocator = document.images[startingPoint];
menuStartleft = getRealLeft(menuLocator);
menuStartTop = getRealTop(menuLocator);

document.getElementById(currentMenu).style.top = (menuStartTop + top) + "px";
document.getElementById(currentMenu).style.left = (menuStartleft + left) + "px";
}

//This Function gets a starting left point from which we set the hidden menus
function getRealLeft(el)
{
xPos = el.offsetLeft;
tempEl = el.offsetParent;
while (tempEl != null)
{
xPos += tempEl.offsetLeft;
tempEl = tempEl.offsetParent;
}
return xPos;
}




//This Function gets a starting top point from which we set the hidden menus
function getRealTop(el)
{
yPos = el.offsetTop;
tempEl = el.offsetParent;
while (tempEl != null)
{
yPos += tempEl.offsetTop;
tempEl = tempEl.offsetParent;
}
return yPos;
}

</script>

{/literal}

<form>
<strong>Delivery Date:</strong>
<input type="text" id="formDate" onfocus="this.blur()" readonly /><a href="#" onclick="dp()"><img id="calendarButton" align="absmiddle" src="/images/calendar.gif" width="47" height="38" border="0" /></a>

<div id="picker">
<div id="picker_year" align="center"><a href="javascript:void(updateCalendar('year', '-'))"><<</a> <span id="formYear">Year</span> <a href="javascript:void(updateCalendar('year', '+'))">>></a></div>

<div id="picker_month" align="center">
<select id="formMonth" onchange="updateCalendar()">
<option value="1">January</option>
<option value="2">February</option>
<option value="3">March</option>
<option value="4">April</option>
<option value="5">May</option>
<option value="6">June</option>
<option value="7">July</option>
<option value="8">August</option>
<option value="9">September</option>
<option value="10">October</option>
<option value="11">November</option>
<option value="12">December</option>
</select>
</div>
<table width="189">
<tr class="dayOfWeekBox">
<td align="center">Su</td>
<td align="center">Mo</td>
<td align="center">Tu</td>
<td align="center">We</td>
<td align="center">Th</td>
<td align="center">Fr</td>
<td align="center">Sa</td>
</tr>

<tr>
<td class="dateBox" id="bx1"></td>
<td class="dateBox" id="bx2"></td>
<td class="dateBox" id="bx3"></td>
<td class="dateBox" id="bx4"></td>
<td class="dateBox" id="bx5"></td>
<td class="dateBox" id="bx6"></td>
<td class="dateBox" id="bx7"></td>
</tr>

<tr>
<td class="dateBox" id="bx8"></td>
<td class="dateBox" id="bx9"></td>
<td class="dateBox" id="bx10"></td>
<td class="dateBox" id="bx11"></td>
<td class="dateBox" id="bx12"></td>
<td class="dateBox" id="bx13"></td>
<td class="dateBox" id="bx14"></td>
</tr>

<tr>
<td class="dateBox" id="bx15"></td>
<td class="dateBox" id="bx16"></td>
<td class="dateBox" id="bx17"></td>
<td class="dateBox" id="bx18"></td>
<td class="dateBox" id="bx19"></td>
<td class="dateBox" id="bx20"></td>
<td class="dateBox" id="bx21"></td>
</tr>

<tr>
<td class="dateBox" id="bx22"></td>
<td class="dateBox" id="bx23"></td>
<td class="dateBox" id="bx24"></td>
<td class="dateBox" id="bx25"></td>
<td class="dateBox" id="bx26"></td>
<td class="dateBox" id="bx27"></td>
<td class="dateBox" id="bx28"></td>
</tr>

<tr>
<td class="dateBox" id="bx29"></td>
<td class="dateBox" id="bx30"></td>
<td class="dateBox" id="bx31"></td>
<td class="dateBox" id="bx32"></td>
<td class="dateBox" id="bx33"></td>
<td class="dateBox" id="bx34"></td>
<td class="dateBox" id="bx35"></td>
</tr>

<tr>
<td class="dateBox" id="bx36"></td>
<td class="dateBox" id="bx37"></td>
<td class="dateBox" id="bx38"></td>
<td class="dateBox" id="bx39"></td>
<td class="dateBox" id="bx40"></td>
<td class="dateBox" id="bx41"></td>
<td class="dateBox" id="bx42"></td>
</tr>
</table>

</div>
</form>



[*/code]

 
  • phuchha
  • Junior Member
  • Members
  • Join Date: 09-Nov 08
  • 5 posts

Posted 26 January 2009 - 03:47 PM #9

I got this error message, can someone help me?

Date Delivery:
Warning: Smarty error: unable to read resource: "templates/AVI-HL-004.tpl" in /home/phuchha/public_html/test/classes/templater/Smarty.class.php on line 1095

Thanks

 
  • gugga7
  • Senior Member
  • Members
  • Join Date: 16-Mar 08
  • 277 posts

Posted 10 May 2010 - 10:05 PM #10

Hi triplets, this a great great mod!

Do you have a cs-cart v2 version of it?

 
  • TheLondoner
  • Junior Member
  • Members
  • Join Date: 18-Nov 09
  • 23 posts

Posted 13 May 2010 - 03:31 PM #11

Does anyone have a V2 date picker?
Or can anyone point me in the right direction?

 
  • Triplets
  • Senior Member
  • Members
  • Join Date: 23-Sep 08
  • 1179 posts

Posted 13 May 2010 - 03:37 PM #12

I haven't had a client request this mod for 2.x yet. But looking at my old mod, it should be almost identical in 2.0x. The file names and line numbers might be different, but the concept is still sound.

 
  • gugga7
  • Senior Member
  • Members
  • Join Date: 16-Mar 08
  • 277 posts

Posted 13 May 2010 - 04:03 PM #13

is there anyway you could tell newbies like me what those name changes are and where in the files we need to enter the code? :) Thanks...

 
  • TexasGuy
  • Senior Member
  • Members
  • Join Date: 18-Mar 10
  • 546 posts

Posted 13 May 2010 - 04:06 PM #14

I am being slow today, I still don't understand what this mod does. Can some one explain this to a dummy?
PM me today for design/coding projects :P

 
  • Triplets
  • Senior Member
  • Members
  • Join Date: 23-Sep 08
  • 1179 posts

Posted 13 May 2010 - 04:18 PM #15

It adds the ability to open up a calendar and select a date as an option field to a product.

Currently cs-cart Product Options can be:
Input Field
Text Area
Check Box
Select Box

This Mod adds a Date Calendar

We used it on Invitation and Engraving type products.

 
  • gugga7
  • Senior Member
  • Members
  • Join Date: 16-Mar 08
  • 277 posts

Posted 13 May 2010 - 05:25 PM #16

Hi Texasguy,

This Mod is very useful for somebody who runs a Travel website for example where I can ask the customer to enter a date to let me know when he wants to make a reservation.. Or let's say I'm selling show tickets. I would want to know what date the customer chooses.

 
  • TexasGuy
  • Senior Member
  • Members
  • Join Date: 18-Mar 10
  • 546 posts

Posted 13 May 2010 - 05:37 PM #17

got it
PM me today for design/coding projects :P

 
  • glyndon
  • Senior Member
  • Members
  • Join Date: 07-Dec 06
  • 187 posts

Posted 14 May 2010 - 08:28 AM #18

Excellent contribution!

Thank you very much.

 
  • Triplets
  • Senior Member
  • Members
  • Join Date: 23-Sep 08
  • 1179 posts

Posted 16 May 2010 - 01:49 PM #19

For 2.0x option_type.tpl is at yourskin\admin\views\product_options\components

Use something like below:
{if !$app_types || ($app_types && $app_types|strpos:"D" !== false)}
<option value="D" {if $value == "D"}selected="selected"{/if}>Date</option>
{/if}

For 2.0x product_options.tpl is at yourskin\customer\views\products\components

Use something like below:
{elseif $po.option_type == "D"} {*Date*}
{include file="scripts/date.tpl"}
<input id="option_{$id}_{$po.option_id}" type="text" readonly name="{$name}[{$id}][product_options][{$po.option_id}]" value="{$po.value|default:$po.inner_hint}" {if $product.exclude_from_calculate && !$product.aoc}disabled="disabled"{/if} {if !$no_script}onkeypress="cart_changed = true;"{/if} class="valign input-text {if $po.inner_hint && $po.value == ""}cm-hint{/if}" /><input type=button value="select" onclick="displayDatePicker('{$name}[{$id}][product_options][{$po.option_id}]');">


You can place the date.tpl file anywhere you want. Just make sure you update the line {include file="scripts/date.tpl"} in product_options.tpl

I haven't tested it, but this should be close. Someone with more time can post any corrections.

 
  • gugga7
  • Senior Member
  • Members
  • Join Date: 16-Mar 08
  • 277 posts

Posted 16 May 2010 - 09:43 PM #20

Here is what I did:

1. option_type.tpl at yourskin\admin\views\product_options\components

I created a "dateopt" language value and added:

{elseif $value == "T"}{$lang.textarea}
below:

{elseif $value == "D"}{$lang.dateopt}

Then I added in the same file:

{if !$app_types || ($app_types && $app_types|strpos:"D" !== false)}
<option value="D" {if $value == "D"}selected="selected"{/if}>Date</option>
{/if}

below

{if !$app_types || ($app_types && $app_types|strpos:"T" !== false)}
<option value="T" {if $value == "T"}selected="selected"{/if}>{$lang.textarea}</option>
{/if}


2. In product_options.tpl at yourskin\customer\views\products\components

I added:

{elseif $po.option_type == "D"} {*Date*}
{include file="scripts/date.tpl"}
<input id="option_{$id}_{$po.option_id}" type="text" readonly name="{$name}[{$id}][product_options][{$po.option_id}]" value="{$po.value|default:$po.inner_hint}" {if $product.exclude_from_calculate && !$product.aoc}disabled="disabled"{/if} {if !$no_script}onkeypress="cart_changed = true;"{/if} class="valign input-text {if $po.inner_hint && $po.value == ""}cm-hint{/if}" /><input type=button value="select" onclick="displayDatePicker('{$name}[{$id}][product_options][{$po.option_id}]');">

below

{elseif $po.option_type == "D"} {*Date*}
{include file="scripts/date.tpl"}
<input id="option_{$id}_{$po.option_id}" type="text" readonly name="{$name}[{$id}][product_options][{$po.option_id}]" value="{$po.value|default:$po.inner_hint}" {if $product.exclude_from_calculate && !$product.aoc}disabled="disabled"{/if} {if !$no_script}onkeypress="cart_changed = true;"{/if} class="valign input-text {if $po.inner_hint && $po.value == ""}cm-hint{/if}" /><input type=button value="select" onclick="displayDatePicker('{$name}[{$id}][product_options][{$po.option_id}]');">

3. Then I created the scripts folder under yourskin\customer\ and placed date.tpl inside this folder.


RESULT: The date option can be selected from the Product Options tab in the admin section, but it messes up the front end product page, nothing shows besides the product image in the front end... I'm assuming there is something that needs to be modified in date.tpl in order to work with 2.0...