默認(rèn)情況下，輸入類型= & quot日期& quot將日期顯示為年-月-日。

問題是，有沒有可能將它的格式強(qiáng)制為類似于:DD-MM-YYYY？

改變格式是不可能的

我們必須區(qū)分網(wǎng)絡(luò)格式和瀏覽器的顯示格式。

有線格式 HTML5日期輸入規(guī)范參考了RFC 3339規(guī)范，它指定了一個(gè)完整的日期格式，等于:yyyy-mm-dd。更多細(xì)節(jié)請參見RFC 3339規(guī)范的第5.6節(jié)。

這種格式由value HTML屬性和DOM屬性使用，也是進(jìn)行普通表單提交時(shí)使用的格式。

演示格式 瀏覽器顯示日期輸入的方式不受限制。在編寫Chrome的時(shí)候，Edge、Firefox和Opera都有日期支持(見此)。它們都顯示一個(gè)日期選擇器，并格式化輸入字段中的文本。

桌面設(shè)備

對于Chrome、Firefox和Opera，輸入字段文本的格式基于瀏覽器的語言設(shè)置。對于Edge，它基于Windows語言設(shè)置。遺憾的是，所有web瀏覽器都忽略了操作系統(tǒng)中配置的日期格式。對我來說，這是非常奇怪的行為，也是使用這種輸入類型時(shí)需要考慮的事情。例如，將操作系統(tǒng)或?yàn)g覽器語言設(shè)置為en-us的荷蘭用戶將顯示01/30/2019，而不是他們習(xí)慣的格式:30-01-2019。

Internet Explorer 9、10和11以有線格式顯示文本輸入字段。

移動(dòng)設(shè)備

具體到Android上的Chrome，格式是基于Android顯示語言的。我懷疑其他瀏覽器也是如此，盡管我無法證實(shí)這一點(diǎn)。

自從這個(gè)問題被提出后，web領(lǐng)域發(fā)生了很多事情，其中最令人興奮的是web組件的登陸。現(xiàn)在，您可以使用一個(gè)定制的HTML5元素來很好地解決這個(gè)問題，該元素旨在滿足您的需求。如果你想覆蓋/改變?nèi)魏蝖tml標(biāo)簽的工作方式，只需使用影子dom構(gòu)建你的標(biāo)簽即可。

好消息是已經(jīng)有很多樣板文件可用，所以很可能你不需要從頭開始想出一個(gè)解決方案。只要看看人們在做什么，然后從中獲得靈感。

您可以從一個(gè)簡單的(并且可行的)解決方案開始，比如針對polymer的datetime-input，它允許您使用這樣的標(biāo)記:

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

或者，您可以根據(jù)自己的意愿，使用您想要的格式和區(qū)域設(shè)置、回調(diào)和長長的選項(xiàng)列表(您已經(jīng)擁有了一個(gè)完整的自定義API！)

符合標(biāo)準(zhǔn)，沒有黑客攻擊。

仔細(xì)檢查可用的polyfills，它們支持什么瀏覽器/版本，如果它覆蓋了你的用戶群的足夠%的話…現(xiàn)在是2018年，所以它肯定會(huì)覆蓋你的大多數(shù)用戶。

希望有幫助！

如前所述，官方不可能改變格式。然而，可以對字段進(jìn)行樣式化，因此(在JS的幫助下),它以我們想要的格式顯示日期。這種方式失去了操作日期輸入的一些可能性，但是如果想要強(qiáng)制使用格式，這種解決方案可能是一種方法。日期字段只能保持這樣:

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

剩下的就是一點(diǎn)CSS和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">

區(qū)分兩種不同的格式很重要:

RFC 3339/ISO 8601“電報(bào)格式”:YYYY-MM-DD。根據(jù)HTML5規(guī)范，這是表單提交時(shí)或通過DOM API請求時(shí)必須用于輸入值的格式。它獨(dú)立于語言環(huán)境和地區(qū)。 由用戶界面控件顯示并作為用戶輸入接受的格式。我們鼓勵(lì)瀏覽器供應(yīng)商遵循用戶的偏好選擇。例如，在Mac OS上，在語言& amp文本偏好設(shè)置窗格，Chrome 20使用的格式是“m/d/yy”。 HTML5規(guī)范不包括任何覆蓋或手動(dòng)指定任一格式的方法。

我找到了一種改變格式的方法，這是一種巧妙的方法，我只用一段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">

我相信瀏覽器會(huì)使用本地日期格式。不要認(rèn)為有可能改變。你當(dāng)然可以使用定制的日期選擇器。

上一個(gè)測試版的Google Chrome終于使用了輸入類型=日期，格式為DD-MM-YYYY。

所以一定有辦法強(qiáng)制特定格式。我正在開發(fā)一個(gè)HTML5網(wǎng)頁，日期搜索現(xiàn)在由于格式不同而失敗。

