So now that we have our day pick in place we need to add this to our event form.
So let's open up the event form and festival will.
And the date to our validators.
So we'll make sure this is required as well.
So we'll say date is required and put a specified date inside here then we'll scroll and down to our
dates input field and we'll sort the text input here for our dates inputs and make sure this has been
brought in successfully as well.
And there it is OK.
So let's see what we get without doing anything else.
We should see at least our dates inputs in the component so we'll head over to the browser and we'll
just click on Create events.
And if we click inside the date picker and we can see we get our date picker.
No surprises there.
And we can select different dates and our dates input updates successfully and we'll just be careful
here because dates are funny and we'll make sure there's nothing going on in our console at the same
time.
So that looks good so far but what we also need is a time picture here.
And what I also notice if I click outside we didn't get our validation.
Even though we've hooked up this to the validators so let us fix the validation first of all and we'll
go back to our data inputs.
Now we've got these inputs on change event which allows redux form to track the changes to the inputs.
But what we haven't given this is our on Blair event.
So that radix form doesn't know if we've clicked in or out of the field.
So we'll at this will say on Blair and we'll just set this to input start on Blair and if we head back
to our form let's just make sure we can click in.
We clock out now we get the validation there.
So that's fine.
And then we select the date and the validation goes away.
So what we'll do now is we'll configure their properties validate pecker.
So it's how we want it.
And when we select a date we format the dates in a nicer format than what we have here.
So we'll go back to the event form and we'll add some additional properties that we're going to pass
across to our date picker and these properties are going to be available inside our rest where we're
spreading the rest of the properties.
That's where these are going to be available from.
So our date picker can use them.
So in Sign here what we'll do is we'll specify a date format and this is going to look a little bit
weird because we're going to use D.D. and you're expecting this to be an M M but it's not it's l l l
in capitals.
And I'll explain why very shortly but we'll get this set up first the memo will cover why I've done
certain things then it's going to be y y y y in lowercase which represents the long year then we'll
say h fully our colon m m for minutes and then a fully a.m. or p.m. And if we just take a look at this
now and we click on the dates and we select the dates.
Now we get this formatted slightly better although of course we have a time in there because we've specified
a time but we haven't given our users a way to select the time.
So what we'll do is we'll specify show time selects which will allow us to use the time picker and inside
our time picker we'll give the time of format equal to h h colon m m and this is just the 24 hour clock
format inside here because the styling of this day Paco it just looks a bit neater just to use the 24
hour rival in its default which is to use A.M. and PM it just looks a bit cramped in there.
So we'll go for less.
And if I take a look at what we have now.
Now we can see our time pictures we pick a date and we don't actually select the dates until we also
select the time and that's what we get now in our date picker.
So I just want to explain this little bit of weirdness here in how we specify the dates and this is
one of the changes in dates.
F.A. version 2.
Now I'm in the documentation for version 2.0 point zero Alpha 27 which is the one that we're using.
And I've highlighted the format options in here and these are the string formats we use.
Now there is a woman warning here saying Please note that the format tokens differ from moment J.S.
and Ava libraries.
Well they do they're quite different.
And you're going to get some weird results if you use the normal format strings that you're used to
so when it comes to day formatting you're going to need to come in these dogs you're going to need to
specify Li alpha version as well or at least version two and take a look at what you want to display
in the date itself.
The mumps is the weird one.
If you use m m m you're going to get some warnings in your console.
So you need to use this month standalone one.
It it's l Ravel and M and most of it is kind of similar but you also need to be a bit wary about the
day of the year as well as you can end up with the actual day of the year rather than of the month.
If he used a capital D.
So you need to use the lowercase d in this case that kind of thing.
And if you want a long day instead of capital D this is now gone and you need to use ease for days so
it's a little bit different.
So that's the date weirdness and we now have on dates picker configured inside here.
Let's make sure we can submit an event that uses this I'm getting some set time out warning so I'm just
going to clearly console by refreshing the page and see if we can create an event with a date and we'll
just put some random stuff in here we'll click on the dates the submit button is still disabled if the
validation doesn't match we'll pick a time and we'll click submit and we get the dates submitted successfully
so that's good.
And if we click on manage events then we can see the dates appearing in here and we can update it and
submit and that all works great as well.
So let's pick on an existing events.
Now our dates in here are just simple strings but we're passing these simple strings to our date picker
and converting them to a date at the same time.
So even though this is not brilliant we should still find that this works inside our date picker.
So I click on View and click on manage events and we can see the dates inside here.
Now we didn't include times and it shows up as 7:00 a.m. because I'm not in GMT at the moment in the
time zone I'm plus 7.
So this effectively is the default date which would be 0 0 it's no no time at all and it's just given
us the default time here and we can still select and still change the time and everything and that will
work.
And if I submits them we get the actual date and time and if we take a look inside our events then our
first event is still set to wherever it was that we passed into it from our event reduce our bar.
Second date is now the 27 for March 20 18.
I didn't change the year so that's the reason I 830 AM.
So it actually displays quite okay in our components as well but we will reformat leaves later on.
So it's all looking pretty good but there is actually a problem with this whilst the date picker works
fine there's nothing to stop the user typing anything into the field which is a problem but what's worse
is when a user clicks out the it actually crashes the application and what we get is some invalid time
value here and that's not good.
So what we need to do is prevent the user from actually typing into this field and what we can do in
the date picker or the data inputs for less is there is never on change event we can access inside date
picker called on change rule and this is a function is executed when the user types into a field.
So what we'll do inside here is will and an array function and will pass the events of less it will
say E and then what we're doing here is we'll simply say prevent defaults and this should stop the user
from typing into the field so they'll have to click inside this to access the date picker and I'll just
refresh again and now I can still select the dates and the time but if I try and type into the field
that's disabled so the only way they can get to lists now is by using the selection of the field itself
and we don't want to use it to type any input into this is too tricky to get the users to type the data
in a format that you want and because everyone in different countries has a different way of writing
dates it's much better to force them down the road of using a selector so that you can get the data
you want in our database or fire stories it will be later on.
So we now have a working configured date picker in our application and believe it or not this is a lot
easier to configure than the prior version of React date picker.
I debated in an entire lesson to fixing all the issues that came up because of the requirement to convert
a javascript date to a moment date to an ice age string to various other things and it's much easier
to use native javascript dates rather than using moments data objects and that was quite a configuration
problem in the previous version of this course.
So hopefully this will be a lot easier to get your head around and what we've actually done is we've
currently end of our lesson on forms.
Well we have kind of the event location details where we're going to use the places autocomplete is
kind of a special case and we've got a section dedicated towards that.
So what we'll do is we'll set we'll sign off our form as it is at the moment and we'll go back to our
viewers code and I'm just going to commit these changes that we've made into our source control.
So I'm going to stage our changes nine of them in my case and say end of section nine and control into
and then I'm going to push these up to the get her repository and we'll wrap up this section with a
summary.