> For the complete documentation index, see [llms.txt](https://shoppad.gitbook.io/infinite-options/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://shoppad.gitbook.io/infinite-options/inputs-and-field-settings/add-a-date-picker-to-your-store.md).

# Add a date picker to your store

Follow the steps below to add a date picker or calendar to your store.

![](/files/lllWheOwXAlSEEKN3VpN)

### Before you get started

There are two ways to add a date picker. The best option depends on how much customization you need.

**Method 1: Date Picker input type:** Select the **Date Picker** input type directly in Infinite Options. This is the quickest setup option and does not require adding any code. The calendar design will use the browser’s built-in date picker.<br>

**Method 2: Custom date picker calendar:** Add a snippet of code and CSS to your theme to create a custom calendar. This option requires editing your theme code, but provides more control over the calendar’s appearance and styling

### Method 1: Use the Date Picker Input Type

1. Open the Infinite Options app.
2. Create a new option or edit an existing option.
3. Set the **Input Type** to **Date Picker**.

Your date picker field will now display using the browser’s built-in calendar

<figure><img src="/files/itTN5ONG3EGUxO3R0NA6" alt=""><figcaption></figcaption></figure>

4. Assign to products

<figure><img src="/files/JaKnOhbDeLCntlvDuAa6" alt=""><figcaption></figcaption></figure>

5. **Save** your changes.

### Method 2: Add a Custom Date Picker Calendar

This method adds a custom calendar using additional scripts and CSS.

{% hint style="info" %}
**Heads up**: This feature only supports one date picker on a product page at this time.&#x20;
{% endhint %}

#### Add the Date Picker Script to Your Theme

1. From your Shopify admin, go to **Online Store > Themes**.
2. Click **... > Edit code** on your current theme.
3. Under the **Layout** folder, open the **theme.liquid** file.
4. Search for the closing head tag:

```html
</head>
```

5. Copy the script below and paste it directly before the closing `</head>` tag.
6. Click **Save**.

{% code expandable="true" %}

```html
<script>
  window.Shoppad = window.Shoppad || {},
  window.Shoppad.apps = window.Shoppad.apps || {},
  window.Shoppad.apps.infiniteoptions = {
    ready: function() {
      
      function callback() {
        var jQ = window.$ && window.$().datepicker ? window.$ : window.Shoppad.$;

        jQ('#infiniteoptions-container .datepicker').datepicker({
          inline: true,
          altField: '#infiniteoptions-container .datepicker input[type=text]',
          onSelect: function() {
            jQ('#infiniteoptions-container .ui-datepicker-inline').hide();
	    var inputEvent = new Event('input', {
                bubbles: true
            });
            jQ('#infiniteoptions-container .datepicker input[type=text]')[0].dispatchEvent(inputEvent);
          }
        });

        jQ('#infiniteoptions-container .datepicker input[type=text]').change(function(){
          jQ('#infiniteoptions-container .datepicker').datepicker('setDate', $(this).val());
        });

        jQ('#infiniteoptions-container .datepicker').datepicker( "setDate", '' );

        jQ('#infiniteoptions-container .datepicker input[type=text]').attr('readonly','true');

        jQ('#infiniteoptions-container .datepicker input[type=text]').addClass('notranslate');
        jQ('#infiniteoptions-container .datepicker input[type=text]').attr('translate', 'no');

        jQ('#infiniteoptions-container .ui-datepicker-inline').hide();

        jQ('#infiniteoptions-container .datepicker input[type=text]').on('click touchstart', function (e) {
          jQ('#infiniteoptions-container .ui-datepicker-inline').show();
        });

        jQ(document).on('mouseup touchstart', function(e) {
          var isDatePickerInput = jQ('#infiniteoptions-container .datepicker input').is(e.target);
          var isDatePicker = jQ('#infiniteoptions-container .ui-datepicker-inline').is(e.target);
          var isChildOfDatePicker = jQ('#infiniteoptions-container .ui-datepicker-inline').has(e.target).length;
  
          // If the target of the click isn't the text input, the date picker, or a descendant of the date picker
          if (!isDatePickerInput && !isDatePicker && !isChildOfDatePicker) {
            jQ('#infiniteoptions-container .ui-datepicker-inline').hide();
          }
        });
      }

      if (window.jQuery && window.jQuery.fn && window.jQuery.fn.datepicker) {
        callback();
      } else {
        // Set jQuery on page
        window.jQuery = window.jQuery || window.Shoppad.$;
        var script = document.createElement('script');
        script.src = '//code.jquery.com/ui/1.10.2/jquery-ui.js';
        script.onload = callback;
        document.getElementsByTagName('head')[0].appendChild(script);
      }
    }
  };
</script>
```

{% endcode %}

Here is how the code snippet will look pasted into the theme file:

![](https://s3.amazonaws.com/helpscout.net/docs/assets/555e25e4e4b027e1978e1c9a/images/5e7240e62c7d3a7e9ae95fb6/file-tAAS7XUZdv.png)

### Add CSS Styles

Next, add the CSS that controls the appearance of the custom calendar.

1. Open the Infinite Options app.
2. Select **Settings** from the left sidebar.
3. Locate the **Custom CSS** section.

![](https://s3.amazonaws.com/helpscout.net/docs/assets/555e25e4e4b027e1978e1c9a/images/6478f731936c7945969ed561/file-UfsInrKR9j.png)

4. Copy the CSS snippet below and paste it below any existing CSS.

{% code expandable="true" %}

```css
/* Infinite Options by ShopPad - Styles for Date Picker */
#infiniteoptions-container .datepicker {
  position: relative;
  width: 100%;
}

#infiniteoptions-container .datepicker tr:after,
#infiniteoptions-container .datepicker tr:before,
#infiniteoptions-container .datepicker th:after,
#infiniteoptions-container .datepicker th:before,
#infiniteoptions-container .datepicker td:after,
#infiniteoptions-container .datepicker td:before {
  display: none !important;
}

#infiniteoptions-container .ui-datepicker-inline {
  margin: 0;
  padding-top: 0;
  background-color: #fff;
  color: #333;
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  z-index: 1000;
}

#infiniteoptions-container .ui-datepicker-calendar {
  margin: 0;
  padding: 0;
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
}

#infiniteoptions-container .ui-datepicker-calendar td,
#infiniteoptions-container .ui-datepicker-calendar th {
  cursor: pointer;
  text-align: center !important;
  padding: 5px !important;
  height: 10px !important;
  width: 10px !important;
  background-color: #fff;
  border: 1px solid #ddd;
}

#infiniteoptions-container .ui-datepicker-header {
  border: 1px solid #ddd;
  border-bottom: 0;
}

#infiniteoptions-container .ui-datepicker-title {
  text-align: center;
  padding: 10px;
}

#infiniteoptions-container .ui-datepicker-prev {
  float: left;
  padding: 10px;
}

#infiniteoptions-container .ui-datepicker-next {
  float: right;
  padding: 10px;
}

#infiniteoptions-container .ui-icon {
  cursor: pointer;
}

#infiniteoptions-container .ui-state-disabled {
  opacity: .5;
}
```

{% endcode %}

5. Click **Save**.

### Create a text option then add a class name

&#x20;1\. You will want to use a text field as the inpute type:<br>

![](https://d33v4339jhl8k0.cloudfront.net/inline/13600/3631230b0f6ec98ca813508830fb26436408f58f/34cff9b45abf226cb872befe3e9686a4ba4c8064/Screenshot-2026-07-21-at-2-52-51-PM.png)

2. Then scroll down to the **Class name** field and add "datepicker" as a class name.

![](https://d33v4339jhl8k0.cloudfront.net/inline/13600/b246c5e757a442f0a6f7cce84def537565f4d0c1/a85126e2180916af24db0116fac6a70eb8e6756e/Screenshot-2026-07-21-at-2-52-59-PM.png)

Your custom date picker calendar is now ready.

For additional customization options, check out our [date picker customization guide.](#add-css-styles)