unslug es: move

1 files changed, 567 insertions, 0 deletions

diff --git a/files/es/web/html/element/input/date/index.html b/files/es/web/html/element/input/date/index.html
new file mode 100644
index 0000000000..a1c36c5530
--- /dev/null
+++ b/files/es/web/html/element/input/date/index.html
@@ -0,0 +1,567 @@
+---
+title: <input type="date">
+slug: Web/HTML/Elemento/input/date
+tags:
+  - Elemento
+  - Fecha
+  - Formulários HTML
+  - Inputs en formularios
+  - tipo Input
+translation_of: Web/HTML/Element/input/date
+---
+<p>{{HTMLRef}}</p>
+
+<p>Los elementos de <span class="seoSummary">{{htmlelement("input")}} del tipo <strong><code>date</code></strong> crean campos de entrada que permiten a los usuarios proporcionar una fecha, bien a través de un cuadro de texto que valida automáticamente el contenido, o bien mediante una interfaz especial de selección de fechas.</span> El valor resultante incluye el año, el mes y el día, pero no la hora. Los tipos de entrada <a href="/en-US/docs/Web/HTML/Element/input/time">time</a> y <code><a href="/en-US/docs/Web/HTML/Element/input/datetime-local">datetime-local</a></code> admiten entradas de hora y de hora y fecha.</p>
+
+<div>{{EmbedInteractiveExample("pages/tabbed/input-date.html", "tabbed-shorter")}}</div>
+
+<div class="hidden">The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> and send us a pull request.</div>
+
+<p>La IU del control varía en función del navegador. Por el momento, la compatibilidad es dispersa; consulte {{anch("Compatibilidad entre navegadores")}} para obtener más detalles. En los navegadores no compatibles, el control se degrada sin problemas a un sencillo <code><a href="/en-US/docs/Web/HTML/Element/input/text">&lt;input type="text"&gt;.</a></code></p>
+
+<pre>&lt;input id="date" type="date"&gt;</pre>
+
+<div>{{EmbedInteractiveExample("pages/tabbed/input-date.html", "tabbed-shorter")}}</div>
+
+<p>Entre los navegadores que admiten una interfaz personalizada para seleccionar fechas se encuentran Chrome y Opera, cuyo control luce así:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/14909/date-picker-chrome.png"></p>
+
+<p>El control de fecha de Edge luce así:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/14911/date-picker-edge.png"></p>
+
+<p>El control de Firefox luce así:</p>
+
+<p><img alt="Datepicker UI in firefox" src="https://mdn.mozillademos.org/files/15644/firefox_datepicker.png"></p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <td><strong>{{anch("Valor")}}</strong></td>
+   <td>Una {{domxref("DOMString")}} que representa una fecha en el formato AAAA-MM-DD, o nada</td>
+  </tr>
+  <tr>
+   <td><strong>Eventos</strong></td>
+   <td>{{event("change")}} e {{event("input")}}</td>
+  </tr>
+  <tr>
+   <td><strong>Atributos comunes admitidos</strong></td>
+   <td>{{htmlattrxref("autocomplete", "input")}}, {{htmlattrxref("list", "input")}}, {{htmlattrxref("readonly", "input")}} y {{htmlattrxref("step", "input")}}</td>
+  </tr>
+  <tr>
+   <td><strong>Atributos IDL</strong></td>
+   <td><code>list</code>, <code>value</code>, <code>valueAsDate</code>, <code>valueAsNumber</code>.</td>
+  </tr>
+  <tr>
+   <td><strong>Métodos</strong></td>
+   <td>{{domxref("HTMLInputElement.select", "select()")}}, {{domxref("HTMLInputElement.stepDown", "stepDown()")}}, {{domxref("HTMLInputElement.stepUp", "stepUp()")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Valor">Valor</h2>
+
+<p>Una {{domxref("DOMString")}} que representa el valor de la fecha proporcionada en la entrada. Es posible establecer un valor predeterminado para la entrada al incluir una fecha en el atributo {{htmlattrxref("value", "input")}}, de esta manera:</p>
+
+<pre>&lt;input id="date" type="date" value="2017-06-01"&gt;</pre>
+
+<p>{{EmbedLiveSample('Value', 600, 40)}}</p>
+
+<p>Cabe destacar que el formato de fecha mostrado difiere del <code>value</code> en sí: el formato de fecha mostrado se escogerá en función de la configuración regional del navegador del usuario, aunque el <code>value</code> de fecha siempre se formatee como <code>aaaa-mm-dd</code>.</p>
+
+<p>Es posible asimismo recuperar y establecer el valor de fecha en JavaScript mediante la propiedad {{domxref("HTMLInputElement.value", "value")}} del elemento de entrada; por ejemplo:</p>
+
+<pre>var dateControl = document.querySelector('input[type="date"]');
+dateControl.value = '2017-06-01';</pre>
+
+<p>Este código localiza el primer elemento {{HTMLElement("input")}} cuyo <code>type</code> sea <code>date</code> y define su valor a la fecha 2017-06-01 (1 de junio de 2017).</p>
+
+<h2 id="Atributos_adicionales">Atributos adicionales</h2>
+
+<p>Tenemos atributos adicionales tales como:</p>
+
+<p>{{page("/en-US/docs/Web/HTML/Element/input/number", "step-include")}}</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Attribute</th>
+   <th scope="col">Description</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>{{anch("max")}}</code></td>
+   <td>La fecha máxima aceptada.</td>
+  </tr>
+  <tr>
+   <td><code>{{anch("min")}}</code></td>
+   <td>La fecha minima aceptada.</td>
+  </tr>
+  <tr>
+   <td><code>{{anch("step")}}</code></td>
+   <td>El intervalo a usar, como cuando das click en las flechas, de cuanto en cuanto va avanzar o retroceder.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="htmlattrdef(max)">{{htmlattrdef("max")}}</h3>
+
+<p>La ultima fecha a aceptar. Si el{{htmlattrxref("value", "input")}} ingresado en el elemento esta después de esta fecha, el elemento cae <a href="/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation">constraint validation</a>. Si el valor del <code>max</code> no es un valor valido, sigue el formato <code>yyyy-MM-dd</code>, donde el elemento no tiene máximo valor.</p>
+
+<p>Este valor debe ser especificado mayor o igual especificado por <code>min</code> attribute.</p>
+
+<h3 id="htmlattrdef(min)">{{htmlattrdef("min")}}</h3>
+
+<p>La minima fecha aceptada; Una fecha menor que esta caera <a href="/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation">constraint validation</a>. Si el valor es <code>min</code> el atributo no es valido y esa el formato <code>yyyy-MM-dd</code>, entonces el elemento no tiene valor minimo.</p>
+
+<p>Este valor debe especificarse como menor o igual<code>max</code> attribute.</p>
+
+
+
+
+
+
+
+
+
+
+
+
+
+<h3 id="htmlattrdef(step)">{{htmlattrdef("step")}}</h3>
+
+<p>{{page("/en-US/docs/Web/HTML/Element/input/number", "step-include")}}</p>
+
+<p>Para <code>date</code> input, el valor de <code>step</code> se da en dias, con una escala en factor de 86,400,000 (desde el valor numerico en millisegundos). El valor por defecto es <code>step</code> 1, indicando de un día a día.</p>
+
+<div class="blockIndicator note">
+<p>Specifying <code>any</code> as a value for the <code>step</code> attribute makes the same effect as it were equal to <code>1</code> for <code>date</code> inputs.</p>
+</div>
+
+<h2 id="Uso_de_las_entradas_de_fecha">Uso de las entradas de fecha</h2>
+
+<p>Las entradas de fecha suenan prácticas en un primer vistazo, ya que proveen una IU fácil de usar para seleccionar fechas y normalizan el formato de datos que se envía al servidor, sin importar la configuración regional del usuario. Sin embargo, existen problemas con <code>&lt;input type="date"&gt;</code> a causa de la compatibilidad limitada entre navegadores.</p>
+
+<p>Estudiaremos usos básicos y complejos de <code>&lt;input type="date"&gt;</code> y, posteriormente, brindaremos consejos para mitigar el problema de compatibilidad entre navegadores (consulte {{anch("Manejo de compatibilidad entre navegadores")}}). Evidentemente, con el tiempo es esperable que la compatibilidad entre navegadores se amplíe, lo que hará desaparecer este problema.</p>
+
+<h3 id="Usos_básicos_de_date">Usos básicos de <code>date</code></h3>
+
+<p>El uso más sencillo de <code>&lt;input type="date"&gt;</code> supone una combinación de un <code>&lt;input&gt;</code> básico y el elemento {{htmlelement("label")}}, como se indica a continuación:</p>
+
+<pre>&lt;form&gt;
+  &lt;div&gt;
+    &lt;label for="bday"&gt;Escriba su cumpleaños:&lt;/label&gt;
+    &lt;input type="date" id="bday" name="bday"&gt;
+  &lt;/div&gt;
+&lt;/form&gt;</pre>
+
+<p>{{EmbedLiveSample('Basic_uses_of_date', 600, 40)}}</p>
+
+<h3 id="Definir_los_límites_superior_e_inferior_de_la_fecha">Definir los límites superior e inferior de la fecha</h3>
+
+<p>Puede utilizar los atributos {{htmlattrxref("min", "input")}} y {{htmlattrxref("max", "input")}} para restringir las fechas que el usuario puede seleccionar. En el ejemplo siguiente, definiremos como la fecha mínima <code>2017-04-01</code> y <code>2017-04-30</code> como la fecha máxima:</p>
+
+<pre>&lt;form&gt;
+  &lt;div&gt;
+    &lt;label for="party"&gt;Elija la fecha de festejo que prefiera:&lt;/label&gt;
+    &lt;input type="date" id="party" name="party" min="2017-04-01" max="2017-04-30"&gt;
+  &lt;/div&gt;
+&lt;/form&gt;</pre>
+
+<p>{{EmbedLiveSample('Setting_maximum_and_minimum_dates', 600, 40)}}</p>
+
+<p>Como resultado, solo es posible seleccionar los días del mes de abril de 2017; solo la parte de los días del valor de texto es modificable, y no se puede desplazar a ninguna fecha que caiga fuera de abril en la interfaz de selección de fechas.</p>
+
+<p><strong>Nota</strong>: debería ser capaz de utilizar el atributo {{htmlattrxref("step", "input")}} para variar el número de días que se recorren con cada incremento de fecha (p. ej., puede que desee que solo se puedan seleccionar los sábados). No obstante, esto no parece funcionar en ninguna implementación en el momento en que se redactó esta página.</p>
+
+<h3 id="Controlar_el_tamaño_de_la_entrada">Controlar el tamaño de la entrada</h3>
+
+<p><code>&lt;input type="date"&gt;</code> no admite los atributos de dimensionamiento de formularios como {{htmlattrxref("size", "input")}}. Deberá recurrir al <a href="/en-US/docs/Web/CSS">CSS</a> para satisfacer sus necesidades de dimensionamiento.</p>
+
+<h2 id="Validación">Validación</h2>
+
+<p>De manera predeterminada, <code>&lt;input type="date"&gt;</code> no aplica a ninguna validación a los valores introducidos. Las implementaciones de IU generalmente no le permiten escribir algo que no sea una fecha (lo cual es útil) pero aun así podrá dejar el campo vacío o incluso (en los navegadores que recurren al tipo <code>text</code>) escribir una fecha no válida (p. ej., el 32 de abril).</p>
+
+<p>Si utiliza {{htmlattrxref("min", "input")}} y {{htmlattrxref("max", "input")}} para restringir las fechas disponibles (consulte {{anch("Definir los límites superior e inferior de la fecha")}}), los navegadores compatibles mostrarán un error si intenta enviar una fecha que se salga de los límites impuestos. No obstante, tendrá que comprobar los resultados para cerciorarse de que el valor esté dentro de los límites, ya que esta condición solo se hace cumplir si el dispositivo del usuario incluye compatibilidad completa con el selector de fecha.</p>
+
+<p>Además, puede emplear el atributo {{htmlattrxref("required", "input")}} para que proporcionar la fecha sea obligatorio: de nuevo, se mostrará un error si intenta enviar un campo de fecha vacío. Esto, cuando menos, debería funcionar en la mayoría de los navegadores.</p>
+
+<p>Estudie este ejemplo. Aquí hemos establecido las fechas mínima y máxima y convertimos el campo en obligatorio:</p>
+
+<pre>&lt;form&gt;
+  &lt;div&gt;
+    &lt;label for="party"&gt;Elija la fecha de festejo que prefiera (obligatorio, del 1.º al 20 de abril):&lt;/label&gt;
+    &lt;input type="date" id="party" name="party" min="2017-04-01" max="2017-04-20" required&gt;
+    &lt;span class="validity"&gt;&lt;/span&gt;
+  &lt;/div&gt;
+  &lt;div&gt;
+    &lt;input type="submit"&gt;
+  &lt;/div&gt;
+&lt;/form&gt;</pre>
+
+<p>Si intenta enviar el formulario sin una fecha (o con una fecha fuera de los límites definidos), el navegador muestra un error. Pruebe a manipular el ejemplo:</p>
+
+<p>{{EmbedLiveSample('Validation', 600, 100)}}</p>
+
+<p>Esta captura de pantalla ayudará a aquellos que no utilicen un navegador compatible:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/14913/date-picker-chrome-error-message.png"></p>
+
+<p>Aqui un codigo CSS usado en el siguiente ejemplo. Donde se hace uso de {{cssxref(":valid")}} e {{cssxref(":invalid")}} Las propiedades en el estilo del "input" según el valor actual es o no valido. Se ponen iconos sobre el {{htmlelement("span")}} al costado del input, no en el mismo cuadro del input, porque en Chrome el contenido generado se remplaza dentro del formulario de control, y este no puede ser personalizado o no se mostraria efectivamente.</p>
+
+<pre>div {
+    margin-bottom: 10px;
+    display: flex;
+    align-items: center;
+}
+
+label {
+  display: inline-block;
+  width: 300px;
+}
+
+input:invalid+span:after {
+    content: '✖';
+    padding-left: 5px;
+}
+
+input:valid+span:after {
+    content: '✓';
+    padding-left: 5px;
+}</pre>
+
+<div class="blockIndicator warning">
+<p><strong>Importante</strong>: El formulario de validación en HTML  no es un sustituto para los scripts que se aseguran que los datos esten ingresados en la forma correcta. Esto es demasiado facil para alguien que realiza ajustes en HTML que le permite pasar la validación, o quitarla de lleno. Es tambien posible para alguien simplificar el proceso de paso del formulario HTML enteramente y pasar la fecha directamente al servidor. Pero si en el lado de tu servidor fallase la validación al recibir la fecha, podria ocurrir un desastre cuando se envien los datos en el formato incorrecto (que la fecha sea muy larga, del tipo incorrecto, entre otras cosas más).</p>
+</div>
+
+<h2 id="Manejo_de_compatibilidad_entre_navegadores">Manejo de compatibilidad entre navegadores</h2>
+
+<p>Como ya se menciono, el mayor problema al usar el "input" tipo date, es al momento de usar un <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/date#Browser_compatibility">navegador compatible</a>. Ejemplo, el date picker en Firefox para Android luciria de la siguiente manera:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/14915/date-picker-fxa.png"></p>
+
+<p>Pero los navegadores que no soportan lo remplazarian como un input del tipo texto, esto crea problemas en terminos de consistencia en relacion a la interfaz del usuario (El presente control seria diferente), y el manejo de datos también.</p>
+
+<p>El segundo problema es más serio; como ya se menciono, con un input tipo date, el valor actual siempre se normaliza en el siguiente formato <code>yyyy-mm-dd</code>. Con un input tipo texto, por default el navegador no reconoce el formato en el que deberia estar, y hay muchisimas formas en las que las personas escriben el formato de fecha, Por ejemplo:</p>
+
+<ul>
+ <li><code>ddmmyyyy</code></li>
+ <li><code>dd/mm/yyyy</code></li>
+ <li><code>mm/dd/yyyy</code></li>
+ <li><code>dd-mm-yyyy</code></li>
+ <li><code>mm-dd-yyyy</code></li>
+ <li><code>Month dd yyyy</code></li>
+</ul>
+
+<p>Una forma de evitar esto es usar un {{htmlattrxref("pattern", "input")}}, atributo que se pone en un input tipo date. A pesar de que la entrada tipo date no se usa, el input  tipo text si lo hará, gracias a este {{htmlattrxref("pattern", "input")}}.Mira el siguiente ejemplo en un navegador que no soporta entradas de tipo date:</p>
+
+<pre>&lt;form&gt;
+  &lt;div&gt;
+    &lt;label for="bday"&gt;Enter your birthday:&lt;/label&gt;
+    &lt;input type="date" id="bday" name="bday" required pattern="[0-9]{4}-[0-9]{2}-[0-9]{2}"&gt;
+    &lt;span class="validity"&gt;&lt;/span&gt;
+  &lt;/div&gt;
+  &lt;div&gt;
+    &lt;input type="submit"&gt;
+  &lt;/div&gt;
+&lt;/form&gt;</pre>
+
+<p>{{EmbedLiveSample('Handling_browser_support', 600, 100)}}</p>
+
+<p>Si Ud. trata de enviar la fecha, verá que el navegador no despliega un mensaje de error (y considera el valor del input como valido) Si tu entrada en el input no concuerda con el patron establecido <code>nnnn-nn-nn</code>, donde <code>n</code> es un numero del 0 al 9. De seguro, que esto no frenara a las personas de ingresar valores incorrectos de tipo fecha, o formatos incorrectos, como <code>yyyy-dd-mm</code> (mientras que nosotros necesitamos: <code>yyyy-mm-dd</code>). por lo que aún seria un problema...</p>
+
+<pre>div {
+  margin-bottom: 10px;
+}
+
+input:invalid + span {
+  position: relative;
+}
+
+input:invalid + span:after {
+  content: '✖';
+  position: absolute;
+  right: -18px;
+}
+
+input:valid + span {
+  position: relative;
+}
+
+input:valid + span:after {
+  content: '✓';
+  position: absolute;
+  right: -18px;
+}</pre>
+
+<p>La mejor forma de lidiar con fechas en formularios en un navegador cruzado, es pedir al usuario que ingrese el mes, el año y el dia en inputs separados o en formatos de control separados, ({{htmlelement("select")}} elementos que se han hecho populares; Mira abajo para ver la implementación), o usa una libreria de JavaScript como <a href="https://jqueryui.com/datepicker/">jQuery date picker</a>.</p>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<p>En este ejemplo creamos dos sets de elementos tipo UI para elegir fechas: uno nativo <code>&lt;input type="date"&gt;</code> y otro en un conjunto de tres {{htmlelement("select")}} elementos para elegir la fecha en navegadores antiguos que no soportan un input nativo.</p>
+
+<p>{{EmbedLiveSample('Examples', 600, 100)}}</p>
+
+<h3 id="HTML">HTML</h3>
+
+<p>El codigo HTML se ve como:</p>
+
+<pre>&lt;form&gt;
+    &lt;div class="nativeDatePicker"&gt;
+      &lt;label for="bday"&gt;Enter your birthday:&lt;/label&gt;
+      &lt;input type="date" id="bday" name="bday"&gt;
+      &lt;span class="validity"&gt;&lt;/span&gt;
+    &lt;/div&gt;
+    &lt;p class="fallbackLabel"&gt;Enter your birthday:&lt;/p&gt;
+    &lt;div class="fallbackDatePicker"&gt;
+      &lt;span&gt;
+        &lt;label for="day"&gt;Day:&lt;/label&gt;
+        &lt;select id="day" name="day"&gt;
+        &lt;/select&gt;
+      &lt;/span&gt;
+      &lt;span&gt;
+        &lt;label for="month"&gt;Month:&lt;/label&gt;
+        &lt;select id="month" name="month"&gt;
+          &lt;option selected&gt;January&lt;/option&gt;
+          &lt;option&gt;February&lt;/option&gt;
+          &lt;option&gt;March&lt;/option&gt;
+          &lt;option&gt;April&lt;/option&gt;
+          &lt;option&gt;May&lt;/option&gt;
+          &lt;option&gt;June&lt;/option&gt;
+          &lt;option&gt;July&lt;/option&gt;
+          &lt;option&gt;August&lt;/option&gt;
+          &lt;option&gt;September&lt;/option&gt;
+          &lt;option&gt;October&lt;/option&gt;
+          &lt;option&gt;November&lt;/option&gt;
+          &lt;option&gt;December&lt;/option&gt;
+        &lt;/select&gt;
+      &lt;/span&gt;
+      &lt;span&gt;
+        &lt;label for="year"&gt;Year:&lt;/label&gt;
+        &lt;select id="year" name="year"&gt;
+        &lt;/select&gt;
+      &lt;/span&gt;
+    &lt;/div&gt;
+&lt;/form&gt;</pre>
+
+<p>Los meses son codificados (como son siempre), mientras que el dia y el año son generados dinamicamente dependiendo del mes y el año seleccionado,  y el presente año (mira el codigo comentado para ver los detalles de la explicacion y como este funciona.)</p>
+
+<pre>input:invalid+span:after {
+  content: '✖';
+  padding-left: 5px;
+}
+
+input:valid+span:after {
+  content: '✓';
+  padding-left: 5px;
+}</pre>
+
+<h3 id="JavaScript">JavaScript</h3>
+
+<p>La otra parte del codigo que podria ser interesante es una caracteristica de detección de codigo— para detectar si el navegador soporta o no <code>&lt;input type="date"&gt;</code>, creamos un nuevo {{htmlelement("input")}}, seteado de <code>type</code> a <code>date</code>, inmediatamente verifica a que tipo corresponde— para navegadores que no soportan retornara un tipo <code>text</code>, porque el tipo <code>date</code> se volveria en tipo <code>text</code>. Si <code>&lt;input type="date"&gt;</code> no es soportado, escondemos el control nativo (datepicker nativo) y mostramos el selector tipo UI ({{htmlelement("select")}}) en vez de este.</p>
+
+<pre class="brush: js">// define variables
+var nativePicker = document.querySelector('.nativeDatePicker');
+var fallbackPicker = document.querySelector('.fallbackDatePicker');
+var fallbackLabel = document.querySelector('.fallbackLabel');
+
+var yearSelect = document.querySelector('#year');
+var monthSelect = document.querySelector('#month');
+var daySelect = document.querySelector('#day');
+
+// hide fallback initially
+fallbackPicker.style.display = 'none';
+fallbackLabel.style.display = 'none';
+
+// test whether a new date input falls back to a text input or not
+var test = document.createElement('input');
+test.type = 'date';
+
+// if it does, run the code inside the if() {} block
+if(test.type === 'text') {
+  // hide the native picker and show the fallback
+  nativePicker.style.display = 'none';
+  fallbackPicker.style.display = 'block';
+  fallbackLabel.style.display = 'block';
+
+  // populate the days and years dynamically
+  // (the months are always the same, therefore hardcoded)
+  populateDays(monthSelect.value);
+  populateYears();
+}
+
+function populateDays(month) {
+  // delete the current set of &lt;option&gt; elements out of the
+  // day &lt;select&gt;, ready for the next set to be injected
+  while(daySelect.firstChild){
+    daySelect.removeChild(daySelect.firstChild);
+  }
+
+  // Create variable to hold new number of days to inject
+  var dayNum;
+
+  // 31 or 30 days?
+  if(month === 'January' || month === 'March' || month === 'May' || month === 'July' || month === 'August' || month === 'October' || month === 'December') {
+    dayNum = 31;
+  } else if(month === 'April' || month === 'June' || month === 'September' || month === 'November') {
+    dayNum = 30;
+  } else {
+  // If month is February, calculate whether it is a leap year or not
+    var year = yearSelect.value;
+    (year - 2016) % 4 === 0 ? dayNum = 29 : dayNum = 28;
+  }
+
+  // inject the right number of new &lt;option&gt; elements into the day &lt;select&gt;
+  for(i = 1; i &lt;= dayNum; i++) {
+    var option = document.createElement('option');
+    option.textContent = i;
+    daySelect.appendChild(option);
+  }
+
+  // if previous day has already been set, set daySelect's value
+  // to that day, to avoid the day jumping back to 1 when you
+  // change the year
+  if(previousDay) {
+    daySelect.value = previousDay;
+
+    // If the previous day was set to a high number, say 31, and then
+    // you chose a month with less total days in it (e.g. February),
+    // this part of the code ensures that the highest day available
+    // is selected, rather than showing a blank daySelect
+    if(daySelect.value === "") {
+      daySelect.value = previousDay - 1;
+    }
+
+    if(daySelect.value === "") {
+      daySelect.value = previousDay - 2;
+    }
+
+    if(daySelect.value === "") {
+      daySelect.value = previousDay - 3;
+    }
+  }
+}
+
+function populateYears() {
+  // get this year as a number
+  var date = new Date();
+  var year = date.getFullYear();
+
+  // Make this year, and the 100 years before it available in the year &lt;select&gt;
+  for(var i = 0; i &lt;= 100; i++) {
+    var option = document.createElement('option');
+    option.textContent = year-i;
+    yearSelect.appendChild(option);
+  }
+}
+
+// when the month or year &lt;select&gt; values are changed, rerun populateDays()
+// in case the change affected the number of available days
+yearSelect.onchange = function() {
+  populateDays(monthSelect.value);
+}
+
+monthSelect.onchange = function() {
+  populateDays(monthSelect.value);
+}
+
+//preserve day selection
+var previousDay;
+
+// update what day has been set to previously
+// see end of populateDays() for usage
+daySelect.onchange = function() {
+  previousDay = daySelect.value;
+}</pre>
+
+<div class="blockIndicator note">
+<p><strong>Nota</strong>: Recuerda que algunos años tienen 53 semanas (año bisiesto) (Mira <a href="https://en.wikipedia.org/wiki/ISO_week_date#Weeks_per_year">Semanas por año</a>)! Tendras que tener esto en consideración cuando desarrolles apps o funciones.</p>
+</div>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table>
+ <thead>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentarios</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'forms.html#date-state-(type=date)', '&lt;input type="date"&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'forms.html#date-state-(type=date)', '&lt;input type="date"&gt;')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_entre_navegadores">Compatibilidad entre navegadores</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<table>
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>20</td>
+   <td>12</td>
+   <td>{{CompatGeckoDesktop(57)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>10.62</td>
+   <td>{{CompatNo}}<sup>[1]</sup></td>
+  </tr>
+ </tbody>
+</table>
+
+<table>
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile(57)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>10.62</td>
+   <td>5</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>[1] Reconoce pero no tiene UI.</p>
+
+<h2 id="Véase_también">Véase también</h2>
+
+<ul>
+ <li>The generic {{HTMLElement("input")}} element and the interface used to manipulate it, {{domxref("HTMLInputElement")}}</li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Forms/The_native_form_widgets#Date_and_time_picker">Date and Time picker tutorial</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Date_and_time_formats">Date and time formats used in HTML</a></li>
+</ul>