# 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 %}   |                                                            |                              |

###


---

# 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://docs.lowcodera.com/ui-components-1/date-time-picker.md?ask=<question>
```

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.