2011-08-08 9 views
85

Zastanawiam się, czy możliwe jest ustawienie formatu daty w tagu html <input type="date"></input> ... Obecnie jest to rrrr-mm-dd, a potrzebuję go w formacie dd-mm-rrrr.Jak ustawić format daty w tagu wprowadzania danych HTML?

+2

Nie ma mowy o HTML sam –

+3

Czy nie jest to możliwe duplikat [Określanie wartości wyjścia z wejściem typu HTML5 = termin?] (Http://stackoverflow.com/questions/ 3496241/określanie-wartość-wyjściowa-of-of-an-html5-input-type-date)? Powiedziałbym, że * to * pytanie * tutaj * jest lepiej zadawane niż to starsze, ale to * starsze * jedno ma całkiem dobrą odpowiedź. – Arsen7

+0

@Positive LIESSS – Griffin

Odpowiedz

1

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

21

myślę, że nie jest żadnym rozwiązaniem, jeśli przy użyciu HTML tylko
myślę, że należy użyć jQuery
odpowiedni plugin jquery Jest jQuery Masked Input

-2

rzeczywiście jest, ale wydaje się, że nikt nie przeszkadza, aby go wesprzeć. Masz rację, to jest <input type="date">. Na wypadek, gdyby ktoś mnie wątpił. http://www.w3schools.com/html/html5_form_input_types.asp

+4

Spóźniony do strony z tą odpowiedzią, ale OP używa już elementu 'type =" date "' input, zastanawiał się, czy może dostosować format daty w tym polu. – Alex

5

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

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

Albo tam stary tradycyjny sposób:

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

format wartości data jest '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, co potrzebne jest do formatowania daty w PHP, ASP, rubin czy cokolwiek mieć taki format.

9

Nie.

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

Jeśli masz na myśli format, w jakim jest wyświetlany użytkownikowi, to jest to interfejs użytkownika końcowego, a nie wszystko, co określasz w kodzie HTML. Zwykle spodziewam się, że będzie on oparty na formacie daty ustawionym w ustawieniach regionalnych systemu operacyjnego. Nie ma sensu próbować przesłonić go własnym preferowanym formatem, ponieważ format, w którym jest wyświetlany, jest (ogólnie rzecz biorąc) prawidłowy dla lokalizacji użytkownika i formatu używanego przez użytkownika do pisania/interpretowania dat.

Jeśli chodzi o format, w jakim jest przesyłany na serwer, próbujesz naprawić niewłaściwy problem. Musisz zaprogramować kod po stronie serwera, aby akceptował daty w formacie rrrr-mm-dd.

+0

Niestety, twój drugi komentarz nie jest całkiem prawdziwy w prawdziwym świecie. Niektóre przeglądarki, takie jak Chrome i Opera, przynajmniej respektują _order_ z bytów, ale nic poza tym. Na przykład moje ustawienia regionalne systemu operacyjnego określają, że w krótkim terminie pierwszy dzień sierpnia tego roku powinien mieć wartość _1/8-2016_, ale nawet Chrome i Opera wyświetlają _01/08/2016_. Inne przeglądarki, takie jak Safari i Firefox (przynajmniej w systemie 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 to znaczenie. –

+0

(Zignoruj ​​notatkę o Firefoksie i Safari ... Jestem zmęczony, żadna z przeglądarek nie obsługuje typu daty, więc pokazują tylko podstawowy format wartości, który w przypadku mojego obecnego kodu to RRRR-MM- DD.) –

+0

Czy większość osób pyta, jak zmienić format daty wyświetlania/wprowadzania danych, aby umożliwić użytkownikom ustawianie własnych preferencji lub aby zadawali sobie własne preferowane formaty dat na świecie? To ostatnie jest czymś, czego nikt nie powinien robić, jak już powiedziałem, ale można się spierać, czy ten pierwszy jest odpowiedni. Ale byłoby to ustawienie prezentacji, więc poza zakresem HTML. – Stewart

10

znalazłem to samo pytanie lub powiązane pytanie na stackoverflow

Czy jest jakiś sposób aby zmienić input type = Format „data”?

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

HTML kod: Kod

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

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ściowa:

enter image description here

+0

Jeszcze lepiej - użyj css do ustawienia przezroczystej kontroli daty na zwykłym wejściu. –

+0

Dzięki za odpowiedź, jeśli masz jakieś łącze lub kod, muszę zaktualizować –

+0

Jest to świetna opcja. –

1

Dlaczego nie skorzystać z kontroli datę html5 jak to jest w przypadku innych atrybutów, które pozwala pracować ok w przeglądarkach obsługujących datę typ i nadal działa na innych przeglądarkach takich jak Firefox, która jest jeszcze do wspierania Data Typ

<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"/> 
+0

+4

Wymóg był wyraźnie, cytuję: "Potrzebuję go w formacie dd-mm-rrrr". Jak to pomaga? –

0

Czysta implementacja bez żadnych 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> 
1
$('input[type="date"]').change(function(){ 
    alert(this.value.split("-").reverse().join("-")); 
}); 
+2

Dziękujemy za ten fragment kodu, który może zapewnić natychmiastową pomoc. Właściwe wyjaśnienie [znacznie się poprawi] (// meta.stackexchange.com/q/114762) jego wartość edukacyjna poprzez pokazanie * dlaczego * jest to dobre rozwiązanie problemu i sprawiłoby, że byłoby ono bardziej użyteczne dla przyszłych czytelników z podobnymi, ale nie identyczne, pytania. Proszę [edytuj] swoją odpowiedź, aby dodać wyjaśnienie i podać, jakie ograniczenia i założenia mają zastosowanie. –