我兩年前搜索過這個(gè)問題，我的谷歌搜索又把我?guī)У搅诉@個(gè)問題上。 不要浪費(fèi)時(shí)間試圖用純JavaScript來處理這個(gè)問題。我浪費(fèi)了時(shí)間試圖使它成為dd/mm/ yyyy。沒有適合所有瀏覽器的完整解決方案。所以我建議使用momentJS / jQuery datepicker，或者告訴您的客戶端使用默認(rèn)的日期格式

瀏覽器從用戶的系統(tǒng)日期格式中獲取日期輸入格式。

(在支持的瀏覽器中測試，Chrome，Edge & amp火狐。)

由于目前還沒有規(guī)范定義的標(biāo)準(zhǔn)來改變?nèi)掌诳丶臉邮剑栽跒g覽器中實(shí)現(xiàn)同樣的功能是不可能的。

用戶可以在輸入的文本字段中鍵入日期值

如果上面不行，你可以在chrome里試試下面:

要在Chrome中更改格式(例如，從US & quot月/日/年& quot到 "日/月/年& quot)你去& gt設(shè)置& gt高級(jí)& gt添加語言(選擇 英語英國)。然后:瀏覽器 重新啟動(dòng)，您會(huì)發(fā)現(xiàn)日期輸入字段如下所示: 25/01/2022

參考谷歌開發(fā)者頁面。

WHATWG git hub在same上查詢

使用以下日期輸入進(jìn)行測試:

<input type="date" id="dob" value=""/>

在閱讀了大量的討論之后，我準(zhǔn)備了一個(gè)簡單的解決方案，但是我不想使用大量的Jquery和CSS，只使用一些javascript。

HTML代碼:

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

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

輸出:

如果你需要一個(gè)快速的解決方案來使yyyy-mm-dd運(yùn)行到“dd- Sep -2016”，那么試試這個(gè)

1)在輸入附近創(chuàng)建一個(gè)span類(作為標(biāo)簽)

2)每當(dāng)用戶更改日期，或者需要從數(shù)據(jù)中加載時(shí)，更新標(biāo)簽。

適用于webkit瀏覽器移動(dòng)設(shè)備和IE11+的指針事件需要Jquery和jQuery日期

$("#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>

如前所述,& lt輸入類型=日期...& gt在大部分瀏覽器中并沒有完全實(shí)現(xiàn)，所以我們來談?wù)剋ebkit之類的瀏覽器(chrome)。

使用linux，你可以通過改變環(huán)境變量LANG來改變它，LC_TIME似乎不起作用(至少對我來說)。

您可以在終端中鍵入locale來查看您的當(dāng)前值。我覺得同樣的概念也可以適用于IOS。

例如: 使用:

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

日期顯示為年/月/日

使用:

LANG=pt_BR /opt/google/chrome/chrome

日期顯示為日/月/年

您可以使用http://lh.2xlibre.net/locale/pt_BR/(根據(jù)您的區(qū)域設(shè)置更改pt_BR)來創(chuàng)建您自己的自定義區(qū)域設(shè)置，并根據(jù)您的需要設(shè)置日期格式。

關(guān)于如何更改默認(rèn)系統(tǒng)日期的更高級(jí)的參考是: https://ccollins . WordPress . com/2009/01/06/how-to-change-date-formats-on-Ubuntu/ 和 https://askubuntu . com/questions/21316/how-can-I-customize-a-system-locale

你可以看到你真正的當(dāng)前日期格式使用日期:

$ date +%x
01-06-2015

但是由于LC_TIME和d_fmt似乎被chrome拒絕了(而且我認(rèn)為這是webkit或者chrome的bug)，可悲的是它不起作用。:'(

所以，不幸的是，如果LANG環(huán)境變量不能解決您的問題，那就沒有辦法了。

使用用戶電腦或手機(jī)的默認(rèn)日期格式改變web-kit瀏覽器是不可能的。 但是，如果你可以使用jquery和jquery UI，有一個(gè)日期選擇器是可設(shè)計(jì)的，可以按照開發(fā)人員想要的任何格式顯示。 jquery UI日期選擇器的鏈接是 在這個(gè)http://jqueryui.com/datepicker/頁面上，你可以找到演示以及代碼和文檔或文檔鏈接

編輯:-我發(fā)現(xiàn)chrome使用默認(rèn)等于系統(tǒng)設(shè)置的語言設(shè)置，但用戶可以更改它們，但開發(fā)人員不能強(qiáng)迫使用rs這樣做，所以你必須使用其他js解決方案，就像我說的，你可以使用javascript日期選擇器或jquery日期選擇器等查詢來搜索web

因?yàn)檫@個(gè)帖子在兩個(gè)月前就被激活了。所以我想也發(fā)表一下我的看法。

