# 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](https://shoppad.gitbook.io/infinite-options/inputs-and-field-settings/add-a-date-picker-to-your-store) 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](https://shoppad.gitbook.io/infinite-options/inputs-and-field-settings/add-a-date-picker-to-your-store), then locate the following section of code:
```liquid
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 2017-04-30:
```liquid
altFormat: "yy-mm-dd",
```
2\. Change the date format to 30-04-2017:
```liquid
altFormat: "dd-mm-yy",
```
3\. Change the date format to Sunday, April 3 2017:
```liquid
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.
```liquid
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.
```liquid
maxDate: "3",
```
***
### 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.
```liquid
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.
```liquid
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.
```liquid
var array = ["04-08-2020", "04-09-2020", "04-10-2020"];
```
```liquid
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.
```liquid
return [(day != 1 && day != 2) && array.indexOf(string) == -1];
```
```liquid
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.
```liquid
beforeShowDay: function(date) {
var day = date.getDay();
return [(day != 1 && day != 2)];
},
```
```liquid
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.
```liquid
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.
```liquid
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.
```liquid
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.
```liquid
changeYear: true,
```
The snippet below will replace the Month text with a Month Dropdown button so user can select a month quickly.
```liquid
changeMonth: true,
```
Use this CSS snippet to better style the month and year drop-down menus:
```css
#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.
```liquid
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**.
```liquid
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**.
```liquid
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.
```liquid
prevText: "Prev",
nextText: "Next",
```
***
#### Change Month Names
Below is a snippet that will allow you to change the default month names.
```liquid
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.
```liquid
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.
Need assistance? Our support team is here to help. All you have to do is request the [Expert Install Service](https://infinite-options.docs.theshoppad.com/welcome/expert-install-service) from your Infinite Options dashboard and we can get these customizations added for you.
