> For the complete documentation index, see [llms.txt](https://wplake.gitbook.io/advanced-views/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://wplake.gitbook.io/advanced-views/field-types/content/date-time-picker.md).

# Displaying Date-Time picker

The date/time picker (e.g [ACF DatePicker](https://wplake.org/blog/acf-date-picker/)) is a field type that provides a calendar-based interface for editors to choose a date and/or time, as opposed to a simple text input. There are various date and time formats, such as European (e.g., dd/mm/yyyy) or US (e.g., mm/dd/yyyy), as well as options for displaying time in either 12-hour or 24-hour formats. 

Advanced Views natively supports the following Date-Time types:

1. [ACF](/advanced-views/fields/meta-plugins/advanced-custom-fields.md): any DatePicker, DateTimePicker, TimePicker field
2. [MetaBox](/advanced-views/fields/meta-plugins/meta-box-fields.md): any Date, DateTime field
3. [Pods](/advanced-views/fields/meta-plugins/pods-fields.md): any Date, DateTime, Time field

## 1. How to display a Date-Time field

1. [Create a new *Layout*](/advanced-views/getting-started/first-layout.md)
2. Add any Binary choice field
3. Save the *Layout*, copy its [embedding shortcode](/advanced-views/layouts/embedding-shortcode.md)
4. Embed *Layout*: paste the shortcode inside the target place

By default, Advanced Views displays the date in the format you've set up in the field settings, either as the 'Return' or 'Save' format. You can [customize the *Layout* template](/advanced-views/layouts/code-fields/custom-template.md) to change the output:

## 2. Date format manipulations

When working with dates, it's important to consider the variable type. Strings containing dates and Date objects are distinct entities, and you should keep the following in mind:

1. Date objects cannot be displayed directly; you need to convert them into strings for this purpose.
2. When using conditional statements, like `if`, you cannot directly compare date strings; you should first convert them into Date objects for comparison.

{% hint style="info" %}
Tip: When you make the date manipulations, we recommend using the `timestamp` property of the date field. \
This will save you from dealing with date parsing issues. For example, both US (e.g., mm/dd/yyyy) and European (e.g., dd/mm/yyyy) formats use the same delimiter, so the European format will be ignored in favor of the US format. This behavior is the default behavior of the [strtotime PHP function](https://www.php.net/manual/en/function.strtotime.php).
{% endhint %}

### 2.1) Inside Twig templates

**Date filter (for output)**

Converts a Date object into a string based on the specified format. If you provide a string, the filter will automatically parse the date using [strtotime](https://www.php.net/strtotime) and then convert it into a string in the requested format.

```
{{ "now"|date }} {# displays the current time #}
{{ my_date|date("Y") }} {# displays the year from the variable #}
{{ "10-10-2010"|date("d") }} {# displays the day from the string #}
{{ "+1 day"|date }} {# displays tomorrow's date #}
```

**Date\_modify filter (for modification)**

Modifies a Date object according to the argument provided and returns the modified Date object. If you pass a string, the filter will automatically parse the date using [strtotime](https://www.php.net/strtotime).

```
{{ my_date|date_modify("+1 week") }} {# adds one week to the date #}
{{ "10-10-2010"|date_modify("+1 day") }} {# adds one day to the date #}
```

Keep in mind that this function **returns a Date object**, not a string. If you want to display the modified date, you should use the "date" filter to print the Date object in a specific format.

```
{{ my_date|date_modify("+1 week")|date("d/m/Y") }} {# modifies and prints the date #}
```

**Date function (for comparison)**

Converts a string into a Date object, which is useful for comparison purposes.

```
{{ date("10-10-2010") }} {# creates a Date object from a string #}
{% if date(first_date) > date(second_date) %}
{{ first_date|date("d/m/Y") }}
{% endif %}
```

Keep in mind that this function also **returns a Date object**, not a string. If you want to display the Date object, you should use the "date" filter to print it in a specific format.

```
{{ date("now")|date("d/m/Y") }}
```

**Available date formats**

* you can use any formats with the |date filter
* you can use most of the available date formats for the date() function. For example, "m-d-Y" (10-20-2011), "M d, Y" (October 20, 2011), or "d.m.Y" (20.10.2011).

{% hint style="info" %}
Use '`datepicker.timestamp|date("d-m-Y")`' as a safe way to avoid date parsing issues described above.
{% endhint %}

## 3. Multilingual dates  

By default, PHP displays date-related symbols (such as 'a.m.') in English. Advanced Views utilizes the '[date\_i18n](https://developer.wordpress.org/reference/functions/date_i18n/)' WordPress function, which supports multiple languages, so you don't need to concern yourself with translating date-related symbols.