Add a date picker to your store

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

Note: This feature only supports one date picker on a product page at this time.

Create the date picker option

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

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

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.

Add the necessary scripts to your theme

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

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

</head>

3. Copy the following code snippet.

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

2. Locate the Custom CSS section.

3. Copy and paste the code snippet below of any existing 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!

Need assistance? Our support team is here to help. All you have to do is request the Expert Install Service from your Infinite Options dashboard and we can get this feature added for you.