Date & Time Picker with Compose
Published: 2023-07-19 12:57:21


![Firebase icon playng guitar](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pw9hp6sxmsktljosjgya.gif)

Hello, amazing person of the internet! Hope you're doing well.

In today's world, where every second counts, managing dates and times efficiently in our app has become crucial.

&nbsp;

##Data Picker

By default, a date picker enables you to select a date through a calendar UI. Nevertheless, it also permits switching to a date input mode for manually entering dates using the keyboard's numeric keys.

The first thing we have to do is create a variable responsible for keeping the state of our calendar:

{% embed https://gist.github.com/MariaLuiza-CS/343c3af9faded881c77c35bce13f1573 %}

Let's call the **DatePicker()** function to display the date block view:

{% embed https://gist.github.com/MariaLuiza-CS/2136a6609fc73113ecc8ee04acdd5fc1 %}

You are going to see something like that:

![Date Picker where you can set the date and year](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/klfwvhjsh4m1iuzq9gyf.png)

We can make things look more beautiful and interactive.To create an amazing dialog, we can call the function **DatePickerDialog()**. As the name suggests, this allows us to create a dialog and control when it will be displayed:

{% embed https://gist.github.com/MariaLuiza-CS/48af6ba5f4ffaffadce465e325e45e36 %}

I am going to create a variable that will receive a boolean to control when we are going to show the dialog. When the user clicks on the dismiss button, iwill set it to false, and do the same thing when the user confirms:

{% embed https://gist.github.com/MariaLuiza-CS/82d78dba79d6b1be28098a156f920dcc %}

Now, let's update our variable state cleaning its value and call the **DatePicker()** into our **DatePickerDialog()** function:

{% embed https://gist.github.com/MariaLuiza-CS/5281966dbeacbfddd5ce75f29b2587d6 %}

You're going to see something like that:

![Date Picker Dialog where you can set the date and year](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/r1ewawwydqbjroiz46qk.png)

To determine the date the user has selected, simply call the **state ** variable, and it will provide you with a set of options:

{% embed https://gist.github.com/MariaLuiza-CS/e035f7408887b4a5e117c3782abaa64b %}

To control the color of the dialog just pass the parameter colors:

{% embed https://gist.github.com/MariaLuiza-CS/cd4aa7f01aab1c9f8b31d2b28e8bc8d8 %}

&nbsp;

##Time Picker

Time pickers help users select and set a specific time. The logic is very similar to the Date Picker. We need to create a state and call the dialog function:

{% embed https://gist.github.com/MariaLuiza-CS/bd7d4e98e3a129689fb474756ae516ea %}

You're going to see something like that:

![Time Picker where you can select the hour and minute](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/79pbrp285chk585scwse.png)

Like the Date Picker we can make things look more beautiful and interactive. To create other types of timers, we can call the function **TimeInput()**. This enables us to input a specific time and control when it will be displayed:

{% embed https://gist.github.com/MariaLuiza-CS/61d213f707bc484aef81299cb7e73388 %}

You're going to see something like that:

![Time Picker where you can set the hour and minute](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kb1c74pyaj3fjshje63n.png)

> When this article was posted, the material io 3 didn't support the TimePickerDialog. However, the next release will enable the display of a dialog box similar to the DatePickerDialog.

&nbsp;

Conclusion

You can also customize the colors of the pickers as you desire. The Date and Time Picker is an essential design element for your app, and it's crucial to understand how to utilize this feature correctly.

All the code and exemple it is [on this repository](https://github.com/MariaLuiza-CS/DateAndTimePicker).

Happy coding ❤

---

Please let me know what you think in the comments…

Connect with me 👇

[Linkedin](https://www.linkedin.com/in/marialuiza-cs/)

[GitHub](https://github.com/MariaLuiza-CS)

[Medium](https://medium.com/@MariaLuiza-CS)

![gif of a lamp](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cbxgbte94f8jwi8vefpt.gif)