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. Starting from your Shopify admin dashboard, click  Online Store, then click Themes.

2. Find the theme you want to edit, click the  ... button, then click Edit HTML/CSS.

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: http://api.jqueryui.com/datepicker/#utility-formatDate


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