Date Pickers for Product Options

Easily add date pickers to 'Custom text field' type product options...

This is useful if you have products where the customer needs to schedule something or other.

This mod should be fine for X-Cart v4.4.x - v4.6.x

A demo is available here.

1) In Tools > Patch/Upgrade in the SQL query(ies) box paste and apply the following...

ALTER TABLE `xcart_classes` ADD `is_datepicker` CHAR( 1 ) DEFAULT 'N' NOT NULL ;
REPLACE INTO xcart_languages SET code='en', name='lbl_date_picker', value='Date Picker', topic='Labels';

2) In skin/common_files/modules/Product_Options/add_product_options.tpl

BEFORE...

<tr>
  {if $geid ne '' and $product_option ne ''}<td width="15" class="TableSubHead"><input type="checkbox" value="Y" name="fields[orderby]" /></td>{/if}

INSERT...

{* Date Picker *}
<tr>
  {if $geid ne '' and $product_option ne ''}<td width="15" class="TableSubHead"><input type="checkbox" value="Y" name="fields[is_datepicker]" /></td>{/if}
 <td class="DataField"><b>{$lng.lbl_date_picker}:</b></td>
  <td>&nbsp;</td>
 <td class="DataField"><input type="checkbox" name="add[is_datepicker]" value="Y"{if $product_option.is_datepicker eq "Y"} checked="checked"{/if} /></td> 
</tr>
{* /Date Picker *}

3a) In skin/common_files/modules/Product_Options/product_options.tpl

BEFORE...

  <td class="DataTable">{$lng.lbl_orderby}</td>

INSERT...

  {* Date Picker *}
  <td class="DataTable">{$lng.lbl_date_picker}</td>
  {* /Date Picker *}

3b) In skin/common_files/modules/Product_Options/product_options.tpl

BEFORE...

  <td valign="top" class="DataTable"><input type="text" name="po_classes[{$v.classid}][orderby]" size="5" maxlength="11" value="{$v.orderby}" /></td>

INSERT...

  {* Date Picker *}
  <td valign="top" class="DataTable"><input type="checkbox" name="po_classes[{$v.classid}][is_datepicker]" value="{$v.is_datepicker}" {if $v.is_datepicker eq 'Y'} checked="checked"{/if} /></td>
  {* Date Picker *}

4a) In modules/product_options/product_options.php

BEFORE...

 'orderby' => $add['orderby'],

INSERT...

 'is_datepicker' => $add['is_datepicker'],

4b) In modules/product_options/product_options.php

REPLACE...

 db_query("UPDATE $sql_tbl[classes] SET orderby = '$v[orderby]', avail = '$v[avail]' WHERE classid = '$k'");

WITH...

 db_query("UPDATE $sql_tbl[classes] SET is_datepicker = '$v[is_datepicker]', orderby = '$v[orderby]', avail = '$v[avail]' WHERE classid = '$k'");

5) In /skin/common_files/modules/Product_Options/customer_options.tpl

(location may differ if using a non-standard or custom skin)

REPLACE...

 <input id="po{$v.classid}" type="text" name="{$poname}" value="{$v.default|escape}" />

WITH...

 {* Date Picker *}
 {if $v.is_datepicker eq 'Y'}
 {literal}<script>$(function() { $('input[name="product_options[{/literal}{$v.classid}{literal}]"]').datepicker({ dateFormat: "{/literal}{$config.Appearance.ui_date_format}{literal}", showOn: "both", buttonImageOnly: true, buttonImage: "{/literal}{$ImagesDir}{literal}/calendar.png" }); });</script>{/literal}
 {/if}
 {* /Date Picker *}

 <input id="po{$v.classid}" type="text" name="{$poname}" value="{$v.default|escape}" {if $v.is_datepicker eq 'Y'}style="margin-right:5px" required{/if}/>

6) IMPORTANT!

In Tools > Maintenance, click the 'Force cache generation' button underneath 'Force cache generation'.

In Tools > Maintenance, click the 'Clear' button underneath 'Clear templates/X-Cart cache'.

Done.

NOTE, in your product options, for date pickers to appear, 'Option group type' must be set to 'Custom text field'.