Domanda Apri il selettore di date HTML5 sull'icona fai clic


Ho un selettore di date HTML5. Si apre quando faccio clic sulla casella di testo del selettore della data. Devo cambiare l'evento in un'icona, ma non sono sicuro di come farlo. Devo aprire il selettore di date quando faccio clic sull'icona del calendario.

Ecco il codice HTML per il mio datepicker:

   <img src="date.png" alt="Date Picker" id="datepickericon" />
<input name="calendarselect{ContactID}" class="timeselect" type="date" id="calendar">
<script>
document.getElementById("datepickericon").onclick = function(e){
console.log('inside click');
    document.getElementById("calendar").style.visibility="visible";
    // document.getElementById("calendar").focus();
    // You could write code to toggle this
}

enter image description here

Cliccando sull'icona devo ottenere la vista del calendario aperto come nell'immagine seguente enter image description here


16
2017-08-20 04:30


origine


risposte:


HTML5 <input> con type='date' funzionerà solo con a pochi browser. Inoltre, come programmatore non hai alcun controllo sul suo aspetto o su qualsiasi altro aspetto (come mostrarlo e nasconderlo) (Domande frequenti frequenti sulla data del tipo di input)

Quindi, se devi fare questo, l'HTML5 <input type='date'> il tag non è un'opzione. Dovrai usare qualcosa di compilato in JavaScript come Interfaccia utente di jQuery o bootstrap date picker.


Vecchia risposta

Devi allegare un evento al clic dell'icona. Supponendo che il tuo HTML assomigli a questo:

<img src="date.png" alt="Date Picker" id="datepickericon" />
<input name="calendarselect{ContactID}" class="timeselect" type="date" id="calendar">

Dovrai controllare per il onclick evento sull'icona e mostra o nasconde il calendario.

document.getElementById("datepickericon").onclick = function(e){
    document.getElementById("calendar").focus();
    // You could write code to toggle this
}

9
2017-08-20 04:37



Se non ti dispiace avere l'icona del calendario all'interno del campo di inserimento della data, un'alternativa cross-browser potrebbe essere quella di posizionare l'icona di un calendario sopra l'indicatore del selettore del calendario triangolare e quindi impostare l'icona del calendario su pointer-events: none che causerà il passaggio di tutti gli eventi di clic sull'indicatore di selezione calendario triangolo sottostante. Non sono del tutto sicuro di quanto sia coerente la posizione dell'indicatore di selezione calendario in browser diversi, ma dovrebbe essere abbastanza simile. Vedi l'esempio qui sotto.

.sd-container {
  position: relative;
  float: left;
}

.sd {
  border: 1px solid #1cbaa5;
  padding: 5px 10px;
  height: 30px;
  width: 150px;
}

.open-button {
  position: absolute;
  top: 10px;
  right: 3px;
  width: 25px;
  height: 25px;
  background: #fff;
  pointer-events: none;
}

.open-button button {
  border: none;
  background: transparent;
}
<form>
  <div class="sd-container">
    <input class="sd" type="date" name="selected_date" />
    <span class="open-button">
      <button type="button"></button>
    </span>
  </div>
</form>

Inoltre è possibile modificare parte dell'aspetto del campo di inserimento della data (ma non il selettore della data del calendario) in quanto è simile a un campo di immissione del testo. Inoltre, ci sono un certo numero di proprietà CSS WebKit che sono spiegate qui Esistono opzioni di stile per il selettore di date HTML5?


6
2018-06-17 11:58



Sto rispondendo, sperando che qualcuno di nuovo lo troverebbe utile: Il mio html era così:

<div class='child_dob input-group <?php echo $user->parent_type>2 ?'hidden':''?>'>
  <input type='date' class='form-control hidden' name='dob[]' value='<?php echo $dob?>'>
  <div class='form-control datedisplay'>
     <?php echo date('m/d/Y',strtotime($dob))?>
  </div>
  <input type='hidden' value='<?php echo $id?>' name='id[]'>
  <div class='input-group-addon'>
     <span class='cursor glyphicon glyphicon-remove remove_child_dob'></span>
  </div>
</div>

$(function()
{
 $(document).on('click','.datedisplay',function()
 {
    $(this).siblings('[type="date"]').removeClass('hidden').focus().click();
    $(this).remove();
 });
});

L'ho provato su simulatore di cromo così come su dispositivi Android e funziona perfettamente bene. Ha bisogno di test su dispositivi iOS però.


3
2018-05-02 05:12



puoi incollare l'elemento della data sull'icona e dare l'input opactiy: 0; e dare font-size grande quanto l'icona è alla data e poi si affliggerà


1
2017-10-30 13:26



La maggior parte, se non tutti, i browser mettono a fuoco un controllo di forma, se il corrispondente label il tag viene cliccato dall'utente. Quindi una possibile soluzione è mettere l'icona in a label tag come questo:

<label for="dateinput">Birthday:</label>
<input type="date" id="dateinput">
<label for="dateinput">
    <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAA80lEQVRIie2SzQqCQBDHe5/w1kXt1qUFo6NP1Melp8geIvxgyzbJoIJ6gQ1SA6V6AJ1OG0SsaQkWOPCHPfxmf8wwtVoZZcyXKx0TJwe/0TFZZxaYtgOm7UDhvD8aDD0VxazBV5qZwnhPbcfeqNfnCk4qSiiSHg0USW8/p0h84k8qSvgTKE04tBpgTjSwNA0OrcZbAePN8fjBpwookmAhC0BkAY5IzDDBK58qKCJcARbrUES4gvB6gyJSvoCd3Sfv3xBUK6pW9LngHEZfrycII77A3e1vwReSIIzA3e4vXIFuka4xW57ZyHljYBJMsd3hCv6y7o9Nby8uLYYvAAAAAElFTkSuQmCC" style="vertical-align: middle;" alt="Calendar" title="Set focus on birthday field">
</label>

Alcune cose da notare però:

  • Il label il tag viene anche utilizzato per connettere la descrizione di un controllo del modulo al controllo del modulo stesso, quindi le tecnologie di supporto (ad esempio screen reader) possono comunicare all'utente, quale controllo del modulo hanno selezionato. Quindi abusando del label il tag solo per visualizzare un'icona è probabilmente scoraggiato. Quindi l'uso di due label tag che sono entrambi collegati allo stesso controllo del modulo, uno che lo descrive, l'altro per l'icona del calendario.
  • Questa soluzione focalizza il campo della data come se l'utente avesse cliccato direttamente su di esso. Soprattutto Chrome on Desktop (la versione 66 al momento) richiede ancora all'utente di fare clic su una piccola freccia in giù per espandere il calendario. Firefox, Edge e Chrome su Android sembrano funzionare bene però

0
2018-05-16 08:33