Jak ustawić format daty w tagu wprowadzania daty HTML?

105

Zastanawiam się, czy możliwe jest ustawienie formatu daty w <input type="date"></input>tagu html ... Obecnie jest to rrrr-mm-dd, a potrzebuję w formacie dd-mm-rrrr.

html date input format Piotr
źródło

3

Czy nie jest to możliwy duplikat określenia wartości wyjściowej typu wejściowego HTML5 = data? ? Powiedziałbym, że to pytanie tutaj jest lepiej niż zapytał starszy, ale starszy z nich ma dość dobrą odpowiedź.

Arsen7

Możliwy duplikat Czy istnieje sposób na zmianę formatu danych wejściowych = „data”?

Vaibhav Mule

Moje ustawienia kraju to holenderski, aw Chrome pokazuje DD-MM-RRRR. Wydaje się, że zależy to od ustawień systemu Windows klienta korzystającego ze strony internetowej.

dark_passages

11

Ty nie.

Po pierwsze, twoje pytanie jest niejednoznaczne - czy masz na myśli format, w jakim jest wyświetlany użytkownikowi, czy format, w jakim jest przesyłany na serwer WWW?

Jeśli masz na myśli format, w jakim jest wyświetlany użytkownikowi, to jest to kwestia interfejsu użytkownika końcowego, a nie niczego, co określisz w kodzie HTML. Zwykle spodziewałbym się, że będzie on oparty na formacie daty ustawionym w ustawieniach regionalnych systemu operacyjnego. Nie ma sensu próbować zastępować go własnym preferowanym formatem, ponieważ format, w którym jest wyświetlany, jest (ogólnie rzecz biorąc) prawidłowy dla ustawień regionalnych użytkownika i formatu, w którym użytkownik jest przyzwyczajony do zapisywania / rozumienia dat.

Jeśli masz na myśli format, w jakim jest przesyłany na serwer, próbujesz naprawić niewłaściwy problem. To, co musisz zrobić, to zaprogramować kod po stronie serwera, aby akceptował daty w formacie rrrr-mm-dd.

Stewart
źródło

1

Niestety, twój drugi komentarz nie do końca sprawdza się w prawdziwym świecie. Niektóre przeglądarki, takie jak Chrome i Opera, przynajmniej szanują kolejność jednostek, ale nic poza tym. Na przykład moje ustawienia regionalne systemu operacyjnego określają, że jako krótka data, pierwszy dzień sierpnia tego roku powinien być 1 / 8-2016 , ale nawet Chrome i Opera pokazują 01/08/2016 . Inne przeglądarki, takie jak Safari i Firefox (przynajmniej na OS X), całkowicie ignorują ustawienia systemu operacyjnego i zawsze pokazują 2016-08-16 bez względu na wszystko. W witrynie, w której użytkownicy mogą ustawiać własne preferencje dotyczące dat, z pewnością ma sens zastąpienie tego.

Janus Bahs Jacquet

(Zignoruj uwagę o Firefoksie i Safari… Jestem zmęczony. Żadna przeglądarka w ogóle nie obsługuje typu daty, więc pokazują tylko podstawowy format wartości, który w przypadku mojego obecnego kodu to RRRR-MM-DD .)

Janus Bahs Jacquet

Czy większość ludzi pyta, jak zmienić format wyświetlania / wprowadzania daty, chcąc umożliwić użytkownikom ustawienie własnych preferencji lub narzucić własne preferowane formaty daty na świecie? To ostatnie jest czymś, czego nikt nie powinien robić, jak powiedziałem, ale można by się spierać o to, czy to pierwsze jest właściwe. Ale byłoby to ustawienie prezentacyjne, a więc poza zakresem HTML.

Stewart

Problem polega na tym, że jest to ustawienie prezentacyjne , którego nie można ustawić . Ustawienia prezentacji generalnie należą do CSS, ale nie ma możliwości zmiany tego w CSS (ani nigdzie indziej). Poza tym nawet sama specyfikacja HTML nie jest wolna od ustawień prezentacji. Na przykład, w sekcji na temat input[type=password]mówi się, że „klient użytkownika powinien zasłaniać wartość, tak aby osoby inne niż użytkownik jej nie widziały”, co jest równie dobrą prezentacją, jak stwierdzeniem, że klient użytkownika powinien przedstawiać datę w określony sposób.

