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
```
