freeCodeCamp/curriculum/challenges/spanish/01-responsive-web-design/applied-accessibility/add-an-accessible-date-pick...

---
id: 587d778b367417b2b2512aa8
title: Add an Accessible Date Picker
challengeType: 0
videoUrl: ''
localeTitle: Añadir un selector de fecha accesible
---

## Description
<section id="description"> Los formularios a menudo incluyen el campo <code>input</code> , que se puede usar para crear varios controles de formulario diferentes. El atributo <code>type</code> en este elemento indica qué tipo de entrada se creará. Puede haber notado los tipos de entrada <code>text</code> y <code>submit</code> en desafíos anteriores, y HTML5 introdujo una opción para especificar un campo <code>date</code> . Dependiendo de la compatibilidad del navegador, aparece un selector de fecha en el campo <code>input</code> cuando se lo enfoca, lo que facilita el llenado del formulario para todos los usuarios. Para los navegadores más antiguos, se asigna por defecto el tipo <code>text</code>, de forma tal que ayude a mostrar a los usuarios el formato de fecha esperado en la etiqueta o como texto "placeholder", por si acaso. Aquí hay un ejemplo: <blockquote> &lt;label for = &quot;input1&quot;&gt; Ingrese una fecha: &lt;/label&gt; <br> &lt;input type = &quot;date&quot; id = &quot;input1&quot; name = &quot;input1&quot;&gt; <br></blockquote></section>

## Instructions
<section id="instructions"> Camper Cat está organizando un torneo de Mortal Kombat y quiere preguntar a sus competidores qué fecha resulta mas conveniente. Agregue una etiqueta de <code>input</code> con un atributo de <code>type</code> de &quot;fecha&quot;, un atributo de <code>id</code> de &quot;pickdate&quot; y un atributo de <code>name</code> de &quot;fecha&quot;. </section>

## Tests
<section id='tests'>

```yml
tests:
  - text: Su código debe agregar una etiqueta de <code>input</code> para el campo selector de fecha.
    testString: 'assert($("input").length == 2, "Your code should add one <code>input</code> tag for the date selector field.");'
  - text: Su etiqueta de <code>input</code> debe tener un atributo de <code>type</code> con un valor de fecha.
    testString: 'assert($("input").attr("type") == "date", "Your <code>input</code> tag should have a <code>type</code> attribute with a value of date.");'
  - text: Su etiqueta de <code>input</code> debe tener un atributo <code>id</code> con un valor de pickdate.
    testString: 'assert($("input").attr("id") == "pickdate", "Your <code>input</code> tag should have an <code>id</code> attribute with a value of pickdate.");'
  - text: Su etiqueta de <code>input</code> debe tener un atributo de <code>name</code> con un valor de fecha.
    testString: 'assert($("input").attr("name") == "date", "Your <code>input</code> tag should have a <code>name</code> attribute with a value of date.");'

```

</section>

## Challenge Seed
<section id='challengeSeed'>

<div id='html-seed'>

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

        <!-- Add your code below this line -->


        <!-- Add your code above this line -->

        <input type="submit" name="submit" value="Submit">
      </form>
    </section>
  </main>
  <footer>&copy; 2018 Camper Cat</footer>
</body>

```

</div>


</section>

## Solution
<section id='solution'>

```js
// solution required
```
</section>
docs: add Spanish docs 2018-10-08 17:34:43 +00:00			`---`
			`id: 587d778b367417b2b2512aa8`
			`title: Add an Accessible Date Picker`
			`challengeType: 0`
			`videoUrl: ''`
feat: add Spanish and language parser 2018-10-10 20:20:40 +00:00			`localeTitle: Añadir un selector de fecha accesible`
docs: add Spanish docs 2018-10-08 17:34:43 +00:00			`---`

			`## Description`
Improved import-a-google-font.spanish.md translation just a little bit (#22934) I made little improvements to the spanish translation. For instance, in "el campo de <code>input<code>" doesn't require the word "de". Rearranged some words positioning so that the text reads more naturally. 2019-02-08 13:01:56 +00:00			<section id="description"> Los formularios a menudo incluyen el campo <code>input</code> , que se puede usar para crear varios controles de formulario diferentes. El atributo <code>type</code> en este elemento indica qué tipo de entrada se creará. Puede haber notado los tipos de entrada <code>text</code> y <code>submit</code> en desafíos anteriores, y HTML5 introdujo una opción para especificar un campo <code>date</code> . Dependiendo de la compatibilidad del navegador, aparece un selector de fecha en el campo <code>input</code> cuando se lo enfoca, lo que facilita el llenado del formulario para todos los usuarios. Para los navegadores más antiguos, se asigna por defecto el tipo <code>text</code>, de forma tal que ayude a mostrar a los usuarios el formato de fecha esperado en la etiqueta o como texto "placeholder", por si acaso. Aquí hay un ejemplo: <blockquote> <label for = "input1"> Ingrese una fecha: </label> <br> <input type = "date" id = "input1" name = "input1"> <br></blockquote></section>
docs: add Spanish docs 2018-10-08 17:34:43 +00:00
			`## Instructions`
Improved import-a-google-font.spanish.md translation just a little bit (#22934) I made little improvements to the spanish translation. For instance, in "el campo de <code>input<code>" doesn't require the word "de". Rearranged some words positioning so that the text reads more naturally. 2019-02-08 13:01:56 +00:00			`<section id="instructions"> Camper Cat está organizando un torneo de Mortal Kombat y quiere preguntar a sus competidores qué fecha resulta mas conveniente. Agregue una etiqueta de <code>input</code> con un atributo de <code>type</code> de "fecha", un atributo de <code>id</code> de "pickdate" y un atributo de <code>name</code> de "fecha". </section>`
docs: add Spanish docs 2018-10-08 17:34:43 +00:00
			`## Tests`
			`<section id='tests'>`

			```yml
			`tests:`
			`- text: Su código debe agregar una etiqueta de <code>input</code> para el campo selector de fecha.`
			`testString: 'assert($("input").length == 2, "Your code should add one <code>input</code> tag for the date selector field.");'`
			`- text: Su etiqueta de <code>input</code> debe tener un atributo de <code>type</code> con un valor de fecha.`
			`testString: 'assert($("input").attr("type") == "date", "Your <code>input</code> tag should have a <code>type</code> attribute with a value of date.");'`
			`- text: Su etiqueta de <code>input</code> debe tener un atributo <code>id</code> con un valor de pickdate.`
			`testString: 'assert($("input").attr("id") == "pickdate", "Your <code>input</code> tag should have an <code>id</code> attribute with a value of pickdate.");'`
			`- text: Su etiqueta de <code>input</code> debe tener un atributo de <code>name</code> con un valor de fecha.`
			`testString: 'assert($("input").attr("name") == "date", "Your <code>input</code> tag should have a <code>name</code> attribute with a value of date.");'`

			```

			`</section>`

			`## Challenge Seed`
			`<section id='challengeSeed'>`

			`<div id='html-seed'>`

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

			`<!-- Add your code below this line -->`



			`<!-- Add your code above this line -->`

			`<input type="submit" name="submit" value="Submit">`
			`</form>`
			`</section>`
			`</main>`
			`<footer>© 2018 Camper Cat</footer>`
			`</body>`
feat: add Spanish and language parser 2018-10-10 20:20:40 +00:00
docs: add Spanish docs 2018-10-08 17:34:43 +00:00			```

			`</div>`



			`</section>`

			`## Solution`
			`<section id='solution'>`

			```js
			`// solution required`
			```
			`</section>`