# Add a date picker to your store

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

![](/files/lllWheOwXAlSEEKN3VpN)

{% hint style="info" %}
**Heads up:** Only one date picker is supported per product page.
{% endhint %}

### Create the date picker option

1\. Navigate to the **Option Sets** section of the Infinite Options app in the left sidebar.

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

2\. Create an option with a **Text** input type.

3\. Click on the **arrow** or **Label on Product** field to display the additional settings.

4\. Set the **Class Name** to: **datepicker**

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

5\. Click on **Save Changes**, locate at the top right corner.

### Edit your store's code

1\. From your Shopify admin, click **Online Store** to arrive at the **Themes** page.

2\. Find the theme you want to edit, click the **Actions** button, then click **Edit code**.

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

### Add the necessary scripts to your theme

1\. On the left side, under the **Layout** heading, click on the **theme.liquid** file.

<figure><img src="/files/7gwuo8H4odyXVoA52slg" alt=""><figcaption></figcaption></figure>

2\. Do a search using the keyboard shortcuts (ctrl F or ⌘ F) for the following word.

```
</head>
```

3\. Copy the following code snippet.

```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>
```

4\. Paste the snippet BEFORE the closing **\</head>** tag.

5\. **Save** your changes.

### Add CSS styles

1\. Go back to the Infinite Options app and open the **Settings** section in the left sidebar.

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

2\. Locate the **Custom CSS** section.

3\. Copy and paste the code snippet below of any existing CSS.

```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;
}
```

4\. **Save** your changes.

5\. For more customization options for the date picker, check out our guide: [Click here!](/infinite-options/inputs-and-field-settings/add-a-date-picker-to-your-store.md)

Need assistance? Our support team is here to help. All you have to do is request the [Expert Install Service](/infinite-options/welcome/expert-install-service.md) from your Infinite Options dashboard and we can get this feature added for you.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://shoppad.gitbook.io/infinite-options/inputs-and-field-settings/add-a-date-picker-to-your-store.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.