WEBVTT 0 00:00.290 --> 00:02.360 Actions speak louder than words. 1 00:02.360 --> 00:04.850 So let's look at a very, very quick example. 2 00:04.880 --> 00:08.310 All I want to do is create an input with type date. 3 00:08.330 --> 00:09.800 This is the first time we've used it. 4 00:09.830 --> 00:10.940 How exciting. 5 00:11.360 --> 00:12.530 And the name attribute, 6 00:12.530 --> 00:18.020 we can just set to myDate. And let's just fictitiously come up with an example. 7 00:18.020 --> 00:20.740 Let's say we are flying to Mars 🌏. 8 00:20.750 --> 00:32.030 We've got a shuttle flight to Mars 🚀, and we want to ask users, "When are you available to fly to Mars?" 9 00:32.090 --> 00:33.880 Okay, that's our question to users. 10 00:33.890 --> 00:36.340 We know the ID has to match the "for" attribute, 11 00:36.340 --> 00:37.130 so it's myDate. 12 00:37.130 --> 00:41.030 And let's now say well, let me show you what this looks like first on a browser. 13 00:41.060 --> 00:42.890 Okay, let's go to the browser refresh. 14 00:42.890 --> 00:43.570 There you go. 15 00:43.580 --> 00:45.260 When are you available to fly to Mars? 16 00:45.290 --> 00:49.180 This is the date widget that is displayed by Chrome. 17 00:49.190 --> 00:54.440 If I click on that, you know, there is no validation here. 18 00:54.440 --> 00:59.210 We can literally go back to however long we want, and we can go forward. 19 00:59.400 --> 01:01.410 Okay, there's no min, there's no max. 20 01:01.440 --> 01:04.650 It's literally just a date calendar, so it kind of makes sense, right? 21 01:04.860 --> 01:14.610 But ... let's say we need time to build the shuttle so we know that the soonest someone can leave for Mars 22 01:14.640 --> 01:19.410 is in 2025, 1st of January 2025. 23 01:19.650 --> 01:23.220 Let's say the shuttle can't be stagnant forever. 24 01:23.220 --> 01:24.480 It's got to leave, right? 25 01:24.480 --> 01:29.700 So, let's say it has to leave by 2030 1st of January. 26 01:30.410 --> 01:36.050 And the other thing we can specify, well, if I save this and go to the browser, let me show you now 27 01:36.050 --> 01:37.100 what this looks like. 28 01:38.690 --> 01:39.320 Right. 29 01:39.620 --> 01:43.730 If we now look at the widgets, we open it up. 30 01:44.660 --> 01:46.370 And we look at years. 31 01:46.400 --> 01:51.500 We are limited ... 2025 and the max value is 2030. 32 01:51.530 --> 01:55.580 We can't go back further in time and we can't go forward more in time. 33 01:55.580 --> 01:56.200 Right? 34 01:56.210 --> 01:56.810 So there we go. 35 01:56.810 --> 01:58.100 That's what that looks like. 36 01:58.100 --> 02:02.000 But now let's include a few other things on here. 37 02:02.000 --> 02:04.870 The one thing I want to do is why don't we have a default value? 38 02:04.880 --> 02:07.430 So let's set its value attribute to, 39 02:08.160 --> 02:08.640 I don't know, 40 02:08.640 --> 02:12.600 2025, June the first. 41 02:12.630 --> 02:13.350 How's that? 42 02:13.650 --> 02:14.670 So let's save this. 43 02:14.700 --> 02:16.200 Go to the browser and there we go. 44 02:16.230 --> 02:17.130 We refresh. 45 02:17.130 --> 02:20.220 And there is 1st of June 2025 as the default. 46 02:20.250 --> 02:24.690 The other thing we can do here is we can introduce another attribute called step. 47 02:24.690 --> 02:30.720 And just so you know, step is expressed as days. 48 02:30.870 --> 02:31.110 Okay. 49 02:31.110 --> 02:38.610 So if we say we don't want the user to be able to select every single day between 2025 and 2030, 50 02:38.640 --> 02:42.270 we might say, hey, listen, every ten days, just give us ten day increments. 51 02:42.270 --> 02:45.450 Maybe ... well maybe we should do every seven, 52 02:45.450 --> 02:48.900 then we can just say it's, you know, it's every Monday or every Tuesday of the week. 53 02:48.900 --> 02:51.240 But let's just assign here an example of 10, 54 02:51.270 --> 02:51.590 okay. 55 02:51.600 --> 02:52.800 Just keep it simple. 56 02:52.800 --> 02:56.400 So we want the date to increment by 10 days. 57 02:56.400 --> 03:03.210 So if we now go to our browser and we refresh and we open this widget, you can see now that every 10 58 03:03.210 --> 03:06.000 days the user is allowed to select a value. 59 03:06.030 --> 03:07.840 I don't know, I just wanted to show you this. 60 03:07.840 --> 03:08.890 This is how you can use it. 61 03:08.920 --> 03:12.240 Min, max, step value, etc etc. 62 03:12.400 --> 03:15.550 This is the default styling applied by Chrome. 63 03:15.550 --> 03:20.170 It will differ across different browsers, but at least you know kind of how it works now. 64 03:20.170 --> 03:20.740 Right? 65 03:20.770 --> 03:21.580 Let's move on.