Come impostare il formato della data nel tag di input della data HTML?

105

Mi chiedo se sia possibile impostare il formato della data nel <input type="date"></input>tag html ... Attualmente è aaaa-mm-gg, mentre ne ho bisogno nel formato gg-mm-aaaa.

— Piotr
fonte

3

Non è un possibile duplicato di Specificare il valore di output di un tipo di input HTML5 = data? ? Direi che questa domanda qui è meglio posta di quella più vecchia, ma quella più vecchia ha una risposta abbastanza buona.

— Arsen7

Possibile duplicato di Esiste un modo per modificare il tipo di input = il formato "data"?

— Vaibhav Mule

Le impostazioni del mio paese sono l'olandese e in Chrome mostra GG-MM-AAAA. Sembra dipenda dalle impostazioni di Windows del client che utilizza il sito web.

— dark_passages

11

Non lo fai.

In primo luogo, la tua domanda è ambigua: intendi il formato in cui viene visualizzata all'utente o il formato in cui viene trasmessa al server web?

Se intendi il formato in cui viene visualizzato all'utente, questo dipende dall'interfaccia dell'utente finale, non da tutto ciò che specifichi nell'HTML. Di solito, mi aspetto che sia basato sul formato della data impostato nelle impostazioni locali del sistema operativo. Non ha senso provare a sovrascriverlo con il tuo formato preferito, poiché il formato in cui viene visualizzato è (generalmente parlando) quello corretto per le impostazioni internazionali dell'utente e il formato in cui l'utente è abituato a scrivere / comprendere le date.

Se intendi il formato in cui viene trasmesso al server, stai cercando di risolvere il problema sbagliato. Quello che devi fare è programmare il codice lato server per accettare le date nel formato aaaa-mm-gg.

— Stewart
fonte

1

Purtroppo, il tuo secondo commento non è del tutto vero nel mondo reale. Alcuni browser, come Chrome e Opera, rispettano almeno l' ordine delle entità, anche se niente di più. Ad esempio, le impostazioni locali del mio sistema operativo specificano che, come data breve, il primo giorno di agosto di quest'anno dovrebbe essere 1 / 8-2016 , ma anche Chrome e Opera mostrano il 01/08/2016 . Altri browser, come Safari e Firefox (almeno su OS X) ignorano completamente le impostazioni del sistema operativo e mostrano sempre 2016-08-16, non importa quale. Su un sito in cui gli utenti possono impostare le proprie preferenze di data, ha sicuramente senso sovrascriverlo.

— Janus Bahs Jacquet

(Ignora la nota su Firefox e Safari ... Sono stanco. Nessuno dei due browser supporta affatto il tipo di data, quindi mostrano solo il formato sottostante del valore, che nel caso del mio codice corrente è AAAA-MM-GG .)

— Janus Bahs Jacquet

La maggior parte delle persone che chiede come modificare il formato di visualizzazione / input della data desidera consentire agli utenti di impostare le proprie preferenze o di imporre al mondo i propri formati di data preferiti? Quest'ultimo è qualcosa che nessuno dovrebbe fare, come ho detto, ma potresti discutere in entrambi i casi sul fatto che il primo sia appropriato. Ma sarebbe un ambiente di presentazione, quindi al di fuori dell'ambito dell'HTML.

— Stewart

Il guaio è che è un ambiente di presentazione che non può essere impostato . Le impostazioni di presentazione in generale appartengono ai CSS, ma non c'è modo di cambiarle in CSS (o altrove). Inoltre, anche la specifica HTML stessa non è priva di impostazioni di presentazione. Ad esempio, la sezione su input[type=password]dice che "l'agente utente dovrebbe oscurare il valore in modo che le persone diverse dall'utente non possano vederlo", che è tanto una presentazione quanto dire che l'agente utente dovrebbe presentare la data in un certo modo.

— Janus Bahs Jacquet

1

Alcuni direbbero che è una buona cosa che non possa essere impostato, poiché impedisce ai webmaster di infliggere i propri formati di data preferiti al mondo. Ma l'inserimento della password mi ha fatto pensare. In molti posti, le specifiche HTML forniscono consigli sulla presentazione, che sono essenzialmente consigli per i fogli di stile predefiniti del browser. La differenza qui è che non sembra esserci una proprietà CSS per questo particolare aspetto di presentazione.

— Stewart

11

Ho trovato la stessa domanda o domanda correlata su StackOverflow

C'è un modo per modificare il tipo di input = formato "data"?

