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.

Customization Snippets

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 30-04-2017:

altFormat: "dd-mm-yy",

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

Prevent selecting days in the past before the current day

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,

Block out weekends

Below is a snippet that prevents weekends from being selected.

beforeShowDay: $.datepicker.noWeekends,

If you need to block out weekends and specific dates, it is best to use the customization snippet below this instead of this one.

Block out specific days of the week & specific dates

Below is a snippet that blocks out specific days of the week and specific dates.

beforeShowDay: function(date) {
  var day = date.getDay();
  var array = ["04-08-2020", "04-09-2020", "04-10-2020"];
  var string = jQ.datepicker.formatDate('mm-dd-yy', date);
  return [(day != 1 && day != 2) && array.indexOf(string) == -1];
},

On the third line, April 8th, April 9th, and April 10th are blocked out. If you would like to add more dates, follow the example in the second snippet below.

var array = ["04-08-2020", "04-09-2020", "04-10-2020"];

var array = ["04-08-2020", "04-09-2020", "04-10-2020", "04-11-2020", "04-12-2020"];

On the fifth line, Monday and Tuesday are blocked out. If you would like to block out more days of the week (Sunday = 0, Monday = 1, Tuesday = 2, Wednesday = 3, Thursday = 4, Friday = 5, Saturday = 6), follow the example in the second snippet below.

return [(day != 1 && day != 2) && array.indexOf(string) == -1];

return [(day != 0 && day != 1 && day != 2 && day != 3 && day != 4 && day != 5 && day != 6) && array.indexOf(string) == -1];

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)];
},

Block out specific dates

Below is a snippet that blocks out certain dates. In this example, April 8th, April 9th, and April 10th are blocked out. You can change the blocked out dates by adding more dates seen on the second line.

beforeShowDay: function(date) {
  var array = ["04-08-2020", "04-09-2020", "04-10-2020"];
  var string = jQ.datepicker.formatDate('mm-dd-yy', date);
  return [array.indexOf(string) == -1];
},

For example, if you would like to add April 11th, you would change the second line like this.

 var array = ["04-08-2020", "04-09-2020", "04-10-2020", "04-11-2020"];

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,

Enable Year or Month dropdown

The snippet below will replace the Year text with a Year Dropdown button so user can select a year quickly.

changeYear: true,

The snippet below will replace the Month text with a Month Dropdown button so user can select a month quickly.

changeMonth: true,

Use this CSS snippet to better style the month and year drop-down menus:

#infiniteoptions-container .ui-datepicker-month {
  margin-bottom: 15px;
}

#infiniteoptions-container .ui-datepicker-year {
  margin-bottom: 5px;
}

Set up Minimum and Maximum Year

This snippet formats the calendar so that the year ranges from 1920 to 2020.

yearRange: "1920:2020",

This snippet formats the calendar so that the year ranges from 10 years ago to 10 years in the future based on the current year.

yearRange: "-10:+10",

Below is a snippet that formats the calendar so that the year ranges from 10 years ago to 10 years in the future based on the selected year.

yearRange: "c-10:c+10",

Change "Prev" and "Next" text

Below is a snippet that will allow you to change the default "Prev" and "Next" text that switches months.

prevText: "Prev",
nextText: "Next",

Change Month Names

Below is a snippet that will allow you to change the default month names.

monthNames: ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"],

Change Day Abbreviations

This snippet will allow you to change the default day abbreviations.

dayNamesMin: ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"],

Highlight Today's Date with CSS

1. On the left side, click on the Assets folder to reveal its 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 Date Picker
https://apps.shopify.com/custom-options
* * * * * * * * * * * * * * * * * * * * * * * * * * */
.ui-datepicker-today > a {
  background-color: #FFF200 !important;
}

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

Related Articles