在我的例子中，我從一個(gè)讀卡器接收日期，格式為dd/mm/yyyy。

我所做的。 例如

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

我調(diào)整了米格爾的代碼，讓它更容易理解 我想和和我一樣有問題的人分享。

試試這個(gè)簡單快捷的方法

$("#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>

Firefox中的新功能(未知版本)，在Settings & gt語言，他們增加了一個(gè)選項(xiàng):使用您的操作系統(tǒng)設(shè)置“西班牙語(西班牙)”來格式化日期、時(shí)間、數(shù)字和度量

該選項(xiàng)將使用操作系統(tǒng)的區(qū)域設(shè)置來顯示日期！可惜它不是默認(rèn)啟用的(也許在全新安裝時(shí)會(huì)啟用？)

Angular devs(也許還有其他人)可以考慮這個(gè)部分解決方案。

我的策略是檢測輸入字段的焦點(diǎn)狀態(tài)，并相應(yīng)地在日期和文本類型之間切換。明顯的缺點(diǎn)是日期格式會(huì)隨著輸入焦點(diǎn)的改變而改變。

它并不完美，但保證了一定程度的一致性，特別是當(dāng)你的web應(yīng)用程序中有一些日期顯示為文本和日期輸入時(shí)，如果你只有一個(gè)日期輸入，它不會(huì)有很大幫助。

<input class="form-control"
       [type]="myInputFocus ? 'date' : 'text'"
       id="myInput"
       name="myInput"
       #myInput="ngModel"
       [(ngModel)]="myDate"
       (focus)="myInputFocus = true"
       (blur)="myInputFocus = false">

只需在組件類的開頭聲明myInputFocus = false。 顯然，我的日期指向你想要的控制。

感謝@safi eddine和@Hezbullah Shah

帶有VanillaJS和CSS的Datepicker。

CSS樣式:

/*================== || 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
    }

使用:

document.getElementById('datePicker').onchange = function () { alert(GetFormatedDate('datePicker')); }; // The datepickerID

const birthday = document.getElementById("birthday");

const button = document.getElementById("wishBtn");


button.addEventListener("click", () => {
  let dateValue = birthday.value;
  // Changing format :)
  dateValue = dateValue.split('-').reverse().join('-');

  alert(`Happy birthday king/Queen of ${dateValue}`);
});

<input type="date" id="birthday" name="birthday" value="2022-10-10"/>

<button id="wishBtn">Clik Me</button>

不是真的不是。

可破解，但非常渺茫。可定制的解決方案是:

隱藏日期輸入(CSS可見性:隱藏)(仍然顯示日歷彈出窗口) 在它上面放一個(gè)文本輸入 在文本輸入點(diǎn)擊，使用JS獲得日期輸入元素& amp打電話。顯示選擇器() 將日期選取器值存儲(chǔ)在別處 在文本輸入中以您想要的自定義格式顯示值 下面是一些react代碼示例:

<div style={{ width: "100%", position: "relative" }}>
                    <input type="date" className={`form-control ${props.filters[dateFromAccessor] ? '' : 'bh-hasNoValue'}`} id={`${accessor}-date-from`} placeholder='from'
                        value={toDate(props.filters[dateFromAccessor])} style={{ marginRight: 0, visibility: "hidden" }}
                        onChange={e => {
                            props.setFilters({ ...props.filters, [dateFromAccessor]: inputsValueToNumber(e) })
                        }} />
                    <input type="text" className="form-control" readOnly
                        style={{ position: "absolute", top: 0, left: 0, width: "100%", height: "100%", backgroundColor: "white" }}
                        value={toDate(props.filters[dateFromAccessor])}
                        onClick={(e) => {
                        e.stopPropagation();
                        e.preventDefault();
                        (document.getElementById(`${accessor}-date-from`) as any)?.showPicker();
                    }}></input>
                </div>

我知道這是一個(gè)老帖子，但它是谷歌搜索中的第一個(gè)建議，簡短回答沒有，推薦答案用戶自定義日期piker，我使用的正確答案是使用文本框來模擬日期輸入，并做任何你想要的格式，這里是代碼

<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-請注意，此方法僅適用于支持日期類型瀏覽器。

2-JS代碼中的第一個(gè)函數(shù)是為不支持日期類型的瀏覽器設(shè)置的，它將外觀設(shè)置為普通的文本輸入。

3-如果您將在您的頁面中為多個(gè)日期輸入使用此代碼，請將函數(shù)調(diào)用和輸入i tself中的文本輸入的ID“xTime”更改為其他名稱，當(dāng)然使用您想要的表單提交輸入的名稱。

4-在第二個(gè)功能上，你可以使用任何你想要的格式來代替日+"/"+月+"/+年，例如年+"/+月+"/+日，并且在文本輸入中使用占位符或值作為yyyy / mm / dd，供用戶在頁面加載時(shí)使用。