As part of our native subscription product attributes, it's possible to set when a given subscription will start, either as a specific date, a specific day of the month, or a date relative to today. Sometimes though it can be useful to allow customers to select a specific date for their own subscription, rather than hard-coding it yourself.

Here's an example of setting that up in your own subscription add to cart form.

To start with, you need to have your add to cart form on your page. As a simple example for the purpose of this page:

<form action="https://YOUR-STORE.foxycart.com/cart" method="post" accept-charset="utf-8">
    <input type="hidden" name="name" value="Subscription" />
    <input type="hidden" name="price" value="20" />
    <input type="hidden" name="code" value="sub123" />
    <label for="start_date">Start Date</label>
    <input type="text" id="start_date" name="sub_startdate" value="" />
    <input type="submit" value="Add a Sub" class="submit" />
</form>

You'll need to update YOUR-STORE.foxycart.com to point to your own FoxyCart store's domain, and update the details for the name, price and code to match your requirements.

Although HTML5 does support a calendar widget, currently it still has varied levels of support across browsers, so a javascript widget is probably your best bet.

There are many different options available online for that, but two options we'll show here are jQuery UI's datepicker and the pickadate.js library.

You'll need to ensure that you include jQuery UI on your page with the datepicker functionality. You can either generate your own version of the includes from the jQuery UI site, or use a CDN to include it like from Google or jQuery.

Once added, you can use the following code to add a datepicker to your page:

<script>
    $(function() {
        $('[name$="sub_startdate"]').each(function() {
            var name = $(this).attr("name");
            var hidden_input = $('<input type="hidden" name="' + name + '">')
            $(this).attr("name", "").after(hidden_input).datepicker({
                altField: "[name='" + name + "']",
                altFormat: "yy-mm-dd",
                dateFormat: "d M, yy",
                minDate: 0
            });
        });
    });
</script>

This implementation adds a datepicker that doesn't allow a date prior to today's date, but also dynamically adds a hidden input for the start date that is formatted as YYYY-MM-DD, and updates the visible input to display a customer-friendly date like 1 Jan, 2019.

You'll need to ensure that you've included the required javascript and CSS on your page for this set up. You can see details on the plugin from their website at http://amsul.ca/pickadate.js, and is available from CDNJS too.

After adding it to your website, the following code will add the pickadate UI to the input field in our form:

<script>
    $(function() {
        $('[name$="sub_startdate"]').pickadate({
            min: true,
            formatSubmit: 'yyyy-mm-dd',
            hiddenName: true
        });
    });
</script>

The options passed will prevent a date before today, and ensure that it passes a hidden input for the date with a format of YYYY-MM-DD, leaving the visible input to display a customer friendly format.