Có cách nào để thay đổi kiểu nhập liệu không?

Tôi đang làm việc với các yếu tố HTML5 trên trang web của mình. Theo mặc định đầu vào type="date"hiển thị ngày là YYYY-MM-DD.

Câu hỏi là, có thể thay đổi định dạng của nó thành một cái gì đó như : DD-MM-YYYY?

Không thể thay đổi định dạng

Chúng tôi phải phân biệt giữa định dạng trên dây và định dạng trình bày của trình duyệt.

Định dạng dây

Đặc tả đầu vào ngày HTML5 đề cập đến đặc tả RFC 3339 , chỉ định định dạng ngày đầy đủ bằng : yyyy-mm-dd. Xem phần 5.6 của đặc tả RFC 3339 để biết thêm chi tiết.

Định dạng này được sử dụng bởi valuethuộc tính HTML và thuộc tính DOM và là thuộc tính được sử dụng khi thực hiện gửi biểu mẫu thông thường.

Định dạng trình bày

Các trình duyệt không bị hạn chế trong cách họ trình bày một đầu vào ngày. Tại thời điểm viết Chrome, Edge, Firefox và Opera có hỗ trợ ngày (xem tại đây ). Tất cả đều hiển thị một bộ chọn ngày và định dạng văn bản trong trường nhập.

Thiết bị để bàn

Đối với Chrome, Firefox và Opera, định dạng của văn bản của trường nhập dựa trên cài đặt ngôn ngữ của trình duyệt. Đối với Edge, nó dựa trên cài đặt ngôn ngữ Windows. Đáng buồn thay, tất cả các trình duyệt web bỏ qua định dạng ngày được cấu hình trong hệ điều hành. Đối với tôi đây là hành vi rất lạ và cần cân nhắc khi sử dụng loại đầu vào này. Ví dụ: người dùng Hà Lan có hệ điều hành hoặc ngôn ngữ trình duyệt được đặt en-ussẽ được hiển thị 01/30/2019thay vì định dạng mà họ quen dùng : 30-01-2019.

Internet Explorer 9, 10 và 11 hiển thị trường nhập văn bản với định dạng dây.

Thiêt bị di động

Cụ thể đối với Chrome trên Android, định dạng dựa trên ngôn ngữ hiển thị của Android. Tôi nghi ngờ rằng điều tương tự cũng đúng với các trình duyệt khác, mặc dù tôi không thể xác minh điều này.

Vì câu hỏi này đã được hỏi khá nhiều điều đã xảy ra trong lĩnh vực web và một trong những điều thú vị nhất là hạ cánh của các thành phần web . Bây giờ bạn có thể giải quyết vấn đề này một cách thanh lịch với một yếu tố HTML5 tùy chỉnh được thiết kế phù hợp với nhu cầu của bạn. Nếu bạn muốn ghi đè / thay đổi hoạt động của bất kỳ thẻ html nào, chỉ cần xây dựng thẻ của bạn chơi với bóng dom .

Tin tốt là đã có sẵn rất nhiều mẫu nồi hơi nên rất có thể bạn sẽ không cần phải đưa ra giải pháp từ đầu. Chỉ cần kiểm tra những gì mọi người đang xây dựng và lấy ý tưởng từ đó.

Bạn có thể bắt đầu với một giải pháp đơn giản (và hoạt động) như đầu vào datetime cho polymer cho phép bạn sử dụng một thẻ như thế này:

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

hoặc bạn có thể có được các công cụ chọn ngày hoàn chỉnh sáng tạo và bật lên theo kiểu bạn muốn , với định dạng và địa điểm bạn muốn, gọi lại và danh sách dài các tùy chọn của bạn (bạn đã có toàn bộ API tùy chỉnh theo ý của bạn!)

Tuân thủ tiêu chuẩn, không hack.

Kiểm tra kỹ các polyfill có sẵn , những trình duyệt / phiên bản nào chúng hỗ trợ và nếu nó chiếm đủ% cơ sở người dùng của bạn thì đó là 2018, vì vậy rất có thể nó sẽ bao phủ hầu hết người dùng của bạn.

Hy vọng nó giúp!

Như đã đề cập trước đây, chính thức không thể thay đổi định dạng. Tuy nhiên, có thể định kiểu trường, vì vậy (với một chút trợ giúp về JS) nó sẽ hiển thị ngày theo định dạng mà chúng ta mong muốn. Một số khả năng thao túng đầu vào ngày bị mất theo cách này, nhưng nếu mong muốn buộc định dạng lớn hơn, giải pháp này có thể là một cách. Một trường ngày chỉ ở lại như thế:

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

