Actions speak louder than words.
So let's look at a very, very quick example.
All I want to do is create an input with type date.
This is the first time we've used it.
How exciting.
And the name attribute,
we can just set to myDate. And let's just fictitiously come up with an example.
Let's say we are flying to Mars 🌏.
We've got a shuttle flight to Mars 🚀, and we want to ask users, "When are you available to fly to Mars?"
Okay, that's our question to users.
We know the ID has to match the "for" attribute,
so it's myDate.
And let's now say well, let me show you what this looks like first on a browser.
Okay, let's go to the browser refresh.
There you go.
When are you available to fly to Mars?
This is the date widget that is displayed by Chrome.
If I click on that, you know, there is no validation here.
We can literally go back to however long we want, and we can go forward.
Okay, there's no min, there's no max.
It's literally just a date calendar, so it kind of makes sense, right?
But ... let's say we need time to build the shuttle so we know that the soonest someone can leave for Mars
is in 2025, 1st of January 2025.
Let's say the shuttle can't be stagnant forever.
It's got to leave, right?
So, let's say it has to leave by 2030 1st of January.
And the other thing we can specify, well, if I save this and go to the browser, let me show you now
what this looks like.
Right.
If we now look at the widgets, we open it up.
And we look at years.
We are limited ... 2025 and the max value is 2030.
We can't go back further in time and we can't go forward more in time.
Right?
So there we go.
That's what that looks like.
But now let's include a few other things on here.
The one thing I want to do is why don't we have a default value?
So let's set its value attribute to,
I don't know,
2025, June the first.
How's that?
So let's save this.
Go to the browser and there we go.
We refresh.
And there is 1st of June 2025 as the default.
The other thing we can do here is we can introduce another attribute called step.
And just so you know, step is expressed as days.
Okay.
So if we say we don't want the user to be able to select every single day between 2025 and 2030,
we might say, hey, listen, every ten days, just give us ten day increments.
Maybe ... well maybe we should do every seven,
then we can just say it's, you know, it's every Monday or every Tuesday of the week.
But let's just assign here an example of 10,
okay.
Just keep it simple.
So we want the date to increment by 10 days.
So if we now go to our browser and we refresh and we open this widget, you can see now that every 10
days the user is allowed to select a value.
I don't know, I just wanted to show you this.
This is how you can use it.
Min, max, step value, etc etc.
This is the default styling applied by Chrome.
It will differ across different browsers, but at least you know kind of how it works now.
Right?
Let's move on.