มีวิธีใดที่จะเปลี่ยนรูปแบบอินพุต =“ วันที่”?

ฉันทำงานกับองค์ประกอบ HTML5 บนหน้าเว็บของฉัน โดยอินพุตเริ่มต้นtype="date"จะแสดงวันที่YYYY-MM-DDดังนี้

คำถามคือมันเป็นไปได้ที่จะเปลี่ยนรูปแบบไปยังสิ่งที่ชอบDD-MM-YYYY?

ไม่สามารถเปลี่ยนรูปแบบได้

เราต้องแยกความแตกต่างระหว่างรูปแบบการวางสายและรูปแบบการนำเสนอของเบราว์เซอร์

รูปแบบลวด

เปควัน HTML5 ป้อนข้อมูลหมายถึงข้อกำหนด RFC 3339yyyy-mm-ddซึ่งระบุวันที่เป็นแบบเต็มรูปแบบเท่ากับ: ดูส่วนที่ 5.6ของข้อกำหนดคุณลักษณะ RFC 3339 สำหรับรายละเอียดเพิ่มเติม

รูปแบบนี้ใช้โดยvalueคุณสมบัติ HTML และคุณสมบัติ DOM และเป็นรูปแบบที่ใช้เมื่อทำการส่งแบบฟอร์มปกติ

รูปแบบการนำเสนอ

เบราว์เซอร์ไม่ จำกัด ในการแสดงวันที่ ในขณะที่เขียน Chrome, Edge, Firefox และ Opera มีการสนับสนุนวันที่ (ดูที่นี่ ) พวกเขาทั้งหมดแสดงตัวใช้เลือกวันที่และจัดรูปแบบข้อความในฟิลด์อินพุต

อุปกรณ์เดสก์ท็อป

สำหรับ Chrome, Firefox และ Opera การจัดรูปแบบข้อความของช่องป้อนข้อมูลจะขึ้นอยู่กับการตั้งค่าภาษาของเบราว์เซอร์ สำหรับ Edge นั้นขึ้นอยู่กับการตั้งค่าภาษาของ Windows น่าเศร้าที่เว็บเบราว์เซอร์ทั้งหมดไม่สนใจการจัดรูปแบบวันที่ที่กำหนดค่าในระบบปฏิบัติการ สำหรับฉันนี่เป็นพฤติกรรมที่แปลกมากและสิ่งที่ต้องพิจารณาเมื่อใช้ประเภทอินพุตนี้ ตัวอย่างเช่นผู้ใช้ชาวดัตช์ที่มีระบบปฏิบัติการของพวกเขาหรือชุดภาษาเบราว์เซอร์en-usจะแสดงแทนรูปแบบที่พวกเขาจะคุ้นเคยกับ:01/30/201930-01-2019

Internet Explorer 9, 10 และ 11 แสดงฟิลด์ป้อนข้อความด้วยรูปแบบการวางสาย

อุปกรณ์มือถือ

โดยเฉพาะสำหรับ Chrome บน Android การจัดรูปแบบขึ้นอยู่กับภาษาที่แสดง Android ฉันสงสัยว่าเหมือนกันกับเบราว์เซอร์อื่น แต่ฉันไม่สามารถยืนยันได้

เนื่องจากคำถามนี้ถูกถามค่อนข้างบางสิ่งที่จะเกิดขึ้นในดินแดนเว็บและหนึ่งในที่น่าตื่นเต้นที่สุดคือการเชื่อมโยงไปถึงของส่วนประกอบเว็บ ตอนนี้คุณสามารถแก้ปัญหานี้ได้อย่างงดงามด้วยองค์ประกอบ HTML5 ที่กำหนดเองที่ออกแบบมาเพื่อให้เหมาะกับความต้องการของคุณ หากคุณต้องการแทนที่ / เปลี่ยนการทำงานของแท็กใด ๆ เพียงแค่สร้างคุณเล่นกับDom เงา

ข่าวดีก็คือว่ามีหม้อไอน้ำจำนวนมากที่มีอยู่แล้วดังนั้นส่วนใหญ่คุณไม่จำเป็นต้องคิดหาวิธีแก้ไขตั้งแต่ต้น เพียงตรวจสอบสิ่งที่ผู้คนกำลังสร้างและรับแนวคิดจากที่นั่น

คุณสามารถเริ่มต้นด้วยโซลูชันที่ง่าย (และใช้งานได้) เช่นdatetime-inputสำหรับโพลิเมอร์ที่ช่วยให้คุณใช้แท็กเช่นนี้:

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