Phần còn lại là một chút CSS và 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">

Nó hoạt động độc đáo trên Chrome dành cho máy tính để bàn và Safari trên iOS (đặc biệt đáng mong đợi, vì các trình điều khiển ngày gốc trên màn hình cảm ứng là IMHO không thể đánh bại). Không kiểm tra người khác, nhưng đừng hy vọng thất bại trên bất kỳ Webkit nào.

Điều quan trọng là phải phân biệt hai định dạng khác nhau :

• "Định dạng dây" RFC 3339 / ISO 8601: YYYY-MM-DD. Theo đặc tả HTML5, đây là định dạng phải được sử dụng cho giá trị của đầu vào khi gửi biểu mẫu hoặc khi được yêu cầu thông qua API DOM. Đó là địa phương và khu vực độc lập.
• Định dạng được hiển thị bởi điều khiển giao diện người dùng và được chấp nhận làm đầu vào của người dùng. Các nhà cung cấp trình duyệt được khuyến khích tuân theo lựa chọn tùy chọn của người dùng. Ví dụ: trên Mac OS có khu vực "Hoa Kỳ" được chọn trong ngăn tùy chọn Ngôn ngữ & Văn bản, Chrome 20 sử dụng định dạng "m / d / yy".

Đặc tả HTML5 không bao gồm bất kỳ phương tiện ghi đè hoặc chỉ định thủ công định dạng nào.

Tôi tin rằng trình duyệt sẽ sử dụng định dạng ngày địa phương. Đừng nghĩ rằng nó có thể thay đổi. Tất nhiên bạn có thể sử dụng một bộ chọn ngày tùy chỉnh.

Google Chrome trong phiên bản beta cuối cùng của nó cuối cùng cũng sử dụng đầu vào type=datevà định dạng là DD-MM-YYYY.

Vì vậy, phải có một cách để buộc một định dạng cụ thể. Tôi đang phát triển một trang web HTML5 và các tìm kiếm ngày hiện không thành công với các định dạng khác nhau.

Hãy thử điều này nếu bạn cần một giải pháp nhanh chóng để làm cho yyyy-mm-dd đi "dd- tháng 9-2016"

1) Tạo gần một lớp nhịp đầu vào của bạn (hoạt động như nhãn)

2) Cập nhật nhãn mỗi khi ngày của bạn bị thay đổi bởi người dùng hoặc khi cần tải từ dữ liệu.

Hoạt động cho điện thoại di động trình duyệt webkit và các sự kiện con trỏ cho IE11 + yêu cầu jQuery và 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>

Sau khi đọc rất nhiều cuộc thảo luận, tôi đã chuẩn bị một giải pháp đơn giản nhưng tôi không muốn sử dụng nhiều Jquery và CSS, chỉ là một số javascript.

Mã HTML:

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

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ư đã nói, phần mềm <input type=date ... >này không được triển khai đầy đủ trong hầu hết các trình duyệt, vì vậy hãy nói về bộ webkit như trình duyệt (chrome).

Sử dụng linux, bạn có thể thay đổi nó bằng cách thay đổi biến môi trường LANG, LC_TIMEdường như không hoạt động (ít nhất là đối với tôi).

Bạn có thể nhập localevào một thiết bị đầu cuối để xem các giá trị hiện tại của bạn. Tôi nghĩ rằng khái niệm tương tự có thể được áp dụng cho iOS.

ví dụ: Sử dụng:

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

Ngày được hiển thị là mm/dd/yyyy

Sử dụng:

LANG=pt_BR /opt/google/chrome/chrome

Ngày được hiển thị là dd/mm/yyyy

Bạn có thể sử dụng http://lh.2xlibre.net/locale/pt_BR/ (thay đổi pt_BRtheo địa phương của bạn) để tạo địa điểm tùy chỉnh của riêng bạn và định dạng ngày của bạn theo ý muốn.

Một tài liệu tham khảo nâng cao hơn về cách thay đổi ngày hệ thống mặc định là: https://ccollins.wordpress.com/2009/01/06/how-to-change-date-formats-on-ub Ubuntu / và https: // Askubfox. com / câu hỏi / 21316 / how-can-i-custom-a-system-locale

Bạn có thể thấy bạn định dạng ngày thực hiện tại bằng cách sử dụng date:

$ date +%x
01-06-2015

Nhưng khi LC_TIMEvà d_fmtdường như bị từ chối bởi chrome (và tôi nghĩ rằng đó là một lỗi trong webkit hoặc chrome), thật đáng buồn nó không làm việc . : '(

Vì vậy, không may là phản hồi, là LANGbiến môi trường IF không giải quyết được vấn đề của bạn, vẫn chưa có cách nào.

