Customize the date picker's functionality

Follow the instructions below to customize the date picker's functionality.

Note: You will need to add the date picker to your store before enabling these changes. Follow the instructions in  this article to get started.

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.

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

4. Copy one of the customization snippets located at the bottom of this document.

5. Navigate to the date picker code, as seen in  this article, then locate the following section of code:

inline: true,

6. Paste the copied snippet directly after it.

7. Save your changes.

Change the date format

Below are examples of different ways to customize the date format.

1. Change the date format to 2017-04-30:

altFormat: "yy-mm-dd",

2. Change the date format to Sunday, April 3 2017:

altFormat: "DD, MM d yy",

For a full list of formats, navigate here:

Block out a certain number of days after the current day

Below is an example that only allows users to select 3 days after today.

maxDate: "3",

Block out weekends

Below is a snippet that prevents weekends from being selected.

beforeShowDay: $.datepicker.noWeekends,

Block out specific days of the week

Below is a snippet that blocks out certain days of the week. In this example, Monday and Tuesday are blocked out. You can change the blocked out days by adjusting the numbers seen on the third line, with Sunday being 0, and Saturday being 6. You can also add more days by including additional "and" conditions within the parenthesis, as seen in the second snippet.

beforeShowDay: function(date) {
  var day = date.getDay();
  return [(day != 1 && day != 2)];
beforeShowDay: function(date) {
  var day = date.getDay();
  return [(day != 0 && day != 1 && day != 2 && day != 3 && day != 4 && day != 5)];

Start the week on Monday

Below is a snippet that formats the calendar so Monday appears as the first day of the week. You can change the first day of the week by adjusting the number value, with Sunday being 0, and Saturday being 6.

firstDay: 1,

Prevent the user from selecting days in the past

The snippet below prevents users from selecting dates before the current day. You can adjust the minimum selectable date by changing the number value, where -1 is yesterday, and 2 is two days in the future.

minDate: 0,

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 these customizations added for you.

Still need help? Contact Us Contact Us