หรือคุณสามารถเลือกตัวเลือกวันที่ที่สร้างสรรค์และผุดขึ้นอย่างสมบูรณ์ตามที่คุณต้องการด้วยการจัดรูปแบบและตำแหน่งที่ตั้งที่คุณต้องการการเรียกกลับและรายการตัวเลือกมากมาย (คุณมี API ที่กำหนดเองทั้งหมดตามที่คุณต้องการ!)

เป็นไปตามมาตรฐานไม่มีแฮ็ก

ตรวจสอบpolyfills ที่มีอยู่อีกครั้งเบราว์เซอร์ / รุ่นที่รองรับและหากครอบคลุมพอเพียง% ของฐานผู้ใช้ของคุณ…เป็น 2018 ดังนั้นโอกาสที่จะครอบคลุมผู้ใช้ส่วนใหญ่ของคุณอย่างแน่นอน

หวังว่ามันจะช่วย!

ดังกล่าวก่อนหน้านี้เป็นไปไม่ได้ที่จะเปลี่ยนรูปแบบอย่างเป็นทางการ อย่างไรก็ตามเป็นไปได้ที่จะจัดรูปแบบฟิลด์ดังนั้น (ด้วยความช่วยเหลือของ JS เล็กน้อย) มันจะแสดงวันที่ในรูปแบบที่เราต้องการ ความเป็นไปได้บางอย่างในการจัดการกับการป้อนข้อมูลวันที่จะหายไปด้วยวิธีนี้ แต่ถ้าความปรารถนาที่จะบังคับรูปแบบให้มากขึ้นโซลูชันนี้อาจเป็นวิธี ฟิลด์วันที่จะคงอยู่เช่นนี้:

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

ส่วนที่เหลือเป็นบิตของ 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">

มันทำงานได้ดีบน Chrome สำหรับเดสก์ท็อปและ Safari บน iOS (เป็นที่ต้องการอย่างยิ่งเนื่องจากผู้จัดทำวันที่ดั้งเดิมบนหน้าจอสัมผัสนั้นไม่มี IMHO ที่เหนือชั้น) ไม่ได้ตรวจสอบผู้อื่น แต่อย่าคาดหวังว่าจะล้มเหลวใน Webkit ใด ๆ

สิ่งสำคัญคือการแยกความแตกต่างของสองรูปแบบ :

• RFC 3339 / ISO 8601 "รูปแบบสายไฟ": YYYY-MM-DD ตามข้อกำหนด HTML5 นี่เป็นรูปแบบที่ต้องใช้สำหรับค่าของอินพุตเมื่อส่งแบบฟอร์มหรือเมื่อร้องขอผ่าน DOM API มันเป็นสถานที่และเป็นอิสระในภูมิภาค
• รูปแบบที่แสดงโดยการควบคุมส่วนต่อประสานผู้ใช้และยอมรับว่าเป็นอินพุตของผู้ใช้ ผู้ขายเบราว์เซอร์ได้รับการสนับสนุนให้ทำตามการเลือกการตั้งค่าของผู้ใช้ ตัวอย่างเช่นใน Mac OS ที่เลือกภูมิภาค "สหรัฐอเมริกา" ในบานหน้าต่างการตั้งค่าภาษาและข้อความ Chrome 20 จะใช้รูปแบบ "m / d / yy"

ข้อกำหนด HTML5 ไม่รวมถึงวิธีการเอาชนะหรือระบุรูปแบบใดก็ได้ด้วยตนเอง

ฉันเชื่อว่าเบราว์เซอร์จะใช้รูปแบบวันที่ท้องถิ่น อย่าคิดว่าเป็นไปได้ที่จะเปลี่ยนแปลง แน่นอนคุณสามารถใช้เครื่องมือเลือกวันที่ที่กำหนดเองได้

Google Chrome ในรุ่นเบต้าสุดท้ายในที่สุดก็ใช้การป้อนข้อมูลและรูปแบบคือtype=dateDD-MM-YYYY

ดังนั้นจะต้องมีวิธีการบังคับรูปแบบเฉพาะ ฉันกำลังพัฒนาเว็บเพจ HTML5 และการค้นหาวันที่ล้มเหลวในรูปแบบที่แตกต่างกัน

ลองใช้ถ้าคุณต้องการวิธีแก้ปัญหาอย่างรวดเร็วเพื่อให้ yyyy-mm-dd go "dd- Sep -2016"

1) สร้างใกล้กับอินพุตหนึ่งคลาสคลาสของคุณ (ทำหน้าที่เป็นป้ายกำกับ)

