Ik werk met HTML5-elementen op mijn webpagina. Standaard invoer type="date"toont de datum als YYYY-MM-DD.
De vraag is, is het mogelijk om het formaat te veranderen in iets als: DD-MM-YYYY?
Antwoord 1, autoriteit 100%
Het is onmogelijk om het formaat te wijzigen
We moeten onderscheid maken tussen het over-the-wire formaat en het presentatieformaat van de browser.
Draadformaat
De HTML5-specificatie voor datuminvoerverwijst naar de RFC 3339-specificatie, die een volledige datumnotatie specificeert die gelijk is aan: yyyy-mm-dd. Zie sectie 5.6van de RFC 3339-specificatie voor meer details.
Deze indeling wordt gebruikt door het HTML-kenmerk valueen de DOM-eigenschap en wordt gebruikt bij het indienen van een gewoon formulier.
Presentatieformaat
Browsers zijn onbeperkt in de manier waarop ze een datuminvoer presenteren. Op het moment van schrijven hebben Chrome, Edge, Firefox en Opera datumondersteuning (zie hier). Ze geven allemaal een datumkiezer weer en formatteren de tekst in het invoerveld.
Desktop-apparaten
Voor Chrome, Firefox en Opera is de opmaak van de tekst van het invoerveld gebaseerd op de taalinstelling van de browser. Voor Edge is het gebaseerd op de taalinstelling van Windows. Helaas negeren alle webbrowsers de datumnotatie die in het besturingssysteem is geconfigureerd. Voor mij is dit heel vreemd gedrag en iets om rekening mee te houden bij het gebruik van dit invoertype. Zo zullen Nederlandse gebruikers die hun besturingssysteem of browsertaal hebben ingesteld op en-us01/30/2019te zien krijgen in plaats van het formaat dat ze gewend zijn: 30-01-2019.
Internet Explorer 9, 10 en 11 geven een tekstinvoerveld weer met het draadformaat.
Mobiele apparaten
Specifiek voor Chrome op Android is de opmaak gebaseerd op de Android-weergavetaal. Ik vermoed dat hetzelfde geldt voor andere browsers, hoewel ik dit niet heb kunnen verifiëren.
Antwoord 2, autoriteit 24%
Sinds deze vraag is gesteld, zijn er nogal wat dingen gebeurd op het gebied van internet, en een van de meest opwindende is de landing van web componenten. Nu kunt u dit probleem elegant oplossen met een aangepast HTML5-elementdat is ontworpen om aan uw behoeften te voldoen. Als je de werking van een html-tag wilt overschrijven/wijzigen, bouw dan gewoon de jouwe door te spelen met de schaduw-dom.
Het goede nieuws is dat er al veel standaardtekst beschikbaar is, dus waarschijnlijk hoef je niet helemaal opnieuw een oplossing te bedenken. Gewoon controleerwat mensen bouwen en haal daar ideeën op.
Je kunt beginnen met een eenvoudige (en werkende) oplossing zoals datetime-inputvoor polymeer waarmee je een tag zoals deze kunt gebruiken:
<date-input date="{{date}}" timezone="[[timezone]]"></date-input>
of je kunt creatieve en pop-up complete date-pickers in je eigen stijl krijgen wens, met de opmaak en landinstellingen die je wenst, callbacks en je lange lijst met opties (je hebt een hele aangepaste API tot je beschikking!)
Voldoet aan de normen, geen hacks.
Controleer de beschikbare polyfills, wat browsers/versiesdie ze ondersteunen, en als het voldoende % van uw gebruikersbestand dekt… Het is 2018, dus de kans is groot dat het de meeste van uw gebruikers zal dekken .
Hopelijk helpt het!
Antwoord 3, autoriteit 15%
Zoals eerder vermeld is het officieel niet mogelijk om het formaat te wijzigen. Het is echter mogelijk om het veld op te maken, zodat (met een beetje JS-hulp) de datum wordt weergegeven in een door ons gewenst formaat. Sommige mogelijkheden om de datuminvoer te manipuleren gaan op deze manier verloren, maar als de wens om het formaat te forceren groter is, kan deze oplossing een manier zijn. Een datumveld blijft alleen zo:
<input type="date" data-date="" data-date-format="DD MMMM YYYY" value="2015-08-09">
De rest is een beetje CSS en 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">Antwoord 4, autoriteit 8%
Het is belangrijk om twee verschillende formaten te onderscheiden:
- Het RFC 3339/ISO 8601 “draadformaat”: JJJJ-MM-DD. Volgens de HTML5-specificatie is dit het formaat dat moet worden gebruikt voor de waarde van de invoer bij het indienen van het formulier of op verzoek via de DOM API. Het is land- en regio-onafhankelijk.
- Het formaat dat wordt weergegeven door de gebruikersinterface en wordt geaccepteerd als gebruikersinvoer. Browserleveranciers worden aangemoedigd om de voorkeuren van de gebruiker te selecteren. Bijvoorbeeld, op Mac OS met de regio “Verenigde Staten” geselecteerd in de Taal & Deelvenster Tekstvoorkeuren, Chrome 20 gebruikt de indeling “m/d/yy”.
De HTML5-specificatie bevat geen enkele manier om een van beide formaten te overschrijven of handmatig te specificeren.
Antwoord 5, autoriteit 2%
Ik denk dat de browser de lokale datumnotatie zal gebruiken. Denk niet dat het mogelijk is om te veranderen. Je kunt natuurlijk een aangepaste datumkiezer gebruiken.
Antwoord 6, autoriteit 2%
Ik heb een manier gevonden om het formaat te wijzigen, het is een lastige manier, ik heb zojuist het uiterlijk van de datuminvoervelden gewijzigd met alleen een CSS-code.
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">Antwoord 7, autoriteit 2%
Google Chrome gebruikt in de laatste bètaversie eindelijk de invoer type=dateen de indeling is DD-MM-YYYY.
Er moet dus een manier zijn om een specifiek formaat te forceren. Ik ben een HTML5-webpagina aan het ontwikkelen en de datumzoekacties mislukken nu met verschillende indelingen.
Antwoord 8
Na veel discussies te hebben gelezen, heb ik een eenvoudige oplossing voorbereid, maar ik wil niet veel JQuery en CSS gebruiken, alleen wat javascript.
HTML-code:
<input type="date" id="dt" onchange="mydate1();" hidden/>
<input type="text" id="ndt" onclick="mydate();" hidden />
<input type="button" Value="Date" onclick="mydate();" />
CSS-code:
#dt {
text-indent: -500px;
height: 25px;
width: 200px;
}
Javascript-code:
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;
}
Uitvoer:
Antwoord 9
Probeerdit als je een snelle oplossingnodig hebt om jjjj-mm-dd “dd-sep -2016” te laten gaan
1) Maak in de buurt van uw invoer één span-klasse (werk als label)
2) Werk het label bij elke keer dat uw datum door de gebruiker wordt gewijzigd, of wanneer u moet worden geladen van gegevens.
Works voor Webkit-browser Mobiles en Pointer-Events voor IE11 + vereist JQuery en 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="https://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>Antwoord 10
Zoals gezegd, de ingangstype <input type=date ... >wordt niet volledig geïmplementeerd in de meeste browsers, dus laten we het hebben over Webkit zoals browsers (Chrome).
Gebruik Linux, u kunt het wijzigen door de omgevingsvariabele te wijzigen LANG, LC_TIMELIJKT NIET TE WERKEN (voor mij tenminste).
U kunt localein een terminal typen om uw huidige waarden te bekijken. Ik denk dat hetzelfde concept kan worden toegepast op iOS.
bijvoorbeeld:
Gebruiken:
LANG=en_US.UTF-8 /opt/google/chrome/chrome
De datum wordt weergegeven als mm/dd/yyyy
Gebruik:
LANG=pt_BR /opt/google/chrome/chrome
De datum wordt weergegeven als dd/mm/yyyy
U kunt http://lh.2xlibre.net/locale/pt_BR/(verander pt_BRdoor uw landinstelling) om uw eigen aangepaste landinstelling te maken en uw datums op te maken zoals u wilt.
Een mooie, meer geavanceerde referentie over hoe de standaard systeemdatum verandert:
https://ccollins.wordpress .com/2009/01/06/how-to-change-date-formats-on-ubuntu/
en
https://askubuntu.com/questions/21316/how-can-i- een systeem-locale aanpassen
Je kunt je huidige datumnotatie zien met date:
$ date +%x
01-06-2015
Maar aangezien LC_TIMEen d_fmtlijken te worden afgewezen door chrome (en ik denk dat het een bug in webkit of chrome is), is het helaas niet werkt niet. :'(
Dus helaas is de reactie, ALS de omgevingsvariabele LANGuw probleem niet oplost, is er nog geen manier.
Antwoord 11
Browsers halen het datum-invoerformaat uit het systeemdatumformaat van de gebruiker.
(Getest in ondersteunde browsers, Chrome, Edge.)
Omdat er op dit moment geen standaard is gedefinieerd door specificaties om de stijl van datumcontrole te wijzigen, is het niet mogelijk om hetzelfde in browsers te implementeren.
Gebruikers kunnen een datumwaarde typen in het tekstveld van een ingang [Type = Datum] met het datumformaat dat in de doos wordt weergegeven als grijze tekst. Dit formaat wordt verkregen van de instelling van het besturingssysteem. Webauteurs hebben geen manier om het datumformaat te wijzigen, omdat er momenteel geen normen zijn om het formaat op te geven.
Dus Niet nodig om het te wijzigen, als we niets veranderen, zullen gebruikers het formaat van de datum-ingang hetzelfde zien als ze hebben geconfigureerd in de instellingen van het systeem / apparaat en waarmee ze zich comfortabel voelen of overeenkomt met hun locale.
Vergeet niet, dit is slechts het UI-formaat op het scherm dat gebruikers zien, in uw JavaScript / backend, kunt u altijd uw gewenste formaat bewaren om mee te werken.
Verwijst de pagina Google ontwikkelaars op hetzelfde.
Antwoord 12
Ik heb dit probleem 2 jaar geleden doorzocht, en mijn Google-zoekopdrachten leiden me opnieuw naar deze vraag.
Verspil geen tijd om dit te proberen met Pure JavaScript. Ik verspil mijn tijd om het te maken dd/mm/yyyy. Er zijn geen complete oplossingen die bij alle browsers passen. Dus ik raad aan jQueryDATEPICKER / momentjs of vertel uw klant om in plaats daarvan met de standaarddatumformaat te werken
Antwoord 13
Het is niet mogelijk om websetbrowsers te wijzigen, gebruik de standaarddatumformaat van de gebruiker of mobiele telefoons.
Maar als je jQuery en jQuery UI kunt gebruiken, is er een datum-picker die duidelijk is en in elk formaat kan worden getoond als de ontwikkelaar wil.
De link naar de JQuery UI-datum-picker is
op deze pagina http://jqueryui.com/datepicker/vindt u zowel een demo als code en documentatie of documentatielink
Bewerken: – ik vind dat Chrome taalinstellingen gebruikt die standaard gelijk zijn aan systeeminstellingen, maar de gebruiker kan ze wijzigen, maar de ontwikkelaar kan gebruikers niet dwingen dit te doen, dus je moet andere js-oplossingen gebruiken, zoals ik je zeg dat kan zoek op internet met zoekopdrachten zoals javascript date-pickers of jquery date-picker
Antwoord 14
Sinds het bericht 2 maanden geleden actief is. dus ik dacht om ook mijn input te geven.
In mijn geval ontvang ik de datum van een kaartlezer in de indeling dd/mm/jjjj.
wat ik doe.
Bijv.
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();">Antwoord 15
Ik heb de code van Miguelaangepast om het begrijpelijker te maken
en ik wil het delen met mensen die problemen hebben zoals ik.
Probeer dit op een gemakkelijke en snelle manier
$("#datePicker").on("change", function(e) {
displayDateFormat($(this), '#datePickerLbl', $(this).val());
});
function displayDateFormat(thisElement, datePickerLblId, dateValue) {
$(thisElement).css("color", "rgba(0,0,0,0)")
.siblings(`${datePickerLblId}`)
.css({
position: "absolute",
left: "10px",
top: "3px",
width: $(this).width()
})
.text(dateValue.length == 0 ? "" : (`${getDateFormat(new Date(dateValue))}`));
}
function getDateFormat(dateValue) {
let d = new Date(dateValue);
// this pattern dd/mm/yyyy
// you can set pattern you need
let dstring = `${("0" + d.getDate()).slice(-2)}/${("0" + (d.getMonth() + 1)).slice(-2)}/${d.getFullYear()}`;
return dstring;
}.date-selector {
position: relative;
}
.date-selector>input[type=date] {
text-indent: -500px;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="date-selector">
<input id="datePicker" class="form-control" type="date" onkeydown="return false" />
<span id="datePickerLbl" style="pointer-events: none;"></span>
</div>Antwoord 16
Ik weet dat het een oud bericht is, maar het komt als eerste suggestie in Google Zoeken, kort antwoord nee, aanbevolen antwoord gebruiker een aangepaste datumpiker, het juiste antwoord dat ik gebruik, is een tekstvak gebruiken om de datuminvoer te simuleren en elke formaat dat je wilt, hier is de code
<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">▼</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- houd er rekening mee dat deze methode alleen werkt voor browsers die het datumtype ondersteunen.
2- de eerste functie in JS-code is voor browsers die het datumtype niet ondersteunen en het uiterlijk instellen op normale tekstinvoer.
3- als u deze code voor meerdere datuminvoeren op uw pagina wilt gebruiken, verander dan de ID “xTime” van de tekstinvoer in zowel de functieaanroep als de invoer zelf in iets anders en gebruik natuurlijk de naam van de invoer die u wilt voor het formulier indienen.
4-op de tweede functie kunt u elk gewenst formaat gebruiken in plaats van dag+” / “+maand+” / “+jaar bijvoorbeeld jaar+” / “+maand+” / “+dag en in de tekstinvoer een tijdelijke aanduiding gebruiken of waarde als jjjj / mm / dd voor de gebruiker wanneer de pagina wordt geladen.
Antwoord 17
Met dank aan @safi eddineen @Hezbullah Shah
Datepicker met VanillaJS en CSS.
CSS – STIJL:
/*================== || Date Picker ||=======================================================================================*/
/*-------Removes the // Before dd - day------------------------*/
input[type="date"]::-webkit-datetime-edit-text
{
color: transparent;
}
/*------- DatePicker ------------------------*/
input[type="date"] {
background-color: aqua;
border-radius: 4px;
border: 1px solid #8c8c8c;
font-weight: 900;
}
/*------- DatePicker - Focus ------------------------*/
input[type="date"]:focus
{
outline: none;
box-shadow: 0 0 0 3px rgba(21, 156, 228, 0.4);
}
input[type="date"]::-webkit-datetime-edit, input[type="date"]::-webkit-inner-spin-button, input[type="date"]::-webkit-clear-button {
color: #fff;
position: relative;
}
/*------- Year ------------------------*/
input[type="date"]::-webkit-datetime-edit-year-field {
position: absolute !important;
border-left: 1px solid #8c8c8c;
padding: 2px;
color: #000;
left: 56px;
}
/*------- Month ------------------------*/
input[type="date"]::-webkit-datetime-edit-month-field {
position: absolute !important;
border-left: 1px solid #8c8c8c;
padding: 2px;
color: #000;
left: 26px;
}
/*------- Day ------------------------*/
input[type="date"]::-webkit-datetime-edit-day-field {
position: absolute !important;
color: #000;
padding: 2px;
left: 4px;
}
JAVASCRIPT:
// ================================ || Format Date Picker || ===========================================================
function GetFormatedDate(datePickerID)
{
let rawDate = document.getElementById(datePickerID).value; // Get the Raw Date
return rawDate.split('-').reverse().join("-"); // Reverse the date
}
GEBRUIK:
document.getElementById('datePicker').onchange = function () { alert(GetFormatedDate('datePicker')); }; // The datepickerID