it-swarm.it

C'è 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 come: DD-MM-YYYY?

652
Tural Ali

È impossibile cambiare il formato

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

Formato wire La specifica della data HTML5 si riferisce al RFC3339 specifica , che specifica un formato a data intera uguale a: aaaa-mm-gg. Vedere la sezione 5.6 della specifica RFC3339 per ulteriori dettagli.

Formato di presentazione I browser non sono limitati nel modo in cui presentano un input di data. Al momento di scrivere Chrome, Edge, Firefox e Opera hanno il supporto per la data (vedi qui ). Visualizzano tutti un selettore di date e formattano il testo nel campo di input.

La formattazione del testo del campo di input viene eseguita correttamente solo in Chrome. Edge, Firefox e Opera visualizzano la data con il giorno, il mese e l'anno nell'ordine corretto per la locale, ma utilizzano in modo non coerente le barre (30/01/2018) dove per esempio i trattini (30-01-2018) sono previsti dal formato del calendario della locale.

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

535
David Walschots

Dato che questa domanda è stata posta, nel regno del web sono accadute alcune cose, e uno dei più eccitanti è l'atterraggio dei componenti web . Ora puoi risolvere elegantemente questo problema con un elemento HTML5 personalizzato progettato per soddisfare le tue esigenze. Se desideri sovrascrivere/modificare il funzionamento di qualsiasi tag html, crea il tuo gioco con la shadow dom .

La buona notizia è che ci sono già molti piatti disponibili, quindi molto probabilmente non avrai bisogno di trovare una soluzione da zero. Solo controlla cosa stanno costruendo le persone e ottieni idee da lì.

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

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

