====== Use a date picker for the start date in a subscription form ======

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.

===== Set up your 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:

<code html>
<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>
</code>

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.

===== Add a calendar widget =====

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.

==== jQuery UI datepicker ====

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 [[https://jqueryui.com/download/|from the jQuery UI site]], or use a CDN to include it like from [[https://developers.google.com/speed/libraries/#jquery-ui|Google]] or [[https://code.jquery.com/ui/|jQuery]].

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

<code javascript><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></code>

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''.

==== pickadate.js ====

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 [[https://cdnjs.com/libraries/pickadate.js|from CDNJS too]].

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

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

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.