Esiste un modo per cambiare il tipo di input = formato "data"?

Sto lavorando con elementi HTML5 sulla mia pagina web. Per impostazione predefinita, l'input type="date"mostra la data come YYYY-MM-DD.

La domanda è: è possibile cambiare il suo formato in qualcosa del tipo DD-MM-YYYY:?

È impossibile cambiare il formato

Dobbiamo distinguere tra il formato over the wire e il formato di presentazione del browser.

Formato filo

La specifica di input data HTML5 riferisce alla specifica RFC 3339 , che specifica un formato di pieno data pari a: yyyy-mm-dd. Vedere la sezione 5.6 della specifica RFC 3339 per maggiori dettagli.

Questo formato viene utilizzato dall'attributo valueHTML e dalla proprietà DOM ed è quello utilizzato per l'invio di un normale modulo.

Formato di presentazione

I browser non hanno limiti nel modo in cui presentano un input di data. Al momento della scrittura di Chrome, Edge, Firefox e Opera hanno il supporto della data (vedi qui ). Tutti visualizzano un selettore di date e formattano il testo nel campo di input.

Dispositivi desktop

Per Chrome, Firefox e Opera, la formattazione del testo del campo di input si basa sull'impostazione della lingua del browser. Per Edge, si basa sull'impostazione della lingua di Windows. Purtroppo, tutti i browser Web ignorano la formattazione della data configurata nel sistema operativo. Per me questo è un comportamento molto strano e qualcosa da considerare quando si utilizza questo tipo di input. Ad esempio, gli utenti olandesi che hanno il loro sistema operativo o set lingua del browser al en-usverranno mostrati 01/30/2019al posto del formato in cui sono abituati a: 30-01-2019.

Internet Explorer 9, 10 e 11 visualizzano un campo di immissione testo con il formato filo.

Dispositivi mobili

In particolare per Chrome su Android, la formattazione si basa sulla lingua di visualizzazione di Android. Ho il sospetto che lo stesso vale per altri browser, anche se non sono stato in grado di verificarlo.

Da quando questa domanda è stata posta sono successe alcune cose nel regno del web, e uno dei più interessanti è l'atterraggio di componenti web . Ora puoi risolvere questo problema in modo elegante con un elemento HTML5 personalizzato progettato per soddisfare le tue esigenze. Se desideri sovrascrivere / modificare il funzionamento di qualsiasi tag html, costruisci il tuo giocando con l' ombra dom .

La buona notizia è che c'è già molta piastra di cottura disponibile, quindi molto probabilmente non dovrai trovare una soluzione da zero. Basta controllare ciò che le persone stanno costruendo e avere idee da lì.

Puoi iniziare con una soluzione semplice (e funzionante) come input di datetime per polimero che ti consente di utilizzare un tag come questo:

 <date-input date="{{date}}" timezone="[[timezone]]"></date-input>

