如何在HTML日期輸入標籤中設置日期格式？

我想知道是否可以在html <input type="date"></input>標記中設置日期格式......目前它是yyyy-mm-dd，而我需要它以dd-mm-yyyy格式。如何在HTML日期輸入標籤中設置日期格式？

2011-08-08 Piotr

否與HTML單獨 –

方式是不是的可能重複的[指定的HTML5輸入類型的值輸出=日期？]（http://stackoverflow.com/questions/ 3496241 /指定-HTML5輸入類型日期的值輸出）？我會說，*這個*問題*這裏*是比那個更老的問得到更好的問，但是那個*更老的*有一個很好的答案。 – Arsen7

@正式LIESSS – Griffin

我這麼認爲，在HTML中沒有DD-MM-YYYY格式的語法。請參閱此頁http://www.java2s.com/Code/SQLServer/Date-Timezone/FormatdateMmmddyyyyhhmmdp.htm。有點它會幫助你。否則使用JavaScript日期選擇器。

來源

2011-08-08 07:03:19

我不知道這是肯定的，但我認爲這應該由瀏覽器根據用戶的日期/時間設置來處理。嘗試設置您的計算機以顯示該格式的日期。

來源

2011-08-08 07:37:03

我認爲是沒有解決方案，如果使用HTML只
我認爲你應該使用jQuery的
合適的jQuery插件是jQuery Masked Input

來源

2012-05-04 12:38:40 gamehelp16

-2

實際上存在，但似乎沒有人一直困擾着來支持它。你是對的，它是<input type="date">。如果有人懷疑我。 http://www.w3schools.com/html/html5_form_input_types.asp

來源

2013-10-07 17:32:11 Griffin

對於有此響應的一方遲到，但OP已經使用'type =「date」'輸入元素，他們想知道他們是否可以調整該字段中日期的格式。 – Alex

如果你使用jQuery，這裏是一個不錯的簡單的方法

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

或者有老的傳統方式：

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

來源

2014-01-24 03:14:28

-2

日期值的格式爲'YYYY-MM-DD'。看下面的例子

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

所有你需要的是在php，asp，ruby或格式化日期格式。

來源

2015-03-09 20:22:01 Charmi

你沒有。

首先，你的問題是不明確的 - 你的意思是它向用戶顯示的格式，或者它傳輸到Web服務器的格式？

如果您的意思是它向用戶顯示的格式，那麼這取決於最終用戶界面，而不是您在HTML中指定的任何內容。通常，我希望它基於在操作系統區域設置中設置的日期格式。嘗試使用自己的首選格式覆蓋它是沒有意義的，因爲它顯示的格式（一般來說）是用戶區域設置的正確格式，以及用戶用於編寫/理解日期的格式。

如果您的意思是將其傳輸到服務器的格式，那麼您正試圖修復錯誤的問題。你需要做的是編程服務器端代碼以yyyy-mm-dd格式接受日期。

來源

2015-05-19 12:12:21 Stewart

不幸的是，你的第二個評論在現實世界中並不完全適用。一些瀏覽器，如Chrome和Opera，至少要尊重實體的順序，儘管沒有其他更多。例如，我的操作系統語言環境設置指定作爲短日期，今年8月的第一天應該是_1/8-2016_，但即使是Chrome和Opera也會顯示_01/08/2016_。其他瀏覽器，如Safari和Firefox（至少在OS X上）完全忽略操作系統設置，無論如何總是顯示_2016-08-16_。在用戶可以設置自己的日期偏好的網站上，覆蓋這一點肯定有意義。 –

（忽略關於Firefox和Safari的說明......我很累，兩個瀏覽器都根本不支持日期類型，所以它們只是顯示值的底層格式，在我當前的代碼中是YYYY-MM- DD。） –

大部分人都在問如何改變顯示/輸入日期格式，希望用戶能夠設置自己的偏好，或在世界上創建他們自己喜歡的日期格式？正如我所說，後者是沒有人應該做的，但是你可以以任何一種方式論證前者是否合適。但它會是一個表現性的設置，因此超出了HTML的範圍。 – Stewart

我發現同樣的問題或計算器上的相關問題，

有什麼辦法來改變輸入類型=「日期」格式？

我發現一個簡單的解決方案，你不能給粒子格式，但你可以自定義這樣。

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>

CSS代碼：

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

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

輸出：

來源

2015-09-02 08:48:33

更好 - 使用css來定位一個透明的日期控制定期輸入 –

感謝您的回覆，如果您有任何鏈接或此代碼，我需要更新 –

這是一個不錯的選擇。 –

爲什麼不使用HTML5的日期控件，因爲它是與允許它工作在支持日期類型的瀏覽器確定，仍然工作在其他瀏覽器如Firefox是還支持最新型

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

來源

2016-07-06 16:23:12

–

需求顯然是，我引用 - 「我需要它在dd-mm-yyyy格式。」這有什麼幫助？ –

其他屬性乾淨的實現沒有依賴關係。 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>

來源

2017-01-11 19:32:20

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

來源

2017-07-31 07:20:31

感謝您使用此代碼段，這可能會提供一些即時幫助。通過展示*爲什麼*這是一個很好的解決方案，對未來的讀者會有更好的解決方案，這將爲它的教育價值提供一個合適的解釋[//大大提高]（// meta.stackexchange.com/q/114762）但不完全相同的問題。請編輯您的答案以添加解釋，並指出適用的限制和假設。 –

如何在HTML日期輸入標籤中設置日期格式？

回答

相關問題