Janus Bahs Jacquet

1

Niektórzy powiedzieliby, że to dobrze , że nie można go ustawić, ponieważ uniemożliwia to webmasterom narzucanie ich własnych preferowanych formatów dat na świecie. Ale wprowadzenie hasła zmusiło mnie do myślenia. W wielu miejscach specyfikacja HTML zawiera zalecenia dotyczące prezentacji, które są zasadniczo zaleceniami dotyczącymi domyślnych arkuszy stylów przeglądarki. Różnica polega na tym, że wydaje się, że nie ma właściwości CSS dla tego konkretnego aspektu prezentacji.

Stewart

11

Znalazłem to samo lub pokrewne pytanie w witrynie Stackoverflow

Czy istnieje sposób, aby zmienić format wejściowy = „data”?

Znalazłem jedno proste rozwiązanie, nie możesz podać formatu cząstek, ale możesz dostosować w ten sposób.

Kod 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>

Kod CSS:

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

Kod 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;
}

Wynik:

ashish bhatt
źródło

Jeszcze lepiej - użyj css, aby umieścić przezroczystą kontrolę daty nad zwykłym wejściem

George Mauer

Dziękuję za odpowiedź, jeśli masz do tego link lub kod, muszę zaktualizować

ashish bhatt

To świetna opcja.

Dillon Burnett

Myślę, że pyta, czy jest to możliwe za pomocą HTML (na podstawie pytania), a nie CSS ani JavaScript.

Shizukura

6

Jeśli używasz jQuery, oto ładna prosta metoda

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

Lub jest stary tradycyjny sposób:

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

sean.boyer
źródło

4

Dlaczego nie skorzystać z kontroli daty html5 w obecnej postaci, z innymi atrybutami, które pozwalają jej działać poprawnie w przeglądarkach obsługujących typ daty i nadal działa w innych przeglądarkach, takich jak Firefox, które jeszcze nie obsługują typu daty

<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
źródło

Paul IE,

8

Wymóg wyraźnie brzmiał, cytuję - „Potrzebuję go w formacie dd-mm-rrrr”. Jak to pomaga?

Harijs Krūtainis

1

nie działa z przeglądarką Firefox. Ten kod HTML pokazuje dane wejściowe z symbolem zastępczym mm / dd / rrrr. Moje okna i mój firefox mają ustawiony język holenderski jako pierwszy. Ustawienia regionalne systemu Windows pokazują krótką datę: 30-11-2018.

Roland

1

Myślę, że w HTML nie ma składni formatu DD-MM-RRRR. Skorzystaj z tej strony http://www.java2s.com/Code/SQLServer/Date-Timezone/FormatdateMmmddyyyyhhmmdp.htm . Coś ci to pomoże. W przeciwnym razie użyj selektora dat javascript.

Rathika Jeganathan
źródło

1

Nie wiem tego na pewno, ale myślę, że ma to być obsługiwane przez przeglądarkę na podstawie ustawień daty / czasu użytkownika. Spróbuj ustawić komputer, aby wyświetlał daty w tym formacie.

Błąd składni
źródło

1

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

Dheeraj Rao
źródło

3

Dziękujemy za ten fragment kodu, który może zapewnić natychmiastową pomoc. Właściwe wyjaśnienie znacznie poprawiłoby jego wartość edukacyjną, pokazując, dlaczego jest to dobre rozwiązanie problemu, i uczyniłoby je bardziej użytecznym dla przyszłych czytelników z podobnymi, ale nie identycznymi pytaniami. Proszę edytować swoje odpowiedzi, aby dodać wyjaśnienie, i dać wskazówkę co zastosować ograniczenia i założenia.

Toby Speight

1

Przeprowadziłem wiele badań i nie sądzę, aby można było wymusić format pliku <input type="date">. Przeglądarka wybiera format lokalny iw zależności od ustawień użytkownika, jeśli język użytkownika jest w języku angielskim, data zostanie wyświetlona w formacie angielskim (mm / dd / rrrr).

