Czy jest jakiś sposób na zmianę typu wejścia = format „data”?

Pracuję z elementami HTML5 na mojej stronie. Domyślnie wejście type="date"wyświetla datę jako YYYY-MM-DD.

Pytanie brzmi, czy można zmienić format na coś takiego DD-MM-YYYY:?

Zmiana formatu jest niemożliwa

Musimy rozróżniać między formatem przewodowym a formatem prezentacji przeglądarki.

Format drutu

Specyfikacja wejścia HTML5 termin odnosi się do specyfikacji RFC 3339 , który określa format pełny bieżąco równa: yyyy-mm-dd. Więcej informacji znajduje się w sekcji 5.6 specyfikacji RFC 3339.

Ten format jest używany przez valueatrybut HTML i właściwość DOM i jest używany podczas zwykłego przesyłania formularza.

Format prezentacji

Przeglądarki nie mają ograniczeń w sposobie prezentacji daty. W momencie pisania Chrome, Edge, Firefox i Opera mają obsługę daty (patrz tutaj ). Wszystkie wyświetlają selektor daty i formatują tekst w polu wprowadzania.

Urządzenia stacjonarne

W przypadku Chrome, Firefox i Opera formatowanie tekstu pola wejściowego zależy od ustawienia języka przeglądarki. W przypadku Edge jest on oparty na ustawieniu języka Windows. Niestety wszystkie przeglądarki internetowe ignorują formatowanie daty skonfigurowane w systemie operacyjnym. Dla mnie jest to bardzo dziwne zachowanie i coś do rozważenia przy użyciu tego typu danych wejściowych. Na przykład holenderska użytkownicy, którzy posiadają swój system operacyjny lub zestaw językowy przeglądarka en-uszostanie pokazany 01/30/2019zamiast formatu są przyzwyczajeni do: 30-01-2019.

Internet Explorer 9, 10 i 11 wyświetlają pole wprowadzania tekstu w formacie przewodowym.

Urządzenia mobilne

Formatowanie jest specyficzne dla Chrome na Androida. Podejrzewam, że to samo dotyczy innych przeglądarek, chociaż nie byłem w stanie tego zweryfikować.

Ponieważ zadano to pytanie, wiele rzeczy wydarzyło się w świecie internetowym, a jednym z najbardziej ekscytujących jest lądowanie komponentów internetowych . Teraz możesz elegancko rozwiązać ten problem za pomocą niestandardowego elementu HTML5 zaprojektowanego zgodnie z Twoimi potrzebami. Jeśli chcesz zastąpić / zmienić działanie dowolnego tagu HTML, po prostu stwórz swoją grę w domenie-cieniu .

Dobrą wiadomością jest to, że jest już dostępnych wiele płyt kotłowych, więc najprawdopodobniej nie będziesz musiał wymyślić rozwiązania od zera. Wystarczy sprawdzić , co ludzie budują i pomysłów stamtąd.

Możesz zacząć od prostego (i działającego) rozwiązania, takiego jak wprowadzanie daty i godziny dla polimeru, które pozwala na użycie takiego tagu:

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

lub możesz uzyskać kreatywne i wyskakujące, kompletne selektory dat według własnego stylu , z pożądanym formatowaniem i lokalizacjami, oddzwanianiem i długą listą opcji (masz do dyspozycji cały niestandardowy interfejs API!)

Zgodny ze standardami, bez włamań.

Dokładnie sprawdź dostępne wielopełniacze , obsługiwane przez nie przeglądarki i wersje , a jeśli pokryje wystarczającą część bazy użytkowników… Jest rok 2018, więc są szanse, że z pewnością obejmie większość użytkowników.

Mam nadzieję, że to pomoże!

Jak wspomniano wcześniej, oficjalnie nie można zmienić formatu. Można jednak stylizować pole, więc (przy niewielkiej pomocy JS) wyświetla datę w pożądanym przez nas formacie. W ten sposób utracono niektóre możliwości manipulowania wprowadzaniem daty, ale jeśli chęć wymuszenia formatu jest większa, to rozwiązanie może być dobrym rozwiązaniem. Pola daty pozostają takie:

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

Reszta to trochę CSS i 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">

