# Date Format Editor

## Overview

The **Date Format Editor** allows displaying any date (including user input) with a specific format automatically based on how the format is configured in Design time.

<figure><img src="https://3933488479-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FjpWd52BKwABWxF2lScUK%2Fuploads%2Fgit-blob-2bab07eaf42e7ecc25610958bb64db8775db6249%2Fdate-format-editor.png?alt=media" alt=""><figcaption><p>Date Format Editor</p></figcaption></figure>

It can be used in any place where there is a `format` property:

* Form components like Textbox[^1], Typeahead[^2], Combobox[^3], [Data Label](#user-content-fn-4)[^4]
* Date Columns in the [Table Editor](#user-content-fn-5)[^5]
* Date Columns in Grid components like [Data Grid](#user-content-fn-6)[^6], [Power Grid](#user-content-fn-7)[^7], Table[^8]

## Sections

### UI Converter

It's located at the top of the editor and it allows modifying the value before applying the format to display and before storing the value in the data provider.

<figure><img src="https://3933488479-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FjpWd52BKwABWxF2lScUK%2Fuploads%2Fgit-blob-5ce976f6a406dcc97871aa9fec9c693765df7191%2Fdfe-ui-converter.png?alt=media" alt=""><figcaption><p>Use UI Converter option</p></figcaption></figure>

### Format Options

There are two options:

* Display Format
* Edit Format

Both allow entering any pattern. You may choose also from one of the predefined pattern in the drop down list.

Once the pattern is defined you may combine it with the fields below:

* *Use as mask*, ensures input data is in the correct format by providing a template that guides entry and prevents incorrect characters.
* *PlaceHolder*, it's the character used by input components to be displayed as a help for the expected format
* *Use as LocalDateTime* (NG client only) specifies that the NG Client should use the local timezone

### Legend

This is a helper list with all the special characters that can be used to define the pattern in the *Display Format* and *Edit Format*

[^1]: Guide for using a [Textbox](https://docs.servoy.com/guides/develop/application-design/ui-components/input-controls/textbox) in your applications

[^2]: A [Typeahead](https://docs.servoy.com/guides/develop/application-design/ui-components/input-controls/typeahead) is a text field that offers values from a provided value list, filtering the list as the user starts typing.

[^3]: Guide for using a [Combobox](https://docs.servoy.com/guides/develop/application-design/ui-components/input-controls/combobox) in your applications

[^4]: A [Data Label](https://docs.servoy.com/guides/develop/application-design/ui-components/buttons-and-text/data-label) is a label that can show dynamic text and possibly an image

[^5]: The reference documentation for the [Table Editor](https://docs.servoy.com/reference/servoy-developer/object-editors/table-editor)

[^6]: A [Data Grid](https://docs.servoy.com/guides/develop/application-design/ui-components/grids/data-grid_new) is a table providing advanced functionalities such as row grouping for the given foundset

[^7]: A [Power Grid](https://docs.servoy.com/guides/develop/application-design/ui-components/grids/power-grid) is a table component providing advanced functionalities such as row grouping and pivoting

[^8]: A [Servoy Extra Table](https://docs.servoy.com/guides/develop/application-design/ui-components/grids/table) is a lightweight read-only table