Làm cách nào để đặt định dạng ngày trong thẻ nhập ngày HTML?

105

Tôi đang tự hỏi liệu có thể đặt định dạng ngày trong <input type="date"></input>thẻ html không ... Hiện tại nó là yyyy-mm-dd, trong khi tôi cần nó ở định dạng dd-mm-yyyy.

html  date  input  format 
— Piotr
nguồn
3
Nó không phải là bản sao của Chỉ định giá trị đầu ra của loại đầu vào HTML5 = date? ? Tôi có thể nói, câu hỏi này ở đây được hỏi tốt hơn câu hỏi cũ hơn, nhưng câu hỏi cũ hơn có một câu trả lời khá tốt.
— Arsen 7
— Vaibhav Mule
Cài đặt quốc gia của tôi là tiếng Hà Lan và trong Chrome, nó hiển thị DD-MM-YYYY. Có vẻ như nó phụ thuộc vào cài đặt cửa sổ của khách hàng sử dụng trang web.
— dark_passages

Câu trả lời:

11

Bạn không.

Thứ nhất, câu hỏi của bạn không rõ ràng - ý của bạn là định dạng mà nó được hiển thị cho người dùng hay định dạng mà nó được truyền đến máy chủ web?

Nếu ý của bạn là định dạng mà nó được hiển thị cho người dùng, thì điều này thuộc về giao diện người dùng cuối, không phải bất cứ thứ gì bạn chỉ định trong HTML. Thông thường, tôi mong đợi nó dựa trên định dạng ngày mà nó được đặt trong cài đặt ngôn ngữ của hệ điều hành. Không có ý nghĩa gì khi cố gắng ghi đè nó bằng định dạng ưa thích của riêng bạn, vì định dạng mà nó hiển thị (nói chung) là định dạng chính xác cho ngôn ngữ của người dùng và định dạng mà người dùng quen viết / hiểu ngày tháng.

Nếu ý của bạn là định dạng mà nó được truyền tới máy chủ thì bạn đang cố gắng khắc phục sự cố sai. Những gì bạn cần làm là lập trình mã phía máy chủ để chấp nhận ngày ở định dạng yyyy-mm-dd.

— Stewart
nguồn
Đáng buồn thay, nhận xét thứ hai của bạn không hoàn toàn đúng trong thế giới thực. Một số trình duyệt, như Chrome và Opera, ít nhất cũng tôn trọng thứ tự của các thực thể, mặc dù không hơn thế. Ví dụ: cài đặt ngôn ngữ hệ điều hành của tôi chỉ định rằng là một ngày ngắn, ngày đầu tiên của tháng 8 năm nay phải là 1/8/2016 , nhưng ngay cả Chrome và Opera cũng hiển thị 01/08/2016 . Các trình duyệt khác, như Safari và Firefox (ít nhất là trên OS X) hoàn toàn bỏ qua cài đặt hệ điều hành và luôn hiển thị 2016-08-16 bất kể điều gì. Trên một trang web nơi người dùng có thể đặt tùy chọn ngày của riêng họ, chắc chắn việc ghi đè tùy chọn này là rất hợp lý.
— Janus Bahs Jacquet
(Bỏ qua ghi chú về Firefox và Safari… Tôi mệt. Cả hai trình duyệt đều không hỗ trợ loại ngày tháng, vì vậy chúng chỉ hiển thị định dạng cơ bản của giá trị, trong trường hợp mã hiện tại của tôi là YYYY-MM-DD .)
— Janus Bahs Jacquet
Có phải hầu hết mọi người hỏi làm thế nào để thay đổi định dạng ngày hiển thị / nhập liệu muốn cho phép người dùng đặt tùy chọn của riêng họ hoặc để đưa các định dạng ngày ưa thích của riêng họ trên thế giới? Điều thứ hai là điều không ai nên làm, như tôi đã nói, nhưng bạn có thể tranh luận theo cả hai cách về việc liệu cái trước có phù hợp hay không. Nhưng nó sẽ là một thiết lập thuyết trình, vì vậy nằm ngoài phạm vi của HTML.
— Stewart
Vấn đề là đó là một cài đặt thuyết trình không thể được thiết lập . Cài đặt trình bày nói chung thuộc về CSS, nhưng không có cách nào để thay đổi cài đặt này trong CSS (hoặc bất kỳ nơi nào khác). Bên cạnh đó, ngay cả bản thân thông số kỹ thuật HTML cũng không có cài đặt trình bày. Ví dụ: phần trên input[type=password]nói rằng “tác nhân người dùng nên che khuất giá trị để những người khác không phải người dùng không thể nhìn thấy nó”, điều này cũng giống như cách nói rằng tác nhân người dùng nên trình bày ngày tháng theo một cách nhất định.
— Janus Bahs Jacquet
1
Một số người nói rằng đó là một điều tốt khi nó không thể được thiết lập, vì nó ngăn các quản trị viên web vi phạm các định dạng ngày ưa thích của họ trên thế giới. Nhưng nhập mật khẩu khiến tôi phải suy nghĩ. Ở nhiều nơi, thông số kỹ thuật HTML đưa ra các đề xuất trình bày, về cơ bản là các đề xuất cho các biểu định kiểu mặc định của trình duyệt. Sự khác biệt ở đây là dường như không có thuộc tính CSS cho khía cạnh trình bày cụ thể này.
— Stewart
11