Działa ładnie w Chrome na komputery i Safari na iOS (szczególnie pożądane, ponieważ natywnych manipulatorów daty na ekranach dotykowych są nie do pobicia IMHO). Nie sprawdziłem innych, ale nie spodziewaj się niepowodzenia w żadnym pakiecie Webkit.

Ważne jest rozróżnienie dwóch różnych formatów :

• RFC 3339 / ISO 8601 „format drutu”: RRRR-MM-DD. Zgodnie ze specyfikacją HTML5 jest to format, który należy zastosować dla wartości wejściowej po przesłaniu formularza lub na żądanie przez interfejs API DOM. Jest niezależny od regionu i regionu.
• Format wyświetlany przez kontrolkę interfejsu użytkownika i akceptowany jako dane wejściowe użytkownika. Zachęcamy dostawców przeglądarek do śledzenia preferencji użytkownika. Na przykład w systemie Mac OS z regionem „Stany Zjednoczone” wybranym w panelu Preferencje języka i tekstu Chrome 20 używa formatu „m / d / rr”.

Specyfikacja HTML5 nie obejmuje żadnego sposobu zastępowania ani ręcznego określania żadnego z tych formatów.

Wierzę, że przeglądarka użyje lokalnego formatu daty. Nie sądzę, że można to zmienić. Możesz oczywiście użyć niestandardowego selektora dat.

Google Chrome w swojej ostatniej wersji beta w końcu korzysta z danych wejściowych type=datei ma format DD-MM-YYYY.

Musi być więc sposób na wymuszenie określonego formatu. Tworzę stronę internetową HTML5, a wyszukiwanie dat kończy się teraz niepowodzeniem w różnych formatach.

Wypróbuj to, jeśli potrzebujesz szybkiego rozwiązania Aby rrrr-mm-dd przejść na „dd- wrz -2016”

1) Utwórz w pobliżu wejścia jedną klasę zakresu (działaj jak etykieta)

2) Zaktualizuj etykietę za każdym razem, gdy użytkownik zmieni datę, lub gdy trzeba załadować dane.

Działa z telefonami komórkowymi przeglądarki i zdarzeniami wskaźnikowymi dla IE11 + wymaga jQuery i 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>

Po przeczytaniu wielu dyskusji przygotowałem proste rozwiązanie, ale nie chcę używać wielu Jquery i CSS, tylko trochę javascript.

Kod HTML:

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

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:

Jak powiedziano, <input type=date ... >nie jest w pełni zaimplementowany w większości przeglądarek, więc porozmawiajmy o zestawie internetowym, takim jak przeglądarki (chrome).

Używając linuxa, możesz to zmienić, zmieniając zmienną środowiskową LANG, LC_TIMEwydaje się , że nie działa (przynajmniej dla mnie).

Możesz wpisać localeterminal, aby zobaczyć bieżące wartości. Myślę, że tę samą koncepcję można zastosować do IOS.

np .: za pomocą:

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

Data jest pokazana jako mm/dd/yyyy

Za pomocą:

LANG=pt_BR /opt/google/chrome/chrome

Data jest pokazana jako dd/mm/yyyy

Możesz użyć http://lh.2xlibre.net/locale/pt_BR/ (zmiana pt_BRwedług ustawień regionalnych), aby utworzyć własne ustawienia regionalne i sformatować daty według własnego uznania.

Bardziej zaawansowane odniesienie do zmiany domyślnej daty systemowej: https://ccollins.wordpress.com/2009/01/06/how-to-change-date-formats-on-ubuntu/ i https: // askubuntu. com / pytania / 21316 / how-can-i-customize-a-system-locale

Możesz zobaczyć swój prawdziwy format daty, używając date:

$ date +%x
01-06-2015

