Chrome type = "date" e jquery ui data picker clanging

Question

Ho una casella di input con tipo = "date", tutto funziona bene in IE ma nell'ultima versione di Chrome viene fornito con uno spinner, freccia giù e con un segnaposto di mm/gg/aaaa.

In Chrome, al clic di quel campo, Chrome apre un datepicker e ho mappato il datepicker di jquery ui per l'utilizzo della mia applicazione. Questo sia si scontrano su di loro come illustrato di seguito:

ho applicato una correzione, come di seguito:

input[type="date"]::-webkit-calendar-picker-indicator{ 
    display:none; 
    -webkit-appearance: none; 
    margin: 0; 
} 
input[type="date"]::-webkit-inner-spin-button { 
    /* display: none; <- Crashes Chrome on hover */ 
    -webkit-appearance: none; 
    margin: 0; 
} 
/** THIS DOESN'T WORK **/ 
input[type="date"]::-webkit-input-placeholder{ 
    display:none !important; 
    -webkit-appearance: none !important; 
     visibility: hidden !important; 
} 
/** THIS DOESN'T WORK **/ 

Dopo aver aggiunto il codice di cui sopra, sembra saggio:

Il codice sopra nasconde lo spinner e la freccia che scocca il selettore di date di Chrome. Ma c'è un problema, il segnaposto ('mm/gg/aaaa') è ancora lì dentro per la casella di testo di input; il selezionatore di date del mio jquery ui sta migliorando, ma quando seleziono le date, il segnaposto è ancora lì.

Nessun valore è impostato in quella casella di input.

È necessario sapere come rimuovere quel segnaposto per impostare il valore; anche il formato della data che sto usando per l'applicazione è aaaa/mm/gg.

versione Chrome è: Versione 27.0.1448.0

Grazie in anticipo !!!

Answer 1

ho gestito in modo ingannevole, ho il mio campo data come type="text" e ho aggiunto un attributo come data-type="date"

in jQuery, sto facendo funzionare un codice per sostituire dinamicamente type="text & data-type="date"-type="date", in modo che il browser non lo rende un campo data in carico, ma il mio jQuery UI datepicker è chiamato come sto dinamicamente aggiungendolo come type="date" ... :)

spero che sia utile a qualcuno ..

Answer 2

Chrome 27 supporta ora DatePicker tipi di campo (proprio come Opera già fa)

È possibile controllare con modernizr.js se il campo della data è supportato. Modernizr.inputtypes.date restituisce true se il campo data è supportato dal browser.

Il codice seguente imposta JQuery UI datepicker solo se campo della data non è supportato:

<script src="modernizr.js"></script> 
<script>Modernizr.load({ 
    test: Modernizr.inputtypes.date, 
    nope: ['http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js', 'http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.7/jquery-ui.min.js', 'jquery-ui.css'], 
    complete: function() { 
    $('input[type=date]').datepicker({ 
     dateFormat: 'yy-mm-dd' 
    }); 
    } 
}); 
</script> 

Using Modernizr to detect HTML5 features and provide fallbacks

Answer 3

Ho avuto un problema simile. Nel mio modello/viewmodel avevo specificato il tipo di dati come DataType.Date Ho notato che quando ho rimosso questo strumento, il selettore della data ha iniziato a funzionare in Chrome. Penso che provato a cambiare il tipo di dati come DataType.DateTime e provato di nuovo in chrome. Questo ha risolto il problema. Non sono sicuro se questo si applica a chiunque altro, ma questo mi ha causato un sacco di mal di testa, quindi questo potrebbe aiutare qualcuno. questo ha funzionato in MVC4 utilizzando jQueryUI 1.8.20

Answer 4

Si può solo rimuovere il tipo di "date" e impostarlo sulla "text" come nel seguente violino: buona fortuna jsfiddle

removeDefaultDate = function(){ 
    $('input[type=date]').each(function(){ 
     this.type="text"; 
    }); 
    $('input[type=date]').datepicker({dateFormat: 'yy-mm-dd'}); 
} 

Answer 5

Lui è quello che ho di solito uso. Ho alcuni formati diversi di datepicker che uso, quindi non lo copro a tutti gli input di data. Tuttavia, cambiando il selettore su ciò che funziona meglio per te.

<script src="{YourPathHere}modernizr.js"></script> 
<script> 
$(function() {//DOM ready code 
    if (!Modernizr.inputtypes.date) {// Check to see if HTML5 is supported to use EF data annotations, if not use jQuery datepicker 
       $('.date-picker').datepicker(
        { 
         showButtonPanel: true, 
         gotoCurrent: true, 
         changeMonth: true, 
         changeYear: true, 
         showAnim: 'slideDown' 
        } 
       ); 
      } 
});// END DOM Ready 
</script>