Tôi đã tìm thấy câu hỏi tương tự hoặc câu hỏi liên quan trên stackoverflow

Có cách nào để thay đổi định dạng input type = “date” không?

Tôi đã tìm thấy một giải pháp đơn giản, Bạn không thể cung cấp Định dạng hạt nhưng bạn có thể tùy chỉnh Như thế này.

Mã 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>

Mã CSS:

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

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

Đầu ra:

nhập mô tả hình ảnh ở đây

— ashish bhatt
nguồn
Thậm chí tốt hơn - sử dụng css để định vị một điều khiển ngày trong suốt trên đầu vào thường xuyên
— George Mauer
Cảm ơn trả lời của bạn, nếu bạn có bất kỳ liên kết hoặc mã cho điều này, tôi cần phải cập nhật
— ashish Bhatt
Đây là một lựa chọn tuyệt vời.
— Dillon Burnett
Tôi nghĩ anh ấy đang hỏi liệu điều đó có khả thi với HTML (dựa trên câu hỏi), không phải CSS hay Javascript hay không.
— Shizukura
6

Nếu bạn đang sử dụng jQuery, đây là một phương pháp đơn giản hay

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

Hoặc có một cách truyền thống cũ:

document.getElementById("dateField").value = new Date().toISOString().substring(0, 10)
— sean.boyer
nguồn
4

Tại sao không sử dụng kiểm soát ngày html5 như nó vốn có, với các thuộc tính khác cho phép nó hoạt động tốt trên các trình duyệt hỗ trợ loại ngày và vẫn hoạt động trên các trình duyệt khác như firefox chưa hỗ trợ loại ngày

<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"/>
— Paul IE
nguồn
<pre> <input type = "text" name = "input1" placeholder = "YYYY-MM-DD" Required pattern = "[0-9] {4} - [0-9] {2} - [0-9 ] {2} "title =" Nhập ngày vào biểu mẫu này YYYY-MM-DD "/> </pre>
— Paul IE
8
Yêu cầu rõ ràng là, tôi trích dẫn - "Tôi cần nó ở định dạng dd-mm-yyyy." Làm thế nào để giúp đỡ?
— Harijs Krūtainis
1
không hoạt động với Firefox. Html này hiển thị đầu vào với trình giữ chỗ mm / dd / yyyy. Windows của tôi và firefox của tôi đều được đặt bằng tiếng Hà Lan làm ngôn ngữ đầu tiên. Cài đặt khu vực Windows hiển thị ngày ngắn: 30-11-2018.
— Roland
1

Tôi không biết điều này chắc chắn, nhưng tôi nghĩ rằng điều này được trình duyệt xử lý dựa trên cài đặt ngày / giờ của người dùng. Thử cài đặt máy tính của bạn hiển thị ngày tháng ở định dạng đó.

— Lỗi cú pháp
nguồn
1 
$('input[type="date"]').change(function(){
   alert(this.value.split("-").reverse().join("-")); 
});
— Dheeraj Rao
nguồn
3
Cảm ơn bạn về đoạn mã này, đoạn mã có thể cung cấp một số trợ giúp ngay lập tức. Một lời giải thích thích hợp sẽ cải thiện đáng kể giá trị giáo dục của nó bằng cách chỉ ra lý do tại sao đây là một giải pháp tốt cho vấn đề và sẽ làm cho nó hữu ích hơn cho những độc giả trong tương lai với những câu hỏi tương tự, nhưng không giống hệt nhau. Vui lòng chỉnh sửa câu trả lời của bạn để thêm giải thích và đưa ra dấu hiệu về những hạn chế và giả định nào được áp dụng.
— Toby Speight
1