2) อัปเดตป้ายกำกับทุกครั้งที่คุณเปลี่ยนวันที่โดยผู้ใช้หรือเมื่อต้องการโหลดจากข้อมูล

ใช้งานได้กับโทรศัพท์เบราว์เซอร์ webkitและตัวชี้เหตุการณ์สำหรับ IE11 + ต้องใช้ jQuery และ 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>

หลังจากที่ได้อ่านการอภิปรายมากมายฉันได้เตรียมวิธีแก้ปัญหาง่ายๆ แต่ฉันไม่ต้องการใช้ Jquery และ CSS จำนวนมากเพียงแค่จาวาสคริปต์

รหัส 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;
}

เอาท์พุท:

ดังที่กล่าวไปแล้วการ<input type=date ... >ใช้งานไม่ได้เกิดขึ้นอย่างสมบูรณ์ในเบราว์เซอร์ส่วนใหญ่ดังนั้นเรามาพูดถึง webkit เช่นเบราว์เซอร์ (Chrome)

การใช้ลินุกซ์, คุณสามารถเปลี่ยนได้โดยการเปลี่ยนตัวแปรสภาพแวดล้อมLANG, LC_TIMEไม่ได้ดูเหมือนว่าจะทำงาน (สำหรับฉันอย่างน้อย)

คุณสามารถพิมพ์localeในเทอร์มินัลเพื่อดูค่าปัจจุบันของคุณ ฉันคิดว่าแนวคิดเดียวกันนี้สามารถใช้กับ IOS ได้

เช่น: การใช้:

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

วันที่แสดงเป็น mm/dd/yyyy

โดยใช้:

LANG=pt_BR /opt/google/chrome/chrome

วันที่แสดงเป็น dd/mm/yyyy

คุณสามารถใช้http://lh.2xlibre.net/locale/pt_BR/ (เปลี่ยนpt_BRสถานที่ของคุณ) เพื่อสร้างสถานที่ที่คุณกำหนดเองและจัดรูปแบบวันที่ตามต้องการ

การอ้างอิงขั้นสูงเพิ่มเติมเกี่ยวกับวิธีการเปลี่ยนวันที่ของระบบเริ่มต้นคือ: https://ccollins.wordpress.com/2009/01/06/how-to-change-date-formats-on-ubuntu/ และ https: // askubuntu co.th / คำถาม / 21316 / วิธีสามารถฉันปรับแต่ง-a-ระบบสถานที่เกิดเหตุ

คุณสามารถเห็นรูปแบบวันที่ปัจจุบันจริงโดยใช้date:

$ date +%x
01-06-2015

แต่เป็นLC_TIMEและd_fmtดูเหมือนว่าจะถูกปฏิเสธโดยโครเมี่ยม (และฉันคิดว่ามันเป็นข้อผิดพลาดใน WebKit หรือโครเมี่ยม) เศร้ามันจะไม่ได้ทำงาน : '(

ดังนั้นน่าเสียดายที่การตอบสนองคือถ้าLANGตัวแปรสภาพแวดล้อมไม่สามารถแก้ปัญหาของคุณยังไม่มีวิธี

เบราว์เซอร์ได้รับรูปแบบการป้อนวันที่จากรูปแบบวันที่ระบบของผู้ใช้

(ทดสอบในเบราว์เซอร์ที่รองรับ Chrome, Edge)

เนื่องจากไม่มีมาตรฐานที่กำหนดโดยข้อมูลจำเพาะ ณ ขณะนี้เพื่อเปลี่ยนรูปแบบของการควบคุมวันที่จึงไม่สามารถนำไปใช้กับเบราว์เซอร์เดียวกันได้

อย่างไรก็ตามพฤติกรรมการได้รับรูปแบบวันที่จากการตั้งค่าระบบนี้ดีกว่าและฉันขอแนะนำอย่างยิ่งเราไม่ควรพยายามแทนที่ เหตุผลคือผู้ใช้จะเห็นรูปแบบของการป้อนวันที่เช่นเดียวกับที่พวกเขาได้กำหนดค่าในระบบ / อุปกรณ์และสิ่งที่พวกเขาพอใจหรือตรงกับสถานที่ของพวกเขา

โปรดจำไว้ว่านี่เป็นเพียงรูปแบบ UI บนหน้าจอที่ผู้ใช้เห็นในจาวาสคริปต์ / แบ็กเอนด์ของคุณคุณสามารถรักษารูปแบบที่คุณต้องการได้เสมอ

อ้างถึงหน้านักพัฒนาของ Google ในเดียวกัน