oppure puoi scegliere creativi e pop-up completi selettori di date come preferisci , con la formattazione e le località che desideri, i callback e il tuo lungo elenco di opzioni (hai un'intera API personalizzata a tua disposizione!)

Conforme agli standard, nessun hack.

Ricontrolla i polyfill disponibili , quali browser / versioni supportano e se copre abbastanza% della tua base di utenti ... È il 2018, quindi è probabile che coprirà sicuramente la maggior parte dei tuoi utenti.

Spero che sia d'aiuto!

Come accennato in precedenza, non è ufficialmente possibile modificare il formato. Tuttavia è possibile dare uno stile al campo, quindi (con un piccolo aiuto di JS) visualizza la data nel formato desiderato. Alcune delle possibilità di manipolare l'input della data vanno perse in questo modo, ma se il desiderio di forzare il formato è maggiore, questa soluzione potrebbe essere un modo. I campi di una data rimangono così:

<input type="date" data-date="" data-date-format="DD MMMM YYYY" value="2015-08-09">

Il resto è un po 'di CSS e JS: http://jsfiddle.net/g7mvaosL/

$("input").on("change", function() {
    this.setAttribute(
        "data-date",
        moment(this.value, "YYYY-MM-DD")
        .format( this.getAttribute("data-date-format") )
    )
}).trigger("change")

input {
    position: relative;
    width: 150px; height: 20px;
    color: white;
}

input:before {
    position: absolute;
    top: 3px; left: 3px;
    content: attr(data-date);
    display: inline-block;
    color: black;
}

input::-webkit-datetime-edit, input::-webkit-inner-spin-button, input::-webkit-clear-button {
    display: none;
}

input::-webkit-calendar-picker-indicator {
    position: absolute;
    top: 3px;
    right: 0;
    color: black;
    opacity: 1;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js"></script>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<input type="date" data-date="" data-date-format="DD MMMM YYYY" value="2015-08-09">

Funziona bene su Chrome per desktop e Safari su iOS (particolarmente desiderabile, poiché i manipolatori di date nativi su touchscreen sono IMHO imbattibili). Non ho controllato gli altri, ma non aspettarti di fallire su nessun Webkit.

È importante distinguere due diversi formati :

• "Formato filo" RFC 3339 / ISO 8601: AAAA-MM-GG. Secondo la specifica HTML5, questo è il formato che deve essere utilizzato per il valore dell'input al momento dell'invio del modulo o quando richiesto tramite l'API DOM. È indipendente dalla locale e dalla regione.
• Il formato visualizzato dal controllo dell'interfaccia utente e accettato come input dell'utente. I fornitori di browser sono invitati a seguire la selezione delle preferenze dell'utente. Ad esempio, su Mac OS con la regione "Stati Uniti" selezionata nel riquadro delle preferenze Lingua e testo, Chrome 20 utilizza il formato "m / g / aa".

La specifica HTML5 non include alcun mezzo per sovrascrivere o specificare manualmente entrambi i formati.

Credo che il browser utilizzerà il formato data locale. Non pensare che sia possibile cambiare. Puoi ovviamente usare un selettore di date personalizzato.

Google Chrome nell'ultima versione beta utilizza finalmente l'input type=datee il formato è DD-MM-YYYY.

Quindi ci deve essere un modo per forzare un formato specifico. Sto sviluppando una pagina Web HTML5 e le ricerche per data ora falliscono con formati diversi.

Prova questo se hai bisogno di una soluzione rapida Per far sì che yyyy-mm-dd vada "gg- set -2016"

1) Crea vicino al tuo input una classe span (agisci come etichetta)

2) Aggiorna l'etichetta ogni volta che la data viene modificata dall'utente o quando è necessario caricare i dati.

Funziona con i cellulari browser webkit ed eventi puntatore per IE11 + richiede jQuery e Jquery Date

$("#date_input").on("change", function () {
     $(this).css("color", "rgba(0,0,0,0)").siblings(".datepicker_label").css({ "text-align":"center", position: "absolute",left: "10px", top:"14px",width:$(this).width()}).text($(this).val().length == 0 ? "" : ($.datepicker.formatDate($(this).attr("dateformat"), new Date($(this).val()))));
        });

#date_input{text-indent: -500px;height:25px; width:200px;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.min.js"></script>
<input id ="date_input" dateformat="d M y" type="date"/>
<span class="datepicker_label" style="pointer-events: none;"></span>

Dopo aver letto molte discussioni, ho preparato una soluzione semplice ma non voglio usare molti Jquery e CSS, solo alcuni javascript.

Codice HTML:

<input type="date" id="dt" onchange="mydate1();" hidden/>
<input type="text" id="ndt"  onclick="mydate();" hidden />
<input type="button" Value="Date" onclick="mydate();" />

Codice CSS:

#dt {
  text-indent: -500px;
  height: 25px;
  width: 200px;
}

Codice Javascript:

function mydate() {
  //alert("");
  document.getElementById("dt").hidden = false;
  document.getElementById("ndt").hidden = true;
}

function mydate1() {
  d = new Date(document.getElementById("dt").value);
  dt = d.getDate();
  mn = d.getMonth();
  mn++;
  yy = d.getFullYear();
  document.getElementById("ndt").value = dt + "/" + mn + "/" + yy
  document.getElementById("ndt").hidden = false;
  document.getElementById("dt").hidden = true;
}

