Add a Java Date Picker to the Product Attributes

I had a requirement for users to enter a 'valid' date into their details and attribute selections. So I implemented a dhtml calendar pop-out to do the job.

Download dhtml_calendar js script/applet from http://www.dhtmlgoodies.com/index.html?page=calendarScripts
Place this in the root of your web in it's original folder name (can be elsewhere with a few mods to the referring code etc of course)

In administrator/components/com_virtuemart/classes/ps_product_attribute.php make some changes.
Find: * Creates textfields for customizable products from the custom attribute format

Replace;

Code:

foreach($fields as $field)
{
$titlevar=str_replace(" ","_",$field);
$title=ucfirst($field);
$html .= "<div style=\"width:30%;float:left;text-align:right;margin:3px;\">";
$html .= "<label for=\"".$titlevar."_field\">$title</label>:</div>";
$html .= "<div style=\"width:60%;float:left;margin:3px;\">";
$html .= "<input type=\"text\" class=\"inputbox\" id=\"".$titlevar."_field\" size=\"30\" name=\"$titlevar\" />";
$html.="</div>\n";
$html .= "<input type=\"hidden\" name=\"custom_attribute_fields[]\" value=\"$titlevar\" />\n";
$html .= "<input type=\"hidden\" name=\"custom_attribute_fields_check[$titlevar]\" value=\"".md5($mosConfig_secret. $titlevar )."\" />\n";
}

With;

Code:

foreach($fields as $field)
{
if ( $field != "Date" ) {
$titlevar=str_replace(" ","_",$field);
$title=ucfirst($field);
$html .= "<div style=\"width:30%;float:left;text-align:right;margin:3px;\">";
$html .= "<label for=\"".$titlevar."_field\">$title</label>:</div>";
$html .= "<div style=\"width:60%;float:left;margin:3px;\">";
$html .= "<input type=\"text\" class=\"inputbox\" id=\"".$titlevar."_field\" size=\"30\" name=\"$titlevar\" />";
$html.="</div>\n";
$html .= "<input type=\"hidden\" name=\"custom_attribute_fields[]\" value=\"$titlevar\" />\n";
$html .= "<input type=\"hidden\" name=\"custom_attribute_fields_check[$titlevar]\" value=\"".md5($mosConfig_secret. $titlevar )."\" />\n";
}
Else {
$titlevar=str_replace(" ","_",$field);
$title=ucfirst($field);
$html .= "<div style=\"width:30%;float:left;text-align:right;margin:3px;\">";
$html .= "<label for=\"".$titlevar."_field\">$title</label>: (dd/mm/yyyy)</div>";
$html .= "<div style=\"width:60%;float:left;margin:3px;\">";
$html .= "<input type=\"text\" value=".date("d/m/Y")." readonly class=\"inputbox\" id=\"".$titlevar."_field\" size=\"12\" name=\"$titlevar\" />";
$html .= "<input type=\"button\" class=\"button\" value=\"Calendar\" onclick=\"displayCalendar(document.forms[0].Date, 'dd/mm/yyyy',this)\" />";
/**
*$html .= "<input name=\"reset\" type=\"reset\" class=\"button\" onclick=\"return showCalendar('".$titlevar."_field', 'dd/mm/yyyy');\" value=\"Select Date2\" />";

*/
$html.="</div>\n";
$html .= "<input type=\"hidden\" name=\"custom_attribute_fields[]\" value=\"$titlevar\" />\n";
$html .= "<input type=\"hidden\" name=\"custom_attribute_fields_check[$titlevar]\" value=\"".md5($mosConfig_secret. $titlevar )."\" />\n";
}
}

This simply checkes each attribute, if you make one titled as 'Date' it will use the alternate code, make the textbox readonly, enter the current date and add the selector button (onclick) to bring up the calendar plug-in.

And finally, to make it work, add the following into your template file;

Code:

Note: the code referring to document.forms[0].Date must be changed to a [1] or [2] of you have other forms on your page. If you have a login form on each page (on the left) this product part will therefor be form 2 in your html so then you will have to change this to be document.forms[1].Date.

Comments: Once I did all this I then found a similar date picker within the admin of virtuemart (for product start/end date) and it probably is better to use what's there but I couldn't get it to work in my example so I went with what worked.

Hope this helps somebody else out oo, Cheers, Rex.