oppure puoi ottenere creativi e pop-up completi di selezionatori di date in stile come desideri , con la formattazione e le impostazioni locali che desideri, i callback e la tua lunga lista di opzioni (hai a disposizione un'intera API personalizzata!)

Conformità agli standard, nessun hack.

Controlla due polyfill disponibili , quali browser/versioni supportano, e se copre una percentuale sufficiente della tua base di utenti ... È il 2018, quindi è probabile che coprirà la maggior parte dei tuoi utenti.

Spero che sia d'aiuto!

119
SDude

Come accennato in precedenza, ufficialmente non è possibile modificare il formato. Tuttavia è possibile modellare il campo, quindi (con un piccolo aiuto JS) mostra la data in un formato che desideriamo. Alcune delle possibilità di manipolare l'input di data sono perse in questo modo, ma se il desiderio di forzare il formato è maggiore, questa soluzione potrebbe essere un modo. Un campo data rimane solo 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/

Funziona bene su Chrome per desktop e Safari su iOS (particolarmente desiderabile, dal momento che i manipolatori di date nativi su touch screen sono IMHO imbattibili). Non ho controllato gli altri, ma non mi aspetto di fallire su alcun Webkit.

67
pmucha

È importante distinguere due formati diversi :

  • Il formato di filo "RFC 3339/ISO 8601": AAAA-MM-GG. In base alle specifiche HTML5, questo è il formato che deve essere utilizzato per il valore dell'input all'immissione del modulo o quando richiesto tramite l'API DOM. È locale e indipendente dalla regione.
  • Il formato visualizzato dal controllo dell'interfaccia utente e accettato come input dell'utente. I venditori di browser sono invitati a seguire la selezione delle preferenze dell'utente. Ad esempio, su Mac OS con la regione "Stati Uniti" selezionata nel pannello 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 il formato.

46
John

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

13
Michael Mior

Dopo molti ostacoli, ho trovato una soluzione che consente di cambiare il formato. Ci sono alcune avvertenze ma è utilizzabile se si desidera visualizzare costantemente "Jan" o "01". Funziona su Chrome su Windows e Mac solo per il fatto che Firefox non supporta ancora i raccoglitori di date nativi.

https://github.com/northamerican/custom-input-date-format

JS:

function updateDateInputs() { 
    $('input').each(function() {
        var $date = $(this),
            date = $date.val().split('-'),
            format = ['year', 'month', 'day'];
        $.each(format, function(i, v) {
            $date.attr('data-' + v, +date[i]);
        });
    });
}

SASS:

$months: '01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12';
@each $month in $months {
    $i: index($months, $month);

    input[data-month="#{$i}"][data-style="reg"]::-webkit-datetime-edit-month-field:after { 
        content: "#{$month}";
    }
}
11
northamerican

Google Chrome nella sua ultima versione beta utilizza finalmente l'input type=date e 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 di date ora falliscono con formati diversi.

10
Turamarth

Prova questo se hai bisogno di una soluzione rapida Per fare yyyy-mm- dd go "dd- Sep -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 per browser browser webkit e puntatori-eventi 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>
5
Miguel

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:

enter image description here

4
ashish bhatt

Non è possibile modificare i browser Web-kit utilizzando il formato data predefinito del computer o del cellulare dell'utente. Ma se puoi utilizzare l'interfaccia utente di jquery e jquery, esiste un raccoglitore di date che è possibile progettare e che può essere mostrato in qualsiasi formato come lo desidera lo sviluppatore. il link al selezionatore della data dell'interfaccia utente jquery si trova in questa pagina http://jqueryui.com/datepicker/ puoi trovare demo, codice e collegamento alla documentazione o alla documentazione

Modifica: -Vedo che chrome usa le impostazioni della lingua che sono per impostazione predefinita equivalenti alle impostazioni di sistema ma l'utente può cambiarle 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 javascript date-picker o jquery date-picker

2
Ravinder Payal

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

Usando linux, puoi cambiarlo cambiando la variabile d'ambiente LANG, LC_TIME non sembra funzionare (almeno per me).

Puoi digitare locale in un terminale per vedere i tuoi valori attuali. Penso che lo stesso concetto possa essere applicato a IOS.

es .: utilizzo:

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

La data è mostrata come mm/dd/yyyy

Usando:

LANG=pt_BR /opt/google/chrome/chrome

La data è mostrata come dd/mm/yyyy

Puoi usare http://lh.2xlibre.net/locale/pt_BR/ (cambiare pt_BR dalla tua locale) per creare la tua locale personalizzata e il tuo formato le tue date come vuoi.

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

Puoi vedere il tuo vero formato di data corrente usando date:

$ date +%x
01-06-2015

Ma poiché LC_TIME e d_fmt sembrano essere rifiutati da chrome (e penso che sia un bug in webkit o chrome), purtroppo non funziona . : '(

Quindi, sfortunatamente la risposta è IF LANG, la variabile d'ambiente non risolve il problema, non c'è ancora modo.

2
ton

So che si tratta di un vecchio post, ma come primo suggerimento nella ricerca di google, risposta breve no, utente risposta consigliato un pier di data personalizzato, la risposta corretta che utilizzo è utilizzando una casella di testo per simulare l'input di data e fare qualsiasi formato che si desidera , 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 in codice JS è per browser che non supporta il tipo di data e imposta l'aspetto su un normale input di testo.

3- se utilizzi questo codice per più ingressi di data nella tua pagina, per favore cambia l'ID "xTime" del testo in entrambe le chiamate di funzione e l'input stesso a qualcos'altro e, naturalmente, usa il nome dell'ingresso che desideri per il modulo invia.

4-sulla seconda funzione puoi usare qualsiasi formato desideri invece di giorno + "/" + mese + "/" + anno per esempio anno + "/" + mese + "/" + giorno e nell'input di testo usa un segnaposto o un valore come aaaa/mm/gg per l'utente quando la pagina viene caricata.

0
shady

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 a partire da ora per modificare lo stile del controllo della data, non è possibile implementarlo nello stesso modo 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 trovano a proprio agio o corrispondono alla loro locale.

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

Consulta la pagina degli sviluppatori google sullo stesso.

0
Rahul R.