Produzione:

Come detto, il <input type=date ... >non è completamente implementato nella maggior parte dei browser, quindi parliamo di webkit come i browser (chrome).

Usando Linux, puoi cambiarlo cambiando la variabile d'ambiente LANG, LC_TIMEnon sembra funzionare (almeno per me).

Puoi digitare localeun terminale per vedere i tuoi valori correnti. Penso che lo stesso concetto possa essere applicato a IOS.

ad es .: utilizzando:

LANG=en_US.UTF-8 /opt/google/chrome/chrome

La data è indicata come mm/dd/yyyy

usando:

LANG=pt_BR /opt/google/chrome/chrome

La data è indicata come dd/mm/yyyy

Puoi utilizzare http://lh.2xlibre.net/locale/pt_BR/ (cambia in pt_BRbase alla tua locale) per creare la tua locale personalizzata e formattare le date come desideri.

Un bel riferimento più avanzato su come modificare la data di sistema predefinita è: https://ccollins.wordpress.com/2009/01/06/how-to-change-date-formats-on-ubuntu/ e https: // askubuntu. com / domande / 21316 / come-can-i-customize-a-system-locale

Puoi vedere il tuo vero formato data attuale usando date:

$ date +%x
01-06-2015

Ma poiché LC_TIMEe d_fmtsembra essere respinto da Chrome (e penso che sia un bug in WebKit o Chrome), purtroppo non funziona . : '(

Quindi, sfortunatamente, la risposta è: se LANGla variabile d'ambiente non risolve il tuo problema, non c'è ancora modo.

I browser ottengono il formato di immissione della data dal formato della data di sistema dell'utente.

(Testato nei browser supportati, Chrome, Edge.)

Poiché non esiste uno standard definito dalle specifiche fin da ora per modificare lo stile del controllo della data, non è possibile implementare lo stesso nei browser.

Tuttavia, questo comportamento di ottenere il formato della data dalle impostazioni di sistema è migliore e consiglio vivamente di non provare a sovrascriverlo. Il motivo è che gli utenti vedranno il formato di input della data uguale a quello che hanno configurato nel sistema / dispositivo e con cui si sentono a proprio agio o che corrispondono alle loro impostazioni locali.

Ricorda, questo è solo il formato dell'interfaccia utente sullo schermo che gli utenti vedono, nel tuo javascript / backend puoi sempre mantenere il formato desiderato.

Fare riferimento alla pagina degli sviluppatori di Google sullo stesso.

Non è possibile modificare i browser del kit web utilizzando il formato data predefinito del computer o del cellulare dell'utente. Ma se puoi usare l'interfaccia utente di jquery e jquery, c'è un selettore di date che è progettabile e può essere mostrato in qualsiasi formato come lo sviluppatore vuole. il collegamento al selettore della data dell'interfaccia utente di jquery è su questa pagina http://jqueryui.com/datepicker/ è possibile trovare demo, nonché codice e documentazione o collegamento alla documentazione

Modifica: -Io trovo che Chrome utilizza impostazioni della lingua che sono per impostazione predefinita uguali alle impostazioni di sistema ma l'utente può modificarle ma lo sviluppatore non può costringere gli utenti a farlo, quindi devi usare altre soluzioni js come ti dico che puoi cercare nel web con query come selettori di data javascript o selettore di date jquery

ho trovato un modo per cambiare formato, è un modo complicato, ho appena cambiato l'aspetto dei campi di input della data usando solo un codice CSS.

input[type="date"]::-webkit-datetime-edit, input[type="date"]::-webkit-inner-spin-button, input[type="date"]::-webkit-clear-button {
  color: #fff;
  position: relative;
}

input[type="date"]::-webkit-datetime-edit-year-field{
  position: absolute !important;
  border-left:1px solid #8c8c8c;
  padding: 2px;
  color:#000;
  left: 56px;
}

input[type="date"]::-webkit-datetime-edit-month-field{
  position: absolute !important;
  border-left:1px solid #8c8c8c;
  padding: 2px;
  color:#000;
  left: 26px;
}