Tôi đã thực hiện rất nhiều nghiên cứu và tôi không nghĩ rằng ai có thể ép buộc định dạng của <input type="date">. Trình duyệt chọn định dạng cục bộ và tùy thuộc vào cài đặt của người dùng, nếu ngôn ngữ của người dùng là tiếng Anh, ngày tháng sẽ được hiển thị ở định dạng tiếng Anh (mm / dd / yyyy).

Theo tôi, giải pháp tốt nhất là sử dụng một plugin để kiểm soát màn hình.

Jquery DatePicker có vẻ là một lựa chọn tốt vì bạn có thể buộc bản địa hóa , định dạng ngày tháng ...

— Fifi
nguồn
1

Tôi đã đưa ra một câu trả lời hơi khác so với bất kỳ câu nào ở trên mà tôi đã đọc.

Giải pháp của tôi sử dụng một chút JavaScript nhỏ và đầu vào html.

Ngày được chấp nhận bởi một đầu vào dẫn đến một Chuỗi có định dạng là 'yyyy-mm-dd'. Chúng ta có thể tách nó ra và đặt nó một cách chính xác dưới dạng Ngày mới ().

Đây là HTML cơ bản:

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

Đây là JS cơ bản:

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

Bạn có thể định dạng ngày theo bất kỳ cách nào bạn muốn. Bạn có thể tạo Ngày () mới và lấy tất cả thông tin từ đó ... hoặc chỉ cần sử dụng 'userDate []' để tạo chuỗi của bạn.

Hãy nhớ rằng một số cách mà một ngày được nhập vào 'new Date ()' sẽ tạo ra kết quả không mong muốn. (tức là - chậm một ngày)

— thielr7
nguồn
1 
<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>
— pala dattadri
nguồn
2
Khi bạn đăng mã HTML ở đây, điều quan trọng là bạn phải định dạng nó dưới dạng mã. Nếu bạn không, nó được định dạng là một phần của trang và câu trả lời của bạn trông không giống như một câu trả lời. Nếu bạn không biết làm thế nào để định dạng, có một hướng dẫn tốt đẹp về nó trong các trung tâm trợ giúp
— Zoe
0

câu trả lời trực tiếp ngắn gọn là không hoặc không nằm ngoài dự đoán nhưng tôi đã nghĩ ra một phương pháp sử dụng hộp văn bản và mã JS thuần túy để mô phỏng đầu vào ngày tháng và thực hiện bất kỳ định dạng nào bạn muốn, đây là mã 

<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- xin lưu ý rằng phương pháp này chỉ hoạt động cho trình duyệt hỗ trợ loại ngày.

2- chức năng đầu tiên trong mã JS dành cho trình duyệt không hỗ trợ loại ngày tháng và đặt giao diện thành kiểu nhập văn bản bình thường.

3- nếu bạn sử dụng mã này cho nhiều đầu vào ngày tháng trong trang của mình, vui lòng thay đổi ID "xTime" của đầu vào văn bản trong cả lệnh gọi hàm và bản thân đầu vào thành một thứ khác và tất nhiên hãy sử dụng tên của đầu vào bạn muốn cho gửi biểu mẫu.

4-trên chức năng thứ hai, bạn có thể sử dụng bất kỳ định dạng nào bạn muốn thay vì ngày + "/" + tháng + "/" + năm, chẳng hạn như năm + "/" + tháng + "/" + ngày và trong đầu vào văn bản sử dụng trình giữ chỗ hoặc giá trị như yyyy / mm / dd cho người dùng khi tải trang.

— râm
nguồn
0

Để định dạng trong mm-dd-yyyy

aa = date.split ("-")

date = aa [1] + '-' + aa [2] + '-' + aa [0]

— Abilash Raghu
nguồn
-1

Triển khai sạch sẽ không có phụ thuộc. 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>
— James Perih
nguồn
-2

Đây là giải pháp: 

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

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

hy vọng điều này sẽ giải quyết vấn đề :)

— Muhammad Waqas
nguồn
1
Giải pháp của bạn không sử dụng đầu vào HTML loại ngày, vì vậy không thực sự trả lời câu hỏi.
— Vincent
bạn không cần đặt loại của nó thành ngày. đối với người chọn ngày, nó sẽ hoạt động không có ngày. Hãy thử nó, hy vọng nó sẽ giải quyết vấn đề của bạn.
— Muhammad Waqas
-3

Định dạng của giá trị ngày là 'YYYY-MM-DD'. Xem ví dụ sau

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

Tất cả những gì bạn cần là định dạng ngày tháng bằng php, asp, ruby ​​hoặc bất cứ thứ gì để có định dạng đó.

— Charmi
nguồn
Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookie và Chính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.