# 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](https://3753622978-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-Mk6h6_qso0k3_0dNo1k%2Fuploads%2F0kCOEG5kf7Jxipyarnd9%2Fimage.png?alt=media\&token=5c24c629-2db3-4096-b15e-03df4c2ae51e)

![Mobile Date time picker in Power Apps](https://3753622978-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-Mk6h6_qso0k3_0dNo1k%2Fuploads%2FUKanSxeduXLDWcEAJA6A%2Fimage.png?alt=media\&token=a760917e-264f-49d2-b1cf-f5e4bd01d0ff)

‌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

![](https://3753622978-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-Mk6h6_qso0k3_0dNo1k%2Fuploads%2FEwBAZvGJlVngTmTOvU9j%2Fimage.png?alt=media\&token=1dd2165d-c271-449d-a23a-92d257d299d4)

{% 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

![](https://3753622978-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-Mk6h6_qso0k3_0dNo1k%2Fuploads%2FxA0torzKsK2ZdtGd1HhL%2Fimage.png?alt=media\&token=bf99911c-3487-42d2-94a4-03f9c7060a2c)

{% 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

![](https://3753622978-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-Mk6h6_qso0k3_0dNo1k%2Fuploads%2FDQ6NRShYyCRCDiu5nStD%2Fimage.png?alt=media\&token=929da6ea-8f5d-4c7c-9293-61a17f59fb3c)

{% 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

![](https://3753622978-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-Mk6h6_qso0k3_0dNo1k%2Fuploads%2FE81b3Qp9LBNfaEzoaB5a%2Fimage.png?alt=media\&token=aeb85d67-0d8e-41bd-a8d4-a4458562cec8)

{% 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

![](https://3753622978-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-Mk6h6_qso0k3_0dNo1k%2Fuploads%2F4H8E9tyF8LEJtiZYzm4N%2Fimage.png?alt=media\&token=c358efac-560c-4324-9631-8bc61acef260)

{% 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

![](https://3753622978-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-Mk6h6_qso0k3_0dNo1k%2Fuploads%2FpHtunN4hBVVQcAaNCFdz%2Fimage.png?alt=media\&token=2bdb741e-5c88-49ce-a92f-2331718abbe1)

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

###