# Add a date picker to your store

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

![](https://24152052-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FglwgaFVh2VmGBjtIbnDb%2Fuploads%2Fgit-blob-be63a3eb3705e9b1bb9429d60ffa408c312446cc%2Fdocsassets555e25e4e4b027e1978e1c9aimages57478bcd90336040f88d558cfile-8el9kjd0in.gif?alt=media)

{% 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="https://24152052-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FglwgaFVh2VmGBjtIbnDb%2Fuploads%2Fj66qCf4CJKTIq2cCOegi%2FDate-Picker.png%20-%20Step%201.png?alt=media&#x26;token=2d2cb89f-b9b2-4086-b01c-a9b918d34d40" 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="https://24152052-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FglwgaFVh2VmGBjtIbnDb%2Fuploads%2FCGzSeQe7VNKWBES491wl%2FDate-Picker-2.png%20-%20Step%201.png?alt=media&#x26;token=0c056b48-eef4-416c-93dc-f62f0293c207" 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="https://24152052-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FglwgaFVh2VmGBjtIbnDb%2Fuploads%2F73Rho4Fgz3rzsenws09f%2FCustomize-date-picker-IO_png_-_Step_1.png?alt=media&#x26;token=d9803c92-74db-48ee-9098-f9119972d01a" 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="https://24152052-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FglwgaFVh2VmGBjtIbnDb%2Fuploads%2FHvaAXta55qkFd93zHmFl%2FCustomize-date-picker-IO_png_-_Step_2.png?alt=media&#x26;token=8def3563-6e66-49ba-9008-98d8a37d74e1" 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="https://24152052-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FglwgaFVh2VmGBjtIbnDb%2Fuploads%2FWrxptGdmwv1gFkndJ86m%2FCSS-IO-Doc.png%20-%20Step%201.png?alt=media&#x26;token=5a2f1715-b9ae-4a84-8b96-2701bf22ef4d" 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!](https://shoppad.gitbook.io/infinite-options/inputs-and-field-settings/add-a-date-picker-to-your-store)

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