Czy jest jakiś sposób na zmianę formatu input type = "date"?

Ponieważ to pytanie zostało zadane sporo rzeczy wydarzyło się w sferze internetowej, a jedną z najbardziej ekscytujących jest lądowanie komponentów internetowych . Teraz możesz rozwiązać ten problem elegancko za pomocą niestandardowego elementu HTML5 zaprojektowanego zgodnie z Twoimi potrzebami. Jeśli chcesz nadpisać / zmienić działanie dowolnego znacznika html po prostu Zbuduj swój dom Shadow .

Dobrą wiadomością jest to, że jest już dużo kotłów dostępnych, więc najprawdopodobniej nie będziesz musiał wymyśl rozwiązanie od podstaw. Po prostu sprawdź co ludzie budują i zdobądź pomysły stamtąd.

Możesz zacząć od prostego (i działającego) rozwiązania, takiego jak datetime-input dla polimeru, które pozwala na użycie znacznika takiego jak ten:

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

Zgodny ze standardami, bez hacków.

Sprawdź dwukrotnie dostępne polyfills , Jakie przeglądarki/wersje obsługują, i jeśli pokrywa ona wystarczająco dużo % Twojej bazy użytkowników ... jest rok 2018, więc są szanse, że na pewno pokryje większość twoich użytkowników.

Jak wcześniej wspomniano, oficjalnie nie jest możliwe, aby zmienić format. Możliwe jest jednak stylizowanie pola, więc (z niewielką pomocą JS) wyświetla datę w pożądanym przez nas formacie. Niektóre możliwości manipulowania wprowadzaniem daty są tracone w ten sposób, ale jeśli chęć wymusić format jest większa, To rozwiązanie może być sposobem. Pole daty pozostaje tylko w ten sposób:

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

To działa ładnie na Chrome na pulpit, i Safari na iOS (szczególnie pożądane, ponieważ natywne manipulatory daty na ekranach dotykowych są bezkonkurencyjne IMHO). Nie sprawdzałem innych, ale nie spodziewaj się porażki na żadnym 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 musi być używany dla wartości wejściowej po przesłaniu formularza lub na żądanie za pośrednictwem API DOM. Jest niezależna od lokalnych i regionalnych regionów.
• format wyświetlany przez kontrolkę interfejsu użytkownika i akceptowany jako wejście użytkownika. Dostawcy przeglądarek są zachęcani do śledzenia wyboru preferencji użytkownika. Na na przykład w systemie Mac OS z zaznaczonym regionem "Stany Zjednoczone" w okienku preferencje język i tekst Chrome 20 używa formatu "m / d / yy".

Specyfikacja HTML5 nie zawiera żadnych sposobów nadpisywania lub ręcznego określania dowolnego formatu.

Wierzę, że przeglądarka będzie używać Lokalnego formatu daty. Nie myśl, że można to zmienić. Możesz oczywiście użyć niestandardowego selektora daty.

Po wielu przeszkodach, wymyśliłem rozwiązanie, które pozwala zmienić format. Istnieje kilka zastrzeżeń, ale jest to użyteczne, jeśli chcesz, aby 'Jan' lub '01' wyświetlane konsekwentnie. Działa w Chrome na Windows i Mac tylko ze względu na fakt, że Firefox nie obsługuje jeszcze natywnych selektorów dat.

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

Google Chrome w swojej ostatniej wersji beta w końcu wykorzystuje wejście type=date, a format to DD-MM-YYYY.

Więc musi być sposób, aby wymusić określony format. Rozwijam stronę internetową HTML5 i wyszukiwanie daty nie powiodło się z różnymi formatami.

Spróbuj to, jeśli potrzebujesz szybkiego rozwiązania , aby zrobić RRRR-mm-dd idź "dd-Sep -2016"

1) Utwórz w pobliżu wejścia jedną klasę span (act as label)

2) Aktualizuj etykietę za każdym razem, gdy data jest zmieniana przez użytkownika lub gdy trzeba załadować dane.

Działa na telefony komórkowe przeglądarki webkit i pointer-events 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>

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

Używając Linuksa, możesz go zmienić zmieniając zmienną środowiskowąLANG, LC_TIME nie wydaje się działać(przynajmniej dla mnie).

Możesz wpisać locale W Terminalu, aby zobaczyć bieżące wartości. Myślę, że to samo pojęcie można zastosować do IOS.

Eg: Użycie:

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

Data jest pokazywana jako mm/dd/yyyy

Użycie:

LANG=pt_BR /opt/google/chrome/chrome

Data jest pokazywany jako dd/mm/yyyy

Możesz użyć http://lh.2xlibre.net/locale/pt_BR/ (Zmień {[9] } według ustawień regionalnych), aby utworzyć własne niestandardowe ustawienia regionalne i sformatować daty, jak chcesz.