Ho trovato una semplice soluzione, non puoi dare particolato in formato ma puoi personalizzare in questo modo.

Codice HTML:

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

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:

— bhatt ashish
fonte

Ancora meglio: usa CSS per posizionare un controllo della data trasparente sull'input normale

— George Mauer,

Grazie per la tua risposta, se hai qualche link o codice per questo, devo aggiornare

— ashish bhatt

Questa è un'ottima opzione.

— Dillon Burnett

Penso che stia chiedendo se è possibile con HTML (in base alla domanda), non CSS né Javascript.

— Shizukura

6

Se stai usando jQuery, ecco un bel metodo semplice

$("#dateField").val(new Date().toISOString().substring(0, 10));

Oppure c'è il vecchio modo tradizionale:

document.getElementById("dateField").value = new Date().toISOString().substring(0, 10)

— sean.boyer
fonte

4

Perché non utilizzare il controllo della data html5 così com'è, con altri attributi che lo consentono di funzionare bene sui browser che supportano il tipo di data e funziona ancora su altri browser come Firefox che deve ancora supportare il tipo di data

<input type="date" name="input1" placeholder="YYYY-MM-DD" required pattern="[0-9]{4}-[0-9]{2}-[0-9]{2}" title="Enter a date in this formart YYYY-MM-DD"/>

— Paul IE
fonte

— Paul IE

8

Il requisito era chiaramente, cito - "Ne ho bisogno nel formato gg-mm-aaaa". In che modo questo aiuta?

— Harijs Krūtainis

1

non funziona con Firefox. Questo html mostra un input con segnaposto mm / gg / aaaa. Le mie finestre e il mio Firefox sono entrambi impostati con l'olandese come prima lingua. L'impostazione internazionale di Windows mostra una data breve: 30-11-2018.

— Roland

1

Penso di sì, in HTML non esiste la sintassi per il formato GG-MM-AAAA. Fare riferimento a questa pagina http://www.java2s.com/Code/SQLServer/Date-Timezone/FormatdateMmmddyyyyhhmmdp.htm . Un po 'ti aiuterà. Altrimenti usa il selettore di date javascript.

— Rathika Jeganathan
fonte

1

Non lo so per certo, ma penso che dovrebbe essere gestito dal browser in base alle impostazioni di data / ora dell'utente. Prova a impostare il tuo computer per visualizzare le date in quel formato.

— Errore di sintassi
fonte

1

$('input[type="date"]').change(function(){
   alert(this.value.split("-").reverse().join("-")); 
});

— Dheeraj Rao
fonte

3

Grazie per questo snippet di codice, che potrebbe fornire un aiuto immediato. Una spiegazione adeguata migliorerebbe notevolmente il suo valore educativo mostrando perché questa è una buona soluzione al problema e la renderebbe più utile ai futuri lettori con domande simili, ma non identiche. Si prega di modificare la risposta di aggiungere una spiegazione, e dare un'indicazione di ciò si applicano le limitazioni e le assunzioni.

— Toby Speight

1

Ho fatto molte ricerche e non credo che si possa forzare il formato del file <input type="date">. Il browser seleziona il formato locale e, a seconda delle impostazioni dell'utente, se la lingua dell'utente è in inglese, la data verrà visualizzata nel formato inglese (mm / gg / aaaa).

A mio parere, la soluzione migliore è utilizzare un plugin per controllare il display.

Jquery DatePicker sembra una buona opzione poiché puoi forzare la localizzazione , il formato della data ...

— Fifi
fonte

1

Ho trovato una risposta leggermente diversa da qualsiasi cosa sopra che ho letto.

La mia soluzione utilizza un po 'di JavaScript e un input html.

La data accettata da un input risulta in una stringa formattata come "aaaa-mm-gg". Possiamo dividerlo e posizionarlo correttamente come nuovo Date ().

Ecco l'HTML di base:

<form id="userForm">
    <input type="text" placeholder="1, 2, 3, 4, 5, 6" id="userNumbers" />
    <input type="date" id="userDate" />
    <input type="submit" value="Track" />
</form>

Ecco JS di base:

let userDate = document.getElementById('userDate').value.split('-'),
    parsedDate = new Date((`${userDate[1]}-${userDate[2]}-${userDate[0]}`));

Puoi formattare la data come preferisci. Puoi creare un nuovo Date () e prendere tutte le informazioni da lì ... o semplicemente usare 'userDate []' per costruire la tua stringa.

