> For the complete documentation index, see [llms.txt](https://docs.lowcodera.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.lowcodera.com/ui-components-1/date-time-picker.md).

# Date time picker

## Purpose

The lowcodera date time picker is a lightweight and mobile-friendly component that allows end users to enter or select date and time values from a pop-up calendar and interactive time clock.

## Variations

![Datetimepicker in Power Apps](/files/hMF1iLvlJX54a5QKOlXt)

![Mobile Date time picker in Power Apps](/files/WxzsL8r8b1tQryfGmKuQ)

‌There are several variations of datetimepicker with different configuration properties.

* Date Picker
* Time Picker
* DateTime Picker
* DateMobile Picker
* TimeMobile Picker
* DateTimeMobile Picker

## Properties

The properties below are the main ones which change this components appearance and behaviors.

<table data-header-hidden><thead><tr><th width="208">Control Property</th><th>Description</th><th width="188">Accepted Values</th><th width="150">Required</th></tr></thead><tbody><tr><td><strong>Property</strong></td><td><strong>Description</strong></td><td>Accepted <strong>Values</strong></td><td><strong>Required</strong></td></tr><tr><td>Label</td><td>Property to set Label for control</td><td>Text</td><td>Yes</td></tr><tr><td>Type</td><td>Property to set appearence of datetime picker.</td><td><p>Date </p><p>Time </p><p>DateTime </p><p>DateMobile TimeMobile DateTimeMobile</p></td><td>X</td></tr><tr><td>Disabled</td><td>Property to set datetime picker in disabled mode</td><td>Boolean</td><td>X</td></tr><tr><td>ReadOnly</td><td>Property to set datetime picker in read only mode</td><td>Boolean</td><td>X</td></tr><tr><td>Default</td><td>Property to set initial/default date of the calendar on first load</td><td>Date Value (e.g. 2021-12-15)</td><td>X</td></tr><tr><td>InputFormat</td><td>Property to set datetime format</td><td><p>String </p><p>"DD/MM/yyyy"</p><p>"MM/DD/yyyy"</p><p>"yyyy/MM/DD"</p><p>"DD/MM/yyyy hh:mm:ss"</p><p>"DD-MM-yyyy"</p><p>"MM-DD-yyyy"</p><p>"yyyy-MM-DD"</p><p>"yyyy-MM-DD" hh:mm:ss"</p></td><td>Yes</td></tr><tr><td></td><td></td><td></td><td></td></tr></tbody></table>

## Examples&#x20;

### Date Picker

![](/files/zZys9JKXXy88KUaB8bud)

{% tabs %}
{% tab title="Property Configration" %}

* [x] `Label`property is to set as **Select Booking Date**
* [x] `Type`is to set as **Date**
* [x] `InputFormat` is set to **"dd/mm/yyyy"**
  {% endtab %}

{% tab title="Event Configuration" %}
Once we configure our textbox and we want to write some events, we need to use **`OnChange`** Event of the button

```
UpdateContext({DateVal: DateTimePicker1.CurrentValue})
```

{% endtab %}

{% tab title="Output Properties" %}
Please check the following Output properties for Lowcodera's datetimepicker control.

<table><thead><tr><th>Output Property</th><th width="247.33333333333331">Purpose</th><th>Example</th></tr></thead><tbody><tr><td>CurrentValue</td><td>Get Current value from Lowcodera datetimepicker Component.</td><td>DateTimePicker1.CurrentValue</td></tr></tbody></table>

{% endtab %}
{% endtabs %}

### Time Picker

![](/files/axsnMcUZNxGz0NHEwgU8)

{% tabs %}
{% tab title="Property Configration" %}

* [x] `Label`property is to set as **Select Booking Time**
* [x] `Type`is to set as **Time**
* [x] `InputFormat` is set to **"hh:mm:ss"**
  {% endtab %}

{% tab title="Event Configuration" %}
Once we configure our textbox and we want to write some events, we need to use **`OnChange`** Event of the button

```
UpdateContext({DateVal: DateTimePicker1.CurrentValue})
```

{% endtab %}

{% tab title="Output Properties" %}
Please check the following Output properties for Lowcodera's datetimepicker control.

| Output Property | Purpose                                                    | Example                      |
| --------------- | ---------------------------------------------------------- | ---------------------------- |
| CurrentValue    | Get Current value from Lowcodera datetimepicker Component. | DateTimePicker1.CurrentValue |
| {% endtab %}    |                                                            |                              |
| {% endtabs %}   |                                                            |                              |

### Date Time Picker

![](/files/aWxOJxL1oVTPKWLT200a)

{% tabs %}
{% tab title="Property Configration" %}

* [x] `Label`property is to set as **Select Booking Date**
* [x] `Type`is to set as **DateTime**
* [x] `InputFormat` is set to **"dd/mm/yyyy hh:mm:ss"**
  {% endtab %}

{% tab title="Event Configuration" %}
Once we configure our textbox and we want to write some events, we need to use **`OnChange`** Event of the button

```
UpdateContext({DateVal: DateTimePicker1.CurrentValue})
```

{% endtab %}

{% tab title="Output Properties" %}
Please check the following Output properties for Lowcodera's datetimepicker control.

| Output Property | Purpose                                                    | Example                      |
| --------------- | ---------------------------------------------------------- | ---------------------------- |
| CurrentValue    | Get Current value from Lowcodera datetimepicker Component. | DateTimePicker1.CurrentValue |
| {% endtab %}    |                                                            |                              |
| {% endtabs %}   |                                                            |                              |

### Mobile Date Picker

![](/files/vSLh113UaTQkmx60loEv)

{% tabs %}
{% tab title="Property Configration" %}

* [x] `Label`property is to set as **Select Booking Time**
* [x] `Type`is to set as **DateMobile**
* [x] `InputFormat` is set to **"dd/mm/yyyy"**
  {% endtab %}

{% tab title="Event Configuration" %}
Once we configure our textbox and we want to write some events, we need to use **`OnChange`** Event of the button

```
UpdateContext({DateVal: DateTimePicker1.CurrentValue})
```

{% endtab %}

{% tab title="Output Properties" %}
Please check the following Output properties for Lowcodera's datetimepicker control.

| Output Property | Purpose                                                    | Example                      |
| --------------- | ---------------------------------------------------------- | ---------------------------- |
| CurrentValue    | Get Current value from Lowcodera datetimepicker Component. | DateTimePicker1.CurrentValue |
| {% endtab %}    |                                                            |                              |
| {% endtabs %}   |                                                            |                              |

### Mobile Time Picker

![](/files/CNRvJC9fxjAxEEyPbLXa)

{% tabs %}
{% tab title="Property Configration" %}

* [x] `Label`property is to set as **Select Booking Date**
* [x] `Type`is to set as **TimeMobile**
* [x] `InputFormat` is set to **"hh:mm:ss"**
  {% endtab %}

{% tab title="Event Configuration" %}
Once we configure our textbox and we want to write some events, we need to use **`OnChange`** Event of the button

```
UpdateContext({DateVal: DateTimePicker1.CurrentValue})
```

{% endtab %}

{% tab title="Output Properties" %}
Please check the following Output properties for Lowcodera's datetimepicker control.

| Output Property | Purpose                                                    | Example                      |
| --------------- | ---------------------------------------------------------- | ---------------------------- |
| CurrentValue    | Get Current value from Lowcodera datetimepicker Component. | DateTimePicker1.CurrentValue |
| {% endtab %}    |                                                            |                              |
| {% endtabs %}   |                                                            |                              |

### Mobile Date Time Picker

![](/files/umnObPf4vIJwUJ9a0fzM)

{% tabs %}
{% tab title="Property Configration" %}

* [x] `Label`property is to set as **Select Booking Date**
* [x] `Type`is to set as **DateTimeMobile**
* [x] `InputFormat` is set to **"dd/mm/yyyy hh:mm:ss"**
  {% endtab %}

{% tab title="Event Configuration" %}
Once we configure our textbox and we want to write some events, we need to use **`OnChange`** Event of the button

```
UpdateContext({DateVal: DateTimePicker1.CurrentValue})
```

{% endtab %}

{% tab title="Output Properties" %}
Please check the following Output properties for Lowcodera's datetimepicker control.

| Output Property | Purpose                                                    | Example                      |
| --------------- | ---------------------------------------------------------- | ---------------------------- |
| CurrentValue    | Get Current value from Lowcodera datetimepicker Component. | DateTimePicker1.CurrentValue |
| {% endtab %}    |                                                            |                              |
| {% endtabs %}   |                                                            |                              |

###