Ładne bardziej zaawansowane odniesienie jak zmienić domyślną datę systemową jest: https://ccollins.wordpress.com/2009/01/06/how-to-change-date-formats-on-ubuntu/ oraz https://askubuntu.com/questions/21316/how-can-i-customize-a-system-locale

You can see you real current format daty za pomocą date:

$ date +%x
01-06-2015

Ale jako LC_TIME i d_fmt wydaje się być odrzucony przez chrome (I myślę, że to błąd w webkit lub chrome), niestety to nie działa.. :'(

Tak więc, niestety odpowiedź jest taka, że jeśli LANG zmienna środowiskowa nie rozwiąże Twojego problemu, nie ma jeszcze możliwości.

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

Wyjście:

Nie można zmienić przeglądarki web-kit używać domyślnego formatu daty na komputerze lub telefonie komórkowym użytkownika. Ale jeśli możesz używać jquery i jQuery ui, istnieje próbnik daty, który można zaprojektować i może być wyświetlany w dowolnym formacie, jak chce deweloper. link do jQuery ui date-picker to na tej stronie http://jqueryui.com/datepicker / można znaleźć demo, a także kod i dokumentację lub link do dokumentacji Jeśli ktoś chce dalszej pomocy, może połączyć mnie z najlepszą siecią społecznościową http://www.funnenjoy.com

Edit: - uważam, że chrome używa ustawień językowych, które są domyślnie równe ustawieniom systemowym, ale użytkownik może je zmienić, ale deweloper nie może zmusić użytkowników do tego, więc musisz użyć innych rozwiązań js, takich jak mówię, że możesz wyszukiwać w Internecie za pomocą zapytań, takich jak javascript date-pickers lub jQuery date-picker

Przeglądarki pobierają format daty wejścia z systemowego formatu daty użytkownika.

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

Ponieważ obecnie nie ma standardu zdefiniowanego przez specyfikacje, aby zmienić styl kontroli daty, nie jest możliwe zaimplementowanie tego samego w przeglądarkach.

Jednak takie zachowanie uzyskiwania formatu daty z ustawień systemowych jest lepsze i zdecydowanie sugeruję, że nie powinniśmy próbować go nadpisywać. Powodem jest to, że użytkownicy zobaczą data - format danych wejściowych taki sam, jaki zostały skonfigurowane w systemie / urządzeniu i z którym są wygodne lub pasuje do ich ustawień regionalnych.

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

Poleć stronę programistów google na tym samym.

Wiem, że to stary post, ale jest to pierwsza sugestia w wyszukiwarce google, krótka odpowiedź nie, polecany użytkownik odpowiedzi Niestandardowy piker daty, poprawna odpowiedź, której używam, to użycie pola tekstowego do symulacji wprowadzania daty i zrobić dowolny format, 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 dla przeglądarek, które obsługują Typ daty.

2-Pierwsza funkcja w kodzie JS jest dla przeglądarki, która nie obsługuje typu daty i ustawia wygląd na zwykły tekst wejście.

3-Jeśli chcesz użyć tego kodu do wielu wprowadzania daty na swojej stronie, Zmień ID "xTime" tekstu wprowadzanego zarówno w wywołaniu funkcji, jak i w samym wejściu na coś innego i oczywiście użyj nazwy wejścia, które chcesz dla formularza wyślij.

4-na drugiej funkcji możesz użyć dowolnego formatu zamiast dnia + " / "+ miesiąca+ " / " +roku na przykład Rok+" / "+Miesiąc+" / "+Dzień i w tekście wprowadź symbol zastępczy lub wartość jako RRRR / MM / dd dla użytkownika, gdy ładowanie strony.

function dmy() {
  var mydate = document.getElementById('dat').value;
  //alert(mydate);
  var yf = mydate.split("-")[0];
  var mf = mydate.split("-")[1];
  var df = mydate.split("-")[2];

  var b = localStorage.getItem("b");
  if (!b) {
    b = [];
  } else {
    b = JSON.parse(b);

  }
  b.push({
    df: df,
    mf: mf,
    yf: yf
  });

  localStorage.setItem("b", JSON.stringify(b));
}

function showdate() {
  var sdate = JSON.parse(localStorage.getItem('b'));
  var a = '';
  if (sdate != null) {
    for (var i = 0; i < sdate.length; i++) {
      a += sdate[i]['df'] + '/' + sdate[i]['mf'] + '/' + sdate[i]['yf'] + '<br>';

    }
  } else {
    a = 'No DATA';
  }
  document.getElementById('conversion').innerHTML = a;
}

<form onsubmit=dmy()>
  <input type="date" name="dat" id="dat">
  <input type="submit" value="submit">
</form>
<input type="button" value="convert" onclick=showdate()>
<div id="conversion"></div>

Format selektora daty HTML5 zależy od formatu formatu daty maszyny serwerowej.

Więc można go zmienić, zmieniając format na serwerze wdrażania w pasku zadań..