Tieni presente che alcuni modi in cui una data viene inserita in "new Date ()" produce un risultato imprevisto. (cioè - un giorno indietro)

— thielr7
fonte

1

<html>

    <body>
        <p id="result">result</p>Enter some text: <input type="date" name="txt" id="value" onchange="myFunction(value)">
        <button onclick="f()">submit</button>
        <script>
            var a;

            function myFunction(val){
                a = val.split("-").reverse().join("-");
                document.getElementById("value").type = "text";
                document.getElementById("value").value = a;
            }

            function f(){
                document.getElementById("result").innerHTML = a;
                var z = a.split("-").reverse().join("-");
                document.getElementById("value").type = "date";
                document.getElementById("value").value = z;
            }

        </script>
    </body>

</html>

— pala dattadri
fonte

2

Quando inserisci qui il codice HTML, è molto importante formattarlo come codice. In caso contrario, è formattato come parte della pagina e la tua risposta non sembra una risposta. Se non sai come formattare, c'è una bella guida nel centro assistenza

— Zoe

0

la risposta breve e diretta è no o non è fuori dagli schemi ma ho escogitato un metodo per utilizzare una casella di testo e il codice JS puro per simulare l'inserimento della data e fare qualsiasi formato tu voglia, 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- tieni presente che questo metodo funziona solo per browser che supportano il tipo di data.

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

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

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

— ombreggiato
fonte

0

Per la formattazione in mm-gg-aaaa

AA = date.split ( "-")

date = aa [1] + '-' + aa [2] + '-' + aa [0]

— Abilash Raghu
fonte

-1

Implementazione pulita senza dipendenze. https://jsfiddle.net/h3hqydxa/1/

  <style type="text/css">
    .dateField {
      width: 150px;
      height: 32px;
      border: none;
      position: absolute;
      top: 32px;
      left: 32px;
      opacity: 0.5;
      font-size: 12px;
      font-weight: 300;
      font-family: Arial;
      opacity: 0;
    }

    .fakeDateField {
      width: 100px; /* less, so we don't intercept click on browser chrome for date picker. could also change this at runtime */
      height: 32px; /* same as above */
      border: none;
      position: absolute; /* position overtop the date field */
      top: 32px;
      left: 32px;
      display: visible;
      font-size: 12px; /* same as above */
      font-weight: 300; /* same as above */
      font-family: Arial; /* same as above */
      line-height: 32px; /* for vertical centering */
    }
  </style>

  <input class="dateField" id="dateField" type="date"></input>
  <div id="fakeDateField" class="fakeDateField"><em>(initial value)</em></div>

  <script>
    var dateField = document.getElementById("dateField");
    var fakeDateField = document.getElementById("fakeDateField");

    fakeDateField.addEventListener("click", function() {
      document.getElementById("dateField").focus();
    }, false);

    dateField.addEventListener("focus", function() {
      fakeDateField.style.opacity = 0;
      dateField.style.opacity = 1;
    });

    dateField.addEventListener("blur", function() {
      fakeDateField.style.opacity = 1;
      dateField.style.opacity = 0;
    });

    dateField.addEventListener("change", function() {
      // this method could be replaced by momentJS stuff
      if (dateField.value.length < 1) {
        return;
      }

      var date = new Date(dateField.value);
      var day = date.getUTCDate();
      var month = date.getUTCMonth() + 1; //zero-based month values
      fakeDateField.innerHTML = (month < 10 ? "0" : "") + month + " / " + day;
    });

  </script>

— James Perih
fonte

-2

Ecco la soluzione:

  <input type="text" id="end_dt"/>

$(document).ready(function () {
    $("#end_dt").datepicker({ dateFormat: "MM/dd/yyyy" });
});

speriamo che questo risolva il problema :)

— Muhammad Waqas
fonte

1

La tua soluzione non utilizza il tipo di data di input HTML, quindi non risponde realmente alla domanda.

— Vincent

non è necessario impostare il suo tipo su data. per datepicker funzionerà senza data. Provalo, si spera che risolva il tuo problema.

— Muhammad Waqas

-3

Il formato del valore della data è 'YYYY-MM-DD'. Vedi il seguente esempio

<form>
<input value="2015-11-30" name='birthdate' type='date' class="form-control" placeholder="Date de naissance"/>
</form>

Tutto ciò che serve è formattare la data in php, asp, ruby o qualsiasi altra cosa per avere quel formato.

— charmi
fonte