Ale ponieważ LC_TIMEi d_fmtwydaje się być odrzucony przez chrome (i myślę, że jest to błąd w webkicie lub chrome), niestety nie działa . : „(

Niestety odpowiedź brzmi: LANGczy zmienna środowiskowa JEŻELI nie rozwiąże problemu, nie ma jeszcze sposobu.

Przeglądarki uzyskują format wprowadzania daty z systemowego formatu daty użytkownika.

(Testowane w obsługiwanych przeglądarkach, Chrome, Edge).

Ponieważ w specyfikacji nie ma obecnie standardu zmieniającego styl kontroli daty, nie jest możliwe zaimplementowanie tego samego w przeglądarkach.

Jednak to zachowanie uzyskiwania formatu daty z ustawień systemowych jest lepsze i zdecydowanie sugeruję, że nie powinniśmy próbować go zastępować. Powodem jest to, że użytkownicy zobaczą format wprowadzania daty taki sam, jak skonfigurowany w systemie / urządzeniu i z którym czują się komfortowo lub dopasowują się do ich ustawień regionalnych.

Pamiętaj, to tylko format interfejsu użytkownika na ekranie, który użytkownicy widzą, w javascript / backend zawsze możesz zachować pożądany format.

Zobacz stronę programistów Google na tym samym.

Nie można zmienić przeglądarek internetowych korzystających z komputera użytkownika lub domyślnego formatu daty telefonu komórkowego. Ale jeśli możesz użyć interfejsu jquery i interfejsu jquery, istnieje możliwość wyboru datownika, który można ustawić i który może być wyświetlany w dowolnym formacie, jak chce deweloper. link do selektora dat interfejsu użytkownika jquery znajduje się na tej stronie http://jqueryui.com/datepicker/ można znaleźć wersję demonstracyjną, a także kod i dokumentację lub link do dokumentacji

Edycja: -Okazuje się, że chrome używa ustawień języka, które są domyślnie równe ustawieniom systemu, ale użytkownik może je zmienić, ale programista nie może zmusić użytkowników do zrobienia tego, więc musisz użyć innych rozwiązań js, takich jak mówię, że możesz przeszukiwać internet z zapytaniami takimi jak selektory dat javascript lub selektor dat jquery

znalazłem sposób na zmianę formatu, jest to trudny sposób, właśnie zmieniłem wygląd pól wprowadzania daty za pomocą tylko kodu 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">

Ponieważ post jest aktywny 2 miesiące temu. więc pomyślałem, że mogę również wnieść swój wkład.

W moim przypadku otrzymuję datę z czytnika kart w formacie dd / mm / rrrr.

co robię. Na przykład

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();">

co robi kod:

1. dzieli datę, którą otrzymuję jako dd / mm / rrrr (używając split ()) na podstawie „/” i tworzy tablicę,
2. następnie odwraca tablicę (używając reverse ()), ponieważ dane wejściowe obsługują odwrotność tego, co otrzymuję.
3. następnie łączy (za pomocą join ()) tablicę z łańcuchem zgodnie z formatem wymaganym przez pole wejściowe

Wszystko to odbywa się w jednym wierszu.

myślałem, że to komuś pomoże, więc napisałem to.

Przeszukałem ten problem 2 lata temu, a moje wyszukiwania w Google ponownie prowadzą do tego pytania. Nie marnuj czasu, próbując poradzić sobie z tym za pomocą czystego JavaScript. Marnuję czas próbując to zrobić dd/mm/yyyy. Nie ma kompletnych rozwiązań, które pasowałyby do wszystkich przeglądarek. Dlatego zalecam użycie jQuery datepicker lub zalecenie klientowi pracy z domyślnym formatem daty

Wiem, że to stary post, ale pojawia się jako pierwsza sugestia w wyszukiwarce Google, krótka odpowiedź nie, zalecana odpowiedź użytkownika niestandardowa data piker, poprawną odpowiedzią, której używam, jest użycie pola tekstowego do symulacji wprowadzania daty i wykonania dowolnego formatu, jaki chcesz , 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 - należy pamiętać, że ta metoda działa tylko w przypadku przeglądarki obsługującej typ daty.

2- pierwsza funkcja w kodzie JS jest przeznaczona dla przeglądarki, która nie obsługuje typu daty i ustawia wygląd na normalną metodę wprowadzania tekstu.

3- jeśli użyjesz tego kodu do wielokrotnego wprowadzania daty na swojej stronie, zmień ID „xTime” wpisywanego tekstu zarówno w wywołaniu funkcji, jak i samego wejścia na coś innego, i oczywiście użyj nazwy wejścia, które chcesz dla prześlij 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.