Support

Create Calendar Field on Product Page

You can create a calendar type field in your products for when you need your customers to enter a date.

  1. Create a Product Option "Text input" type in your product with the label you want to appear on your product page.

  2. Go to your store's code editor in "Themes>Code Editor". Inside the editor you must open the Product Template and copy/paste the next 2 lines of the code at the beginning of the file:

    <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
    <script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
    
  3. In the same file worse now the end of the page, you should copy/paste the following code:

    <script>
      $("#name_of_your_field").datepicker(   
        {
          minDate: '+1d',
          dateFormat: 'dd-mm-yy'
        }
      );
    <script>
    

    The minDate: '+1d' variant indicates that visitors can only choose one day after the current one. You can modify it for more days or just delete that line if you if you agree to choose the current day.

    The dateFormat: 'dd-mm-yy' variant defines the date format that the field accepts in the example: "day-month-year". You can edit the order.

  4. The last step is to identify the ID of the field you created in step 1. In your browser you should right click on the field, which in our example is "Select your date", then click on "Inspect". A panel with the code of your store will open, in this code we must copy the number that appears in id="0123456" and paste it in the code editor instead of name_of_your_field in the code that we paste in the step 3. With this step the date type field is already created.