# Customize the date picker 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](/infinite-options/inputs-and-field-settings/add-a-date-picker-to-your-store.md), then locate the following section of code: ```html inline: true, ``` 6\. Paste the copied snippet directly after it. 7\. Save your changes. *** ### Customization Snippets * [Change the date format](#datepicker-1) * [Prevent selecting days in the past before the current day](#datepicker-3) * [Block out weekends](#datepicker-4) * [Block out specific days of the week & specific dates](#datepicker-5) * [Block out specific days of the week](#datepicker-6) * [Block out specific dates](#datepicker-7) * [Start the week on Monday](#datepicker-8) * [Enable Year or Month dropdown](#datepicker-9) * S[et up Minimum and Maximum Year](#datepicker-10) * [Change "Prev" and "Next" text](#datepicker-11) * C[hange Month Names](#datepicker-12) * [Change Day Abbreviations](#datepicker-13) * [Highlight Today's Date with CSS](#datepicker-14) *** #### Change the date format Below are examples of different ways to customize the date format. 1. Change the date format to **2026-04-30**: ```html altFormat: "yy-mm-dd", ``` 2. Change the date format to **30-04-2026**: ```html altFormat: "dd-mm-yy", ``` 3. Change the date format to **Sunday, April 3 2026**: ```html altFormat: "DD, MM d yy", ``` For a full list of formats, navigate here: *** #### 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. ```html minDate: 0, ``` #### 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. ```html maxDate: "3", ``` *** #### Block out weekends Below is a snippet that prevents weekends from being selected. ```html 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 Use this snippet when you need to block both recurring days of the week and specific calendar dates at the same time — for example, blocking Sundays and also closing for a specific holiday. There are two lines to edit: The dates line controls which specific calendar dates are blocked. Dates must be in MM-DD-YYYY format. Add or remove dates from this list as needed: ```html var array = ["04-08-2020", "04-09-2020", "04-10-2020"]; ``` To add April 11th, update the line to: ```html var array = ["04-08-2020", "04-09-2020", "04-10-2020", "04-11-2020"]; ``` The days line controls which recurring days of the week are blocked. Replace the numbers with the days you want to block using the day number reference in the "Block out specific days of the week" section below: ```html return [(day != 1 && day != 2) && array.indexOf(string) == -1]; ``` To block more than two days, add additional `&& day != X` conditions: ```html return [(day != 0 && day != 1 && day != 2 && day != 3 && day != 4 && day != 5 && day != 6) && array.indexOf(string) == -1]; ``` Full snippet: ```html 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]; }, ``` *** #### Block out specific days of the week Use this snippet to prevent customers from selecting certain days of the week. This is useful if you don't offer delivery or pickup on specific days. Each day of the week is represented by a number: | Day | Number | | --------- | ------ | | Sunday | 0 | | Monday | 1 | | Tuesday | 2 | | Wednesday | 3 | | Thursday | 4 | | Friday | 5 | | Saturday | 6 | In the snippet, find the line that contains the day numbers. To block a day, add its number to that line. To unblock a day, remove its number. ```html beforeShowDay: function(date) { var day = date.getDay(); return [(day != 1 && day != 2)]; }, ``` #### **Example: Block Sunday only** ```html return [(day != 0)]; ``` #### **Example: Block Saturday and Sunday** ```html return [(day != 0 && day != 6)]; ``` #### **Example: Block Monday through Friday** ```html return [(day != 1 && day != 2 && day != 3 && day != 4 && day != 5)]; ``` To add more days, include additional `&& day != X` conditions within the parenthesis: ```html beforeShowDay: function(date) { var day = date.getDay(); return [(day != 0 && day != 1 && day != 2 && day != 3 && day != 4 && day != 5)]; }, ``` **To allow all days** — remove the entire `beforeShowDay` function from your date picker code. #### 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 to the second line. {% hint style="info" %} **Dates must be in MM-DD-YYYY format.** {% endhint %} ```html 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]; }, ``` To add April 11th, update the second line to: ```html 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 users can select a year quickly. ```html changeYear: true, ``` The snippet below will replace the Month text with a Month Dropdown button so users can select a month quickly. ```html changeMonth: true, ``` Use this CSS snippet to better style the month and year drop-down menus: ```html #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. ```html 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. ```html yearRange: "-10:+10", ``` This snippet formats the calendar so that the year ranges from 10 years ago to 10 years in the future based on the selected year. ```html 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. ```html prevText: "Prev", nextText: "Next", ``` *** #### Change Month Names Below is a snippet that will allow you to change the default month names. ```html 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. ```html 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. ```css /* * * * * * * * * * * * * * * * * * * * * * * * * * * ShopPad App: Infinite Options Date Picker https://apps.shopify.com/custom-options * * * * * * * * * * * * * * * * * * * * * * * * * * */ .ui-datepicker-today > a { background-color: #FFF200 !important; } ``` 4. Save your changes. {% hint style="info" %} 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. {% endhint %} --- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://shoppad.gitbook.io/infinite-options/inputs-and-field-settings/add-a-date-picker-to-your-store/customize-the-date-picker.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.