2018-09-30 23:01:58 +01:00
---
id: 587d778b367417b2b2512aa8
title: Add an Accessible Date Picker
challengeType: 0
2019-04-10 12:23:12 -04:00
videoUrl: 'https://scrimba.com/c/cR3bRbCV'
2019-08-05 09:17:33 -07:00
forumTopicId: 301008
2021-01-13 03:31:00 +01:00
dashedName: add-an-accessible-date-picker
2018-09-30 23:01:58 +01:00
---
2020-11-27 19:02:05 +01:00
# --description--
2021-02-01 11:56:07 -08:00
Forms often include the `input` field, which can be used to create several different form controls. The `type` attribute on this element indicates what kind of `input` element will be created.
2020-11-27 19:02:05 +01:00
You may have noticed the `text` and `submit` input types in prior challenges, and HTML5 introduced an option to specify a `date` field. Depending on browser support, a date picker shows up in the `input` field when it's in focus, which makes filling in a form easier for all users.
2021-02-01 11:56:07 -08:00
For older browsers, the type will default to `text` , so it helps to show users the expected date format in the `label` or `placeholder` text just in case.
2020-11-27 19:02:05 +01:00
2018-09-30 23:01:58 +01:00
Here's an example:
2019-05-14 01:11:58 -07:00
```html
<label for="input1">Enter a date:</label>
<input type="date" id="input1" name="input1">
```
2020-11-27 19:02:05 +01:00
# --instructions--
2018-09-30 23:01:58 +01:00
2021-02-01 11:56:07 -08:00
Camper Cat is setting up a Mortal Kombat tournament and wants to ask his competitors to see what date works best. Add an `input` tag with a `type` attribute of `date` , an `id` attribute of `pickdate` , and a `name` attribute of `date` .
2018-09-30 23:01:58 +01:00
2020-11-27 19:02:05 +01:00
# --hints--
2018-09-30 23:01:58 +01:00
2020-11-27 19:02:05 +01:00
Your code should add one `input` tag for the date selector field.
2018-09-30 23:01:58 +01:00
2020-11-27 19:02:05 +01:00
```js
assert($('input').length == 2);
2018-09-30 23:01:58 +01:00
```
2021-02-01 11:56:07 -08:00
Your `input` tag should have a `type` attribute with a value of `date` .
2018-09-30 23:01:58 +01:00
2020-11-27 19:02:05 +01:00
```js
assert($('input').attr('type') == 'date');
```
2018-09-30 23:01:58 +01:00
2021-02-01 11:56:07 -08:00
Your `input` tag should have an `id` attribute with a value of `pickdate` .
2020-11-27 19:02:05 +01:00
```js
assert($('input').attr('id') == 'pickdate');
```
2021-02-01 11:56:07 -08:00
Your `input` tag should have a `name` attribute with a value of `date` .
2020-11-27 19:02:05 +01:00
```js
assert($('input').attr('name') == 'date');
```
# --seed--
## --seed-contents--
2018-09-30 23:01:58 +01:00
```html
<body>
<header>
<h1>Tournaments</h1>
</header>
<main>
<section>
<h2>Mortal Kombat Tournament Survey</h2>
<form>
<p>Tell us the best date for the competition</p>
<label for="pickdate">Preferred Date:</label>
2018-10-08 01:01:53 +01:00
2020-02-27 07:20:46 -08:00
<!-- Only change code below this line -->
2018-10-08 01:01:53 +01:00
2020-02-27 07:20:46 -08:00
<!-- Only change code above this line -->
2018-10-08 01:01:53 +01:00
2018-09-30 23:01:58 +01:00
<input type="submit" name="submit" value="Submit">
</form>
</section>
</main>
<footer>© 2018 Camper Cat</footer>
</body>
```
2020-11-27 19:02:05 +01:00
# --solutions--
2018-09-30 23:01:58 +01:00
2019-02-17 20:25:41 -05:00
```html
<body>
<header>
<h1>Tournaments</h1>
</header>
<main>
<section>
<h2>Mortal Kombat Tournament Survey</h2>
<form>
<p>Tell us the best date for the competition</p>
<label for="pickdate">Preferred Date:</label>
<input type="date" id="pickdate" name="date">
<input type="submit" name="submit" value="Submit">
</form>
</section>
</main>
<footer>© 2018 Camper Cat</footer>
</body>
2018-09-30 23:01:58 +01:00
```