Các trình duyệt có được định dạng ngày nhập từ định dạng ngày hệ thống của người dùng.

(Đã thử nghiệm trong các trình duyệt được hỗ trợ, Chrome, Edge.)

Vì hiện tại không có tiêu chuẩn nào được xác định bởi thông số kỹ thuật để thay đổi phong cách kiểm soát ngày, nên không thể thực hiện tương tự trong các trình duyệt.

Tuy nhiên, hành vi lấy định dạng ngày này từ cài đặt hệ thống là tốt hơn và tôi thực sự khuyên bạn, chúng ta không nên cố gắng ghi đè lên. Lý do là, người dùng sẽ thấy định dạng của ngày nhập giống như họ đã định cấu hình trong hệ thống / thiết bị và họ cảm thấy thoải mái với hoặc khớp với ngôn ngữ của họ.

Hãy nhớ rằng, đây chỉ là định dạng UI trên màn hình mà người dùng nhìn thấy, trong javascript / phụ trợ của bạn, bạn luôn có thể giữ định dạng mong muốn của mình.

Tham khảo trang nhà phát triển google trên cùng.

Không thể thay đổi trình duyệt bộ công cụ web sử dụng định dạng ngày mặc định của máy tính hoặc điện thoại di động. Nhưng nếu bạn có thể sử dụng jquery và jquery UI thì có một công cụ chọn ngày có thể thiết kế và có thể được hiển thị ở bất kỳ định dạng nào như nhà phát triển muốn. liên kết đến trình chọn ngày của giao diện người dùng jquery có trên trang này http://jqueryui.com/datepicker/ bạn có thể tìm thấy bản demo cũng như mã và tài liệu hoặc liên kết tài liệu

Chỉnh sửa: -Tôi thấy rằng chrome sử dụng các cài đặt ngôn ngữ theo mặc định bằng với cài đặt hệ thống nhưng người dùng có thể thay đổi chúng nhưng nhà phát triển không thể buộc người dùng làm như vậy nên bạn phải sử dụng các giải pháp js khác như tôi nói bạn có thể tìm kiếm trên web với các truy vấn như trình chọn ngày javascript hoặc trình chọn ngày jquery

Tôi tìm thấy một cách để thay đổi định dạng, đó là một cách khó khăn, tôi chỉ thay đổi diện mạo của các trường nhập ngày bằng cách sử dụng mã 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">

Vì bài viết đang hoạt động 2 tháng trước. Vì vậy, tôi nghĩ để cung cấp đầu vào của tôi là tốt.

Trong trường hợp của tôi, tôi nhận được ngày từ một đầu đọc thẻ có định dạng dd / mm / yyyy.

những gì tôi làm. Ví dụ

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

những gì mã làm:

1. nó phân tách ngày mà tôi nhận là dd / mm / yyyy (sử dụng split ()) trên cơ sở "/" và tạo một mảng,
2. sau đó đảo ngược mảng (sử dụng Reverse ()) vì đầu vào ngày hỗ trợ đảo ngược những gì tôi nhận được.
3. sau đó nó tham gia (sử dụng phép nối ()) mảng thành một chuỗi theo định dạng theo yêu cầu của trường đầu vào

Tất cả điều này được thực hiện trong một dòng duy nhất.

Tôi nghĩ rằng điều này sẽ giúp một số người vì vậy tôi đã viết này.

Tôi đã tìm kiếm vấn đề này 2 năm trước và các tìm kiếm google của tôi lại dẫn tôi đến câu hỏi này. Đừng lãng phí thời gian của bạn để cố gắng xử lý việc này với JavaScript thuần túy. Tôi lãng phí thời gian của tôi để cố gắng để làm cho nó dd/mm/yyyy. Không có giải pháp hoàn chỉnh phù hợp với tất cả các trình duyệt. Vì vậy, tôi khuyên bạn nên sử dụng jQuery datepicker hoặc bảo khách hàng của bạn làm việc với định dạng ngày mặc định

Tôi biết đó là một bài viết cũ nhưng nó là gợi ý đầu tiên trong tìm kiếm google, trả lời ngắn gọn, đề nghị người dùng trả lời một người thích ngày tùy chỉnh, câu trả lời đúng mà tôi sử dụng là sử dụng hộp văn bản để mô phỏng đầu vào ngày 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 đối với trình duyệt hỗ trợ loại ngày.

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

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

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 ví dụ năm + "/" + tháng + "/" + ngày và trong văn bản nhập sử dụng trình giữ chỗ hoặc giá trị như yyyy / mm / dd cho người dùng khi tải trang.