ไม่สามารถเปลี่ยนเบราว์เซอร์ชุดเว็บที่ใช้คอมพิวเตอร์ของผู้ใช้หรือรูปแบบวันที่เริ่มต้นมือถือ แต่ถ้าคุณสามารถใช้ jquery และ jquery UI จะมีตัวเลือกวันที่ซึ่งสามารถออกแบบได้และสามารถแสดงในรูปแบบใดก็ได้ตามที่นักพัฒนาต้องการ ลิงค์ไปยังเครื่องมือเลือกวันที่ของ jquery UI อยู่ในหน้านี้http://jqueryui.com/datepicker/คุณสามารถค้นหาตัวอย่างรวมถึงรหัสและเอกสารหรือลิงค์เอกสารหรือเอกสาร

แก้ไข: - ฉันพบว่าโครเมี่ยมใช้การตั้งค่าภาษาที่เป็นค่าเริ่มต้นเท่ากับการตั้งค่าระบบ แต่ผู้ใช้สามารถเปลี่ยนได้ แต่นักพัฒนาไม่สามารถบังคับให้ผู้ใช้ทำเช่นนั้นดังนั้นคุณต้องใช้โซลูชัน js อื่น ๆ เช่นที่ฉันบอกว่าคุณสามารถค้นหาเว็บได้ ด้วยข้อความค้นหาเช่น javascript date-pickers หรือ jquery date-picker

ฉันพบวิธีเปลี่ยนรูปแบบเป็นวิธีที่ยุ่งยากฉันเพิ่งเปลี่ยนรูปลักษณ์ของฟิลด์ป้อนวันที่โดยใช้รหัส 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">

เนื่องจากโพสต์เปิดใช้งาน 2 เดือนที่ผ่านมา ดังนั้นฉันจึงคิดที่จะให้ข้อมูลของฉันเช่นกัน

ในกรณีของฉันฉันได้รับวันที่จากเครื่องอ่านการ์ดที่มาในรูปแบบ 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();">

รหัสทำอะไร:

1. มันแยกวันที่ฉันได้รับเป็น dd / mm / yyyy (โดยใช้ split ()) บนพื้นฐานของ "/" และสร้างอาร์เรย์
2. จากนั้นจึงย้อนกลับอาร์เรย์ (โดยใช้ reverse ()) เนื่องจากอินพุตวันรองรับการย้อนกลับของสิ่งที่ฉันได้รับ
3. จากนั้นจะรวม (ใช้ join ()) อาร์เรย์เป็นสตริงตามรูปแบบที่ต้องการโดยฟิลด์อินพุต

ทั้งหมดนี้ทำในบรรทัดเดียว

ฉันคิดว่านี่จะช่วยได้บ้างดังนั้นฉันจึงเขียนสิ่งนี้

ฉันค้นหาปัญหานี้เมื่อ 2 ปีก่อนและการค้นหาใน google ของฉันทำให้ฉันมีคำถามนี้อีกครั้ง อย่าเสียเวลาพยายามจัดการกับ JavaScript อย่างแท้จริง dd/mm/yyyyฉันเสียเวลาของฉันพยายามที่จะทำให้มัน ไม่มีโซลูชันที่สมบูรณ์ที่เหมาะกับเบราว์เซอร์ทั้งหมด ดังนั้นฉันแนะนำให้ใช้jQuery datepickerหรือบอกให้ไคลเอ็นต์ของคุณทำงานกับรูปแบบวันที่เริ่มต้นแทน

ฉันรู้ว่ามันเป็นโพสต์เก่า แต่มาเป็นข้อเสนอแนะครั้งแรกในการค้นหาของ Google คำตอบสั้น ๆ ไม่แนะนำผู้ใช้คำตอบที่กำหนดเอง 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 ใช้สำหรับเบราว์เซอร์ที่ไม่รองรับประเภทวันที่และตั้งค่าให้เป็นข้อความธรรมดา

3- หากคุณจะใช้รหัสนี้สำหรับอินพุตหลายวันในหน้าของคุณโปรดเปลี่ยน ID "xTime" ของการป้อนข้อความในทั้งฟังก์ชั่นการโทรและอินพุตเองเป็นอย่างอื่นและแน่นอนใช้ชื่อของอินพุตที่คุณต้องการสำหรับ ส่งแบบฟอร์ม

4-on ฟังก์ชั่นที่สองคุณสามารถใช้รูปแบบที่คุณต้องการแทนวัน + "/" + เดือน + "/" + ปีเช่นปี + "/" + เดือน + "/" + วันและในการป้อนข้อความใช้ตัวยึดตำแหน่งหรือค่าเป็น yyyy / mm / dd สำหรับผู้ใช้เมื่อเพจโหลด