Input Types Date & Number

[00:00:00]
>> Jen Kramer: Okay, so the next thing we need to add is a date.
>> Jen Kramer: Guess how the date tag is gonna look?
>> Speaker 2: Date?
>> Jen Kramer: Kind of like that, right? Same sort of format. The ID is gonna be what? What should we call the ID?
>> Speaker 3: The date?
>> Jen Kramer: How about date?

[00:00:25]
What should we call the name?
>> Speaker 2: Date.
>> Jen Kramer: How about date? Okay? And our input type is gonna be what? How about date?
>> Jen Kramer: Okay, so a little bit about the date type here in HTML. This date input type is a relatively new addition to HTML. And there's actually not a lot of consensus about how the date tag looks and how it functions.

[00:00:58]
So there's actually quite a few browsers that don't support the date tag, yet. And the way it looks in Firefox and Chrome is somewhat different. So I want you to be aware of that. This may not necessarily be ready for prime time, the date tag here. A lot of people will actually use JavaScript instead.

[00:01:16]
You can add little bits of JavaScript to to mimic the date look and feel that you're going to see here for this particular item. But before we take a quick peek at it, let's go on ahead and put in our label tag right around requested date. What is this gonna be?

[00:01:33]
>> Speaker 2: Date.
>> Jen Kramer: Label [LAUGH], <label for=date>, right? And /label.
>> Jen Kramer: Yeah?
>> Speaker 3: What if you wanted to add a time as well?
>> Jen Kramer: There is a time option as well, if you wanted to do that. I'm not gonna go through that, but you can look that up. Okay, so I am in Firefox right now.

[00:02:01]
And so once I've coded my date field in you'll see that, by default, it says right here, mm/dd/yyyy, at least here in the United States. Those of you who are overseas using a different date format, you may see a different sort of placeholder here in that particular field.

[00:02:18]
When I click on it, I'll actually get a little drop-down here with a little calendar, okay? So this is Firefox, and that's how that looks here. If I go over to Chrome, and take a look at it here,
>> Jen Kramer: Chrome has got the same thing. It's got that same little date placeholder.

[00:02:40]
When I roll my mouse over it, it actually has a little down arrow that appears. That didn't happen in Firefox. And when we click on that, it also gives us a calendar, but it's a different formatted calendar. See what I'm talking about? These things are somewhat different. They're coming from the browser.

[00:02:57]
We didn't code these things, they're coming from the browser. And this is the way they look by default. So if you want something pretty, and you want it to be consistent across browsers, it might be better to use JavaScript for this particular functionality. And that's all I have to say, [LAUGH] cuz you get JavaScript later, yes?

[00:03:16]
>> Speaker 2: I was gonna ask if you could CSS?
>> Jen Kramer: Yeah.
>> Speaker 2: You're saying JavaScript, though?
>> Jen Kramer: JavaScript's probably a better option, okay? Sweet, and by the way, those of you out there who might be looking at it with Safari or Edge, I have no idea what you're gonna get.

[00:03:35]
It might be completely different from what you just saw here, cuz that date formatting is coming from the browser once again.
>> Jen Kramer: Okay, moving on, how many people would you like abducted?
>> Jen Kramer: Well, you might not wanna just go just by yourself. Maybe you wanna bring your friends, right?

[00:03:53]
Okay, guess what this is gonna look like?
>> Jen Kramer: Oops, not like that, it's gonna look like this. Just like our other input types, only we're gonna change a few things here, okay? So this time we're gonna change our type here to number, okay? So this is obviously gonna collect a number, cuz we're asking how many people we want abducted.

[00:04:23]
>> Jen Kramer: And then we have an ID. And for that, I use the value of qty as in quantity, shortened qty. And my name is also qty.
>> Jen Kramer: And then, of course, what else do we need to do?
>> Speaker 3: Change it to a label.
>> Jen Kramer: Change it to a label, <label for=qty>.

[00:05:00]
>> Jen Kramer: Okay, fabulous, let's refresh our page.