Moim zdaniem najlepszym rozwiązaniem jest użycie wtyczki do sterowania wyświetlaczem.

Jquery DatePicker wydaje się dobrą opcją, ponieważ możesz wymusić lokalizację , format daty ...

Fifi
źródło

1

Podałem nieco inną odpowiedź niż cokolwiek powyżej, które przeczytałem.

Moje rozwiązanie wykorzystuje trochę JavaScript i dane wejściowe HTML.

Data zaakceptowana przez dane wejściowe skutkuje ciągiem w formacie „rrrr-mm-dd”. Możemy go podzielić i odpowiednio umieścić jako nową datę ().

Oto podstawowy kod HTML:

<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>

Oto podstawowy JS:

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

Możesz dowolnie formatować datę. Możesz utworzyć nową datę () i pobrać stamtąd wszystkie informacje ... lub po prostu użyć „userDate []”, aby zbudować swój ciąg.

Pamiętaj, że niektóre sposoby wprowadzania daty do funkcji „nowa data ()” dają nieoczekiwany wynik. (tj. - jeden dzień później)

thielr7
źródło

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
źródło

2

Kiedy publikujesz tutaj kod HTML, bardzo ważne jest, aby sformatować go jako kod. Jeśli tego nie zrobisz, zostanie sformatowany jako część strony, a Twoja odpowiedź nie wygląda na odpowiedź. Jeśli nie wiesz, jak sformatować, w centrum pomocy znajdziesz fajny przewodnik na ten temat

Zoe

0

Krótka bezpośrednia odpowiedź brzmi `` nie '' lub `` nie '' po wyjęciu z pudełka, ale wymyśliłem metodę użycia pola tekstowego i czystego kodu JS do symulacji wprowadzania daty i wykonania dowolnego formatu, oto kod

<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 - pamiętaj, że ta metoda działa tylko w przeglądarkach obsługujących typ daty.

2- pierwsza funkcja w kodzie JS jest przeznaczona dla przeglądarek, które nie obsługują typu daty i ustawiają wygląd na normalne wprowadzanie tekstu.

3- jeśli użyjesz tego kodu do wielu danych wejściowych na swojej stronie, zmień identyfikator "xTime" wpisanego tekstu zarówno w wywołaniu funkcji, jak i samym wejściu na coś innego i oczywiście użyj nazwy wejścia, które chcesz dla przesłać formularz.

4-na drugiej funkcji możesz użyć dowolnego formatu zamiast dnia + "/" + miesiąc + "/" + rok, na przykład rok + "/" + miesiąc + "/" + dzień, a podczas wprowadzania tekstu użyj symbolu zastępczego lub wartości jako rrrr / mm / dd dla użytkownika podczas ładowania strony.

zacieniony
źródło

0

Do formatowania w mm-dd-rrrr

aa = date.split („-”)

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

Abilash Raghu
źródło

-1

Czysta implementacja bez zależności. 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
źródło

-1

Możemy zmienić ten format rrrr-mm-dd na dd-mm-rrrr w javascript za pomocą metody podziału.

let dateyear= "2020-03-18";
let arr = dateyear.split('-') //now we get array of these and we can made in any format as we want
let dateFormat = arr[2] + "-" + arr[1] + "-" + arr[0]  //In dd-mm-yyyy format

Narun Dutta
źródło

-2

Oto rozwiązanie:

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

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

miejmy nadzieję, że to rozwiąże problem :)

Muhammad Waqas
źródło

1

Twoje rozwiązanie nie wykorzystuje danych wejściowych HTML typu data, więc tak naprawdę nie odpowiada na pytanie.

Vincent

nie musisz już ustawiać jego typu. dla datepicker będzie działać bez daty. Spróbuj, miejmy nadzieję, że rozwiąże Twój problem.

Muhammad Waqas

-3

Format wartości daty to 'YYYY-MM-DD'. Zobacz poniższy przykład

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

Wszystko, czego potrzebujesz, to sformatować datę w php, asp, ruby lub czymkolwiek, aby mieć ten format.

Charmi
źródło

Jak ustawić format daty w tagu wprowadzania daty HTML?

Odpowiedzi: