javascript - ejemplos - datepicker php

Método para mostrar datepicker nativo en Chrome

Question

Yo uso <input type="date"> campos que se adaptan a jQuery cuando el navegador no tiene soporte para el campo. Recientemente, Chrome comenzó a ofrecer un selector de fecha nativo, lo cual es genial. Pero he encontrado que muchos usuarios pierden la pequeña flecha que abre el calendario y, por lo tanto, se olvidan del hecho de que hay un calendario fácil para la selección de la fecha.

Para hacer esto más intuitivo, sería fantástico si pudiera mostrar la interfaz de usuario nativa del selector de fecha cuando el usuario mueva el foco a la entrada o haga clic en otro elemento (como un pequeño icono de calendario).

¿Hay algún método que pueda usar en Chrome para activar la interfaz de usuario del selector de fecha?

Answer 1

Aquí hay una manera de activar el selector de fecha cuando los usuarios hacen clic en el campo, porque los usuarios analfabetos de computadoras no saben dónde deben hacer clic:

input[type="date"] {
    position: relative;
}

/* create a new arrow, because we are going to mess up the native one
see "List of symbols" below if you want another, you could also try to add a font-awesome icon.. */
input[type="date"]:after {
    content: "/25BC"; 
    color: #555;
    padding: 0 5px;
}

/* change color of symbol on hover */
input[type="date"]:hover:after {
    color: #bf1400;
}

/* make the native arrow invisible and stretch it over the whole field so you can click anywhere in the input field to trigger the native datepicker*/
input[type="date"]::-webkit-calendar-picker-indicator {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: auto;
    height: auto;
    color: transparent;
    background: transparent;
}

/* adjust increase/decrease button */
input[type="date"]::-webkit-inner-spin-button {
    z-index: 1;
}

 /* adjust clear button */
 input[type="date"]::-webkit-clear-button {
     z-index: 1;
 }

<input type="date">

Campo de golf:

• Lista de simbolos
• Ejemplo de codepen con el icono de fuente impresionante

Answer 2

Conseguí la solución de cinatic trabajando en Chrome gracias al truco de Andy , y agregué una muestra de estilo flotante.

div {
  position: relative;
}
input {
  position: absolute;
  opacity: 0;
}
input::-webkit-calendar-picker-indicator {
  position: absolute;
  width: 100%;
  height: 100%;
  opacity: 0;
}
input:hover + button {
  background-color: silver;
}

<div>
  <input type="date">
  <button id="calendar_text">Search Date 📅</button>
</div>

¡Tener cuidado! Este estilo puede desencadenar recuerdos desagradables, úselo bajo su propio riesgo.

El truco de Andy : expande la flecha del selector de fecha de Chrome a través de la entrada

La solución de cinatic : oculta la entrada sobre otro elemento.

Answer 3

Creo que la gente muy a menudo quiere usar otro icono o elemento para abrir el cuadro nativo del selector de fechas.

Me di cuenta de que la solución de javascript con "click () & .focus ()" solo funciona en el kit web y en otros navegadores de escritorio, pero desafortunadamente no en Firefox .

Pero es posible de otra manera, superponiendo el campo de entrada sobre el elemento del icono (o lo que quiera usar) y lo hace invencible por la opacidad 0.

Esto funciona realmente bien en dispositivos móviles , para dispositivos de escritorio le sugeriría que agregue el evento onclick como reserva "$ (''. DateInpuBox''). Click (). Focus ()"

    .myBeautifulIcon {
      position: relative;
      width: 50px;
    }
    .dateInputBox {
      position: absolute;
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
      opacity: 0;
    }

<div class="myBeautifulIcon">
  ICON
  <input class="dateInputBox" type="date" />
</div>

Answer 4

El truco es disparar F4 KeyboardEvent en el elemento de entrada:

function openPicker(inputDateElem) {
    var ev = document.createEvent(''KeyboardEvent'');
    ev.initKeyboardEvent(''keydown'', true, true, document.defaultView, ''F4'', 0);
    inputDateElem.dispatchEvent(ev);
}

var cal = document.querySelector(''#cal'');
cal.focus();
openPicker(cal);

Aquí está jsfiddle: http://jsfiddle.net/v2d0vzrr/

Por cierto, hay un error interesante en Chrome. Si abre jsfiddle en una pestaña separada, la ventana emergente del calendario se mostrará en la pestaña actual. Ya se ha reported .

Answer 5

No creo que puedas activar el control de calendario nativo para mostrar, pero podrías resaltarlo un poco más:

input[type="date"]:hover::-webkit-calendar-picker-indicator {
  color: red;
}
input[type="date"]:hover:after {
  content: " Date Picker ";
  color: #555;
  padding-right: 5px;
}
input[type="date"]::-webkit-inner-spin-button {
  /* display: none; <- Crashes Chrome on hover */
  -webkit-appearance: none;
  margin: 0;
}

<input type="date" />

Puede, como es, evitar que se muestre, por ejemplo, desde los documentos:

Puede deshabilitar el selector de calendario nativo mediante el siguiente código:

<style>
::-webkit-calendar-picker-indicator {
    display: none;
}
</style>
<input type=date id=dateInput>
<script>
dateInput.addEventListener(''keydown'', function(event) {
    if (event.keyIdentifier == "Down") {
        event.preventDefault()
    }
}, false);
</script>

Aquí está la documentación de Webkit, donde obtuve lo anterior:

http://trac.webkit.org/wiki/Styling%20Form%20Controls

Tal vez eso pueda ser torqueado y hecho para mostrar el selector de fecha, pero pregúntese si desea que cada control de calendario salga cada vez que pase el mouse por una página.

Esta respuesta también fue útil:

https://.com/a/15107073/451969

Answer 6

Para computadoras de escritorio (y dispositivos móviles), coloque la entrada en un div con una posición relativa y un icono, con la entrada con el siguiente estilo:

input {
  position: absolute;
  opacity: 0;

  &::-webkit-calendar-picker-indicator {
    position: absolute;
    width: 100%;
  }
}

Esto extiende el indicador del selector sobre la división principal para que siempre muestre el control de fecha cuando toca el ícono o el texto de la división principal.