Add a date picker to your store

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

Create the date picker option

1. Navigate to your Infinite Options dashboard.

2. Create an option with a Text input type.

3. Click on the Gear icon to reveal additional controls.

4. Set the class name to datepicker.

5. Save your changes

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 HTML/CSS.

Add the necessary scripts to your theme

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

2. Copy the following code snippet.

<script>
  window.Shoppad = window.Shoppad || {},
  window.Shoppad.apps = window.Shoppad.apps || {},
  window.Shoppad.apps.infiniteoptions = {
    ready: function() {

      function callback() {
        $('#infiniteoptions-container .datepicker').datepicker({
          inline: true,
          altField: '#infiniteoptions-container .datepicker input[type=text]',
          onSelect: function() {
            $('#infiniteoptions-container .ui-datepicker-inline').hide();
          }
        });

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

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

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

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

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

      if (window.jQuery.fn.datepicker) {
        callback();
      } else {
        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>

<script src='//d1liekpayvooaz.cloudfront.net/apps/customizery/customizery.js?shop={{shop.permanent_domain}}'></script>

3. Paste the snippet BEFORE the closing </head> tag.

4. Save your changes.

Add CSS styles

1. On the left side, click on the  Assets folder to reveal it's contents.

2. Open your main CSS file (usually named theme.scss.liquid, timber.scss.liquid, or styles.scss.liquid)then scroll to the bottom of the document.

3. Copy and paste the code snippet below at the bottom of that file.

/* * * * * * * * * * * * * * * * * * * * * * * * * * * 
ShopPad App: Infinite Options
https://apps.shopify.com/custom-options
* * * * * * * * * * * * * * * * * * * * * * * * * * */
#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.

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.

Still need help? Contact Us Contact Us