Hello, in this episode of tothepointcode,
we’re looking at how to work with the date time picker and the textinput
component in an expo or react native app. The goal here is to open the date
picker when the textinput is pressed, so that a date can be selected and processed
with the other form data on both ios and android. To follow along with this
tutorial, you just need to have a bare react native project or
an expo project, with a text input. In my case, I have an expo project with a
few text inputs and a submit button. Also, you need to install the datetimepicker package
which is provided by the react native community. Once we have that, we are ready to go. Starting in the file where the textinput is
located, we have to import the datetimepicker. Now, working with the datetimepicker, we need to create some states. Here I will
be using the useState hook from react. We need states for monitoring the current
date value of the picker and also the visibility of the picker. By visibility,
I mean when to show or hide the picker. For the initial value of the date, I’m setting it to the current date but
you can set it to any date you want. Now at the section where we have the textinput
for the date, we display the datetimepicker. Over here, we pass a few properties starting with the mode. This controls the type of picker
to be displayed and we want the date picker. Also, for the kind of date picker to be
displayed, we select the spinner variant. In addition to this, we set the value of
the picker to the date variable we created. We will add a few more properties later. Now, to control the visibility, we want to return the datepicker only
when the value for showpicker is true. now let's create a few methods for handling the date picker starting with
one for toggling divisibility Now let’s create a few methods
for handling the datepicker, starting with one for toggling the visibility. In this method, we set the value of show
picker to the negation of the current value. In that case, if it’s currently visible, it’ll
be hidden and it’ll be made visible if otherwise. Next, we create another function for
when the value of the picker changes. This function will receive event
and the selected date as parameters. From the event, we can destructure
the type of event from it. Mostly, the value of the type will be either set
or dismissed. So we check if the value is set. In that case, the current date will
be the same as the selected date. We can then update the value of the date picker. If that’s not the case, we want to
toggle the date picker to hide it. Now back to the date picker component, we pass
the onChange function to the onChange property. At this point we want to be able to show the
date picker and select a value for our form. However the datetimepicker component
behaves differently on both IOS and Android. So let’s see what we need to do for
both of them, starting with Android. Now to be able to respond
when the textinput is pressed, we need to import pressable from react native. With that done, we wrap the pressable
around the textinput component. And then pass the onPress property and
assign the toggleDatePicker function to it. Also, we set the editable property of the
textinput to false. And similar to the date picker, we want to show the pressable
textinput when showPicker is false. With this done, we can press on the date
textinput, to open the datepicker on android. This will not work on IOS yet. Now, when we select a date and confirm,
the date is not displayed properly yet. This is because we need to do some
work in the onChange function. Over here, when the type of event is set,
we want to check if we’re on android. To make this check, we use the platform api
which can be imported from react native. Here, the first thing we do is to toggle the
datepicker to prevent it from showing again. Also, we set the value of the date TextInput to
the currentDate. In this case it’s a dateOfBirth input. For the date value, we convert it to
a meaningful date string using the in-built function. We’ll look at how to use a
custom date format later in the video. Now when we try setting the value of
the date, it should work as expected. Now let’s make this work on IOS as well. Here we start with handling
press on the textinput. First we pass the editable property
and set the value to false. Also, we pass the onPressIn property and set
the value to the toggle date picker function. This will cause the datepicker to
display when the TextInput is pressed. For the picker on IOS we can adjust the
styling. So I’ll pass a style to it and then reduce the height and the margin at the top. Now on IOS, we don’t get the buttons to confirm or cancel the date picker. So we
need to create them manually. For this, I’ll create a view which will house the
buttons just below the picker. For the content, we want to style them to be in a row and then
justify the content to have space around them. Now for this view, we want to display
it on condition. We will display it only when showPicker is true and
we are currently on an IOS device. Now for the buttons, I’ll make use of
TouchableOpacity from react native and style them. You can use any pressable component
and any styles you want here. For the first button, it will be
for canceling the date picker. Here I’ll pass the styles for my
submit button to the touchable. Also, I’ll pass an additional style, which I will
handle in a bit and then set a background color. For the additional pickerButton style,
I’ll set some padding horizontally. For styling the text, I’ll pass my
buttonText style and then set a color. The button text style sets
the font size and font weight. Lastly, we pass the onPress property to the touchable and set the value
to toggle the date picker. Now the confirm button will be very
similar to this, so we copy and paste it. Here, we change the text to confirm and get rid of the background color. The
default background is fine. Also we remove the color
property from the text component. Now for the onPress, we need to create a new
function which will confirm the date on IOS. This function will set the value of
the date TextInput field to the date string and then toggle the date picker to hide it. We can then pass the function
to the confirm button. With this done, we can select and
confirm a date on IOS as well. Now some extra couple of useful date
picker properties you need to know of are the minimumDate and maximumDate properties. With these, you can limit the range of date
values that can be selected from the date picker. For instance, when working with
dateOfBirth, you can set an age limit by setting the maximum date
that can be chosen from the picker. Also, when setting dates that need to be
in the future, you can set the minimum date to be the current date. This will
prevent receiving any dates in the past. Or you can just use them both to set
a range of dates for the date picker. Now if you don’t like the format of
the date string, you can change it. For instance, if you want the format
with just numbers and hyphens, we can create a function for that. In this function, we expect to
receive the rawDate as a parameter. Using this, we create a new date object. Now we can get the year from the
date using the getFullYear method. Also, we can get the month
with the getMonth method. However, this method will start counting the
months from 0 so we add 1 to it to fix the count. Also, we can get the day from the
date using the getDate method. With these values available,
we can make use of the string literals to combine them in any
format that we want and return. Now to use this, we can go the confirmIOSDAte
function and the onChange function for android. Instead of using the toDateString() method,
we wrap the date with the formatDate function. Now when we select the date, it
will be in the format that we want. Now to make the date more pleasing to the eye, when any of the values is a single
digit, we want to prepend 0 to it. To do this, we make some checks right before we
return the string in the formatDAte function. For the month, we check if
the value is less than 10, if that’s true to prepend 0 to it as a string and
return it. Otherwise we return the value as it is. We’ll do the same thing for the day value.
Now the date should be well formatted. One thing to note about working with
custom date formats is that not all formats can be converted back into date objects
correctly. So if you need that functionality, ensure to test out your date format before
storing in your application database. The initial date format we used is an example of what works properly. The new one
doesn’t work well in that regard. Up to this point, we’ve seen how
to work with the date picker and the text input components in
an expo or react native app. The concept can be equally applied to
the time picker and the other modes of the DateTimePicker by simply
changing the mode property. The resulting source files will be
linked in the description below. Please leave a like on this
video if you found it useful. Thanks for watching!
