จะกำหนดรูปแบบวันที่ในแท็กป้อนวันที่ HTML ได้อย่างไร

Question 1

ฉันสงสัยว่าเป็นไปได้หรือไม่ที่จะตั้งค่ารูปแบบวันที่ใน<input type="date"></input>แท็กhtml ...

Question 2

คุณไม่ทำ

ประการแรกคำถามของคุณคลุมเครือ - คุณหมายถึงรูปแบบที่แสดงต่อผู้ใช้หรือรูปแบบที่ส่งไปยังเว็บเซิร์ฟเวอร์?

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

หากคุณหมายถึงรูปแบบที่ส่งไปยังเซิร์ฟเวอร์คุณกำลังพยายามแก้ไขปัญหาที่ไม่ถูกต้อง สิ่งที่คุณต้องทำคือตั้งโปรแกรมโค้ดฝั่งเซิร์ฟเวอร์ให้ยอมรับวันที่ในรูปแบบปปปป - mm-dd

Question 3

ฉันพบคำถามเดียวกันหรือคำถามที่เกี่ยวข้องใน stackoverflow

มีวิธีใดในการเปลี่ยนรูปแบบ input type =“ date” หรือไม่?

ฉันพบวิธีแก้ปัญหาง่ายๆวิธีหนึ่งคุณไม่สามารถให้รูปแบบอนุภาคได้ แต่คุณสามารถปรับแต่งแบบนี้ได้

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

เอาท์พุต:

Question 4

หากคุณใช้ jQuery นี่เป็นวิธีง่ายๆที่ดี

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

หรือมีวิธีดั้งเดิมแบบเก่า:

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

Question 5

ทำไมไม่ใช้การควบคุมวันที่ 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"/>

Question 6

ฉันคิดว่าใน HTML ไม่มีไวยากรณ์สำหรับรูปแบบ DD-MM-YYYY ส่งหน้านี้http://www.java2s.com/Code/SQLServer/Date-Timezone/FormatdateMmmddyyyyhhmmdp.htm บางอย่างมันจะช่วยคุณได้ อื่นใช้ตัวเลือกวันที่จาวาสคริปต์

Question 7

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

Question 8

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

Question 9

ฉันทำการวิจัยมากมายและฉันไม่คิดว่าจะสามารถบังคับรูปแบบของไฟล์<input type="date">. เบราว์เซอร์จะเลือกรูปแบบท้องถิ่นและขึ้นอยู่กับการตั้งค่าของผู้ใช้หากภาษาของผู้ใช้เป็นภาษาอังกฤษวันที่จะแสดงเป็นรูปแบบภาษาอังกฤษ (mm / dd / yyyy)

ในความคิดของฉันทางออกที่ดีที่สุดคือการใช้ปลั๊กอินเพื่อควบคุมการแสดงผล

Jquery DatePickerดูเหมือนว่าตัวเลือกที่ดีเนื่องจากคุณสามารถบังคับให้แปล , รูปแบบวันที่ ...

Question 10

ฉันได้คำตอบที่แตกต่างจากที่ฉันได้อ่านมาเล็กน้อย

โซลูชันของฉันใช้ JavaScript และอินพุต html เล็กน้อย

วันที่ที่ยอมรับโดยผลลัพธ์ที่ป้อนในสตริงที่จัดรูปแบบเป็น 'yyyy-mm-dd' เราสามารถแยกมันและวางให้ถูกต้องเป็น Date () ใหม่

นี่คือ HTML พื้นฐาน:

<form id="userForm">
    <input type="text" placeholder="1, 2, 3, 4, 5, 6" id="userNumbers" />
    <input type="date" id="userDate" />
    <input type="submit" value="Track" />
</form>

นี่คือ JS พื้นฐาน:

let userDate = document.getElementById('userDate').value.split('-'),
    parsedDate = new Date((`${userDate[1]}-${userDate[2]}-${userDate[0]}`));

คุณสามารถจัดรูปแบบวันที่ได้ตามต้องการ คุณสามารถสร้าง Date () ใหม่และดึงข้อมูลทั้งหมดจากที่นั่น ... หรือใช้ "userDate []" เพื่อสร้างสตริงของคุณ

โปรดทราบว่าบางวิธีในการป้อนวันที่ใน 'วันที่ใหม่ ()' จะให้ผลลัพธ์ที่ไม่คาดคิด (เช่น - ช้ากว่าหนึ่งวัน)

Question 11

<html>

    <body>
        <p id="result">result</p>Enter some text: <input type="date" name="txt" id="value" onchange="myFunction(value)">
        <button onclick="f()">submit</button>
        <script>
            var a;

            function myFunction(val){
                a = val.split("-").reverse().join("-");
                document.getElementById("value").type = "text";
                document.getElementById("value").value = a;
            }

            function f(){
                document.getElementById("result").innerHTML = a;
                var z = a.split("-").reverse().join("-");
                document.getElementById("value").type = "date";
                document.getElementById("value").value = z;
            }

        </script>
    </body>

</html>

Question 12

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

<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 ในฟังก์ชันที่สองคุณสามารถใช้รูปแบบใดก็ได้ที่คุณต้องการแทนวัน + "/" + เดือน + "/" + ปีเช่นปี + "/" + เดือน + "/" + วันและในการป้อนข้อความให้ใช้ตัวยึดหรือค่าเป็น yyyy / mm / dd สำหรับผู้ใช้เมื่อโหลดหน้า

Question 13

สำหรับการจัดรูปแบบในหน่วย mm-dd-yyyy

aa = date.split ("-")

วันที่ = aa [1] + '-' + aa [2] + '-' + aa [0]

Question 14

การใช้งานที่สะอาดโดยไม่ต้องพึ่งพา 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>

Question 15

เราสามารถเปลี่ยนรูปแบบ yyyy-mm-dd นี้เป็น dd-mm-yyyy ใน javascript โดยใช้วิธีแยก

let dateyear= "2020-03-18";
let arr = dateyear.split('-') //now we get array of these and we can made in any format as we want
let dateFormat = arr[2] + "-" + arr[1] + "-" + arr[0]  //In dd-mm-yyyy format

Question 16

นี่คือวิธีแก้ปัญหา:

  <input type="text" id="end_dt"/>

$(document).ready(function () {
    $("#end_dt").datepicker({ dateFormat: "MM/dd/yyyy" });
});

หวังว่าจะแก้ปัญหาได้ :)

Question 17

'YYYY-MM-DD'รูปแบบของค่าวันคือ ดูตัวอย่างต่อไปนี้

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

สิ่งที่คุณต้องมีคือจัดรูปแบบวันที่ใน php, asp, ruby หรืออะไรก็ได้ที่จะมีรูปแบบนั้น