Date Bookings in osCommerce, using jquery

By | May 21, 2010

We finished up a very interesting project the other day. The client basically required a way to link dates to individual products, thereby allowing his customers to select a date as an attribute.

Really very easy, if you think about it. Just add the dates as options then apply to each product as required. Then the customer will see a dropdown box in the product_info page. Easy as 123.

But what if the shop owner wants a better experience, both in the admin side and in the shop side?

An example would be adding a date range – imagine you wanted to add the whole of August – you’d need to insert 31 product attributes (the dates in August 1st to 31st) then add these one by one to the product you want to add them to. What a nightmare. Instead, why not have the ability to select a date range, press insert and all this is done automatically in the background. With a bit of thought, it’s do-able.

Step 1 was to change the product_attribute page in admin to allow the ability to add a date (or dates) to a product.

In the example, I am adding the the whole of August to the product called “Lethal Weapon” (which is a standard product in the base install of osCommerce). This functionality is achieved using Kelvin Lucks datepicker project.

if we now look at the product page, the dates of August now are available as an attribute dropdown;

But, that is very ugly and not all nice for the customer to select his chosen date…so, changes needed;

Step 2 was to make the attribute dropdown into a text box, which when clicked will popup the datepicker allowing the buyer to select a date.

If this is clicked, up pops the datepicker;

showing the selectable dates (in green, using .css). If I select the 14th August, then this shows in the input box;

The customer can now add to cart and checkout as normal;

All this was made possible by using jquery and the datepicker module for it – along with a bunch of custom coding (osCommerce code in backend and frontend, javascript, css) to make it all play nicely in osCommerce.


This change enables the shop owner to easily link dates to products. These dates are selectable and any other dates are non-selectable. Using javascript to control this makes the whole system intuitive.

If you need something similar, contact me via email.

4 thoughts on “Date Bookings in osCommerce, using jquery

  1. michael casey


    I am adding similar functionality to a modified osc/oscmax cart, allowing customers to book roller skating parties using the jquery classes from Kevin Luck as well.

    I am at the point where I need to modify osc to allow for the user entered production option form field (text) and have not seen where I should make the changes to the options, attribute structure.

    Any insight would be fab.

    thank you,

    michael casey

  2. Gary Post author

    Hi Michael

    The very easiest way to enable date bookings is to do it as part of the checkout process (for the whole order).

    If you do it on a per product basis, then you’ll need to use “option types” (text input box) rather than a dropdown. Then populate the text input box with the datepicker (and have the datepicker show only the available dates). As yours also has time settings, I don’t think it will be possible…so your best option would be to have the date and time as part of the checkout process.

  3. Steven Lorenzo

    Hi Gary,

    I’d like to take a look at your booking code to see if it’s a match for my tour services. I need the input field to be my products_option “Date:”


  4. Gary Post author

    Hi Steven – this never made it past the stage of being implented live on the customers site. It’s going back almost two years, so I’ve lost recollection of most of it. Basically the admin can add a range of dates available as a product attribute. The product attribute is then rewritten as a text field with a jquery calendar…

    If you are interested in something similar, please email me on to discuss your requirements in more detail. Cheers.

Leave a Reply

Your email address will not be published.