input[type="date"]::-webkit-datetime-edit-day-field{
  position: absolute !important;
  color:#000;
  padding: 2px;
  left: 4px;
  
}

<input type="date" value="2019-12-07">

Poiché il post è attivo 2 mesi fa. così ho pensato di dare anche il mio contributo.

Nel mio caso ricevo la data da un lettore di schede che viene fornito nel formato gg / mm / aaaa.

quello che faccio. Per esempio

var d="16/09/2019" // date received from card
function filldate(){
    document.getElementById('cardexpirydate').value=d.split('/').reverse().join("-");
    }

<input type="date" id="cardexpirydate">
<br /><br />
<input type="button" value="fill the date" onclick="filldate();">

cosa fa il codice:

1. divide la data che ottengo come gg / mm / aaaa (usando split ()) sulla base di "/" e crea un array,
2. quindi inverte l'array (usando reverse ()) poiché l'input della data supporta il contrario di quello che ottengo.
3. quindi unisce (utilizzando join ()) l'array a una stringa in base al formato richiesto dal campo di input

Tutto ciò avviene in un'unica riga.

ho pensato che questo potesse aiutare qualcuno, così ho scritto questo.

Ho cercato questo problema 2 anni fa e le mie ricerche su Google mi portano di nuovo a questa domanda. Non perdere tempo a cercare di gestirlo con JavaScript puro. Perdo il mio tempo cercando di farcela dd/mm/yyyy. Non esistono soluzioni complete che si adattino a tutti i browser. Quindi consiglio di usare jQuery datepicker o di dire al tuo client di lavorare con il formato data predefinito

So che è un vecchio post, ma viene come primo suggerimento nella ricerca di Google, risposta breve no, risposta consigliata all'utente un data piker personalizzato, la risposta corretta che uso è usare una casella di testo per simulare l'immissione della data e fare il formato che desideri , ecco il codice

<html>
<body>
date : 
<span style="position: relative;display: inline-block;border: 1px solid #a9a9a9;height: 24px;width: 500px">
    <input type="date" class="xDateContainer" onchange="setCorrect(this,'xTime');" style="position: absolute; opacity: 0.0;height: 100%;width: 100%;"><input type="text" id="xTime" name="xTime" value="dd / mm / yyyy" style="border: none;height: 90%;" tabindex="-1"><span style="display: inline-block;width: 20px;z-index: 2;float: right;padding-top: 3px;" tabindex="-1">&#9660;</span>
</span>
<script language="javascript">
var matchEnterdDate=0;
//function to set back date opacity for non supported browsers
    window.onload =function(){
        var input = document.createElement('input');
        input.setAttribute('type','date');
        input.setAttribute('value', 'some text'); 
        if(input.value === "some text"){
            allDates = document.getElementsByClassName("xDateContainer");
            matchEnterdDate=1;
            for (var i = 0; i < allDates.length; i++) {
                allDates[i].style.opacity = "1";
            } 
        }
    }
//function to convert enterd date to any format
function setCorrect(xObj,xTraget){
    var date = new Date(xObj.value);
    var month = date.getMonth();
    var day = date.getDate();
    var year = date.getFullYear();
    if(month!='NaN'){
        document.getElementById(xTraget).value=day+" / "+month+" / "+year;
    }else{
        if(matchEnterdDate==1){document.getElementById(xTraget).value=xObj.value;}
    }
}
   </script>
  </body>
</html>

1- si noti che questo metodo funziona solo per browser che supportano il tipo di data.

2- la prima funzione nel codice JS è per il browser che non supporta il tipo di data e imposta l'aspetto su un normale input di testo.

3- se utilizzerai questo codice per più input di date nella tua pagina, cambia l'ID "xTime" dell'input di testo sia nella chiamata di funzione sia nell'input stesso in qualcos'altro e ovviamente usa il nome dell'input che desideri per il inviare il modulo.

4-sulla seconda funzione è possibile utilizzare qualsiasi formato desiderato invece del giorno + "/" + mese + "/" + anno ad esempio anno + "/" + mese + "/" + giorno e nell'input di testo utilizzare un segnaposto o un valore come aaaa / mm / gg per l'utente al caricamento della pagina.