Apakah ada cara untuk mengubah format input type = "date"?

Saya bekerja dengan elemen HTML5 di halaman web saya. Secara default input type="date"menunjukkan tanggal sebagai YYYY-MM-DD.

Pertanyaannya adalah, apakah mungkin mengubah formatnya menjadi seperti DD-MM-YYYY:?

Tidak mungkin mengubah format

Kami harus membedakan antara format over the wire dan format presentasi browser.

Format kawat

The spesifikasi masukan tanggal HTML5 mengacu pada RFC 3339 spesifikasi , yang menentukan format full-tanggal sama ke: yyyy-mm-dd. Lihat bagian 5.6 dari spesifikasi RFC 3339 untuk lebih jelasnya.

Format ini digunakan oleh valueatribut HTML dan properti DOM dan adalah yang digunakan ketika melakukan pengiriman formulir biasa.

Format presentasi

Browser tidak dibatasi dalam cara mereka menyajikan input tanggal. Pada saat penulisan, Chrome, Edge, Firefox, dan Opera memiliki dukungan tanggal (lihat di sini ). Mereka semua menampilkan pemilih tanggal dan memformat teks di bidang input.

Perangkat desktop

Untuk Chrome, Firefox, dan Opera, format teks bidang input didasarkan pada pengaturan bahasa browser. Untuk Edge, ini didasarkan pada pengaturan bahasa Windows. Sayangnya, semua browser web mengabaikan format tanggal yang dikonfigurasi dalam sistem operasi. Bagi saya ini adalah perilaku yang sangat aneh, dan sesuatu yang perlu dipertimbangkan ketika menggunakan tipe input ini. Sebagai contoh, pengguna Belanda yang memiliki sistem operasi atau set bahasa browser en-usakan ditampilkan 01/30/2019sebagai pengganti format mereka terbiasa: 30-01-2019.

Internet Explorer 9, 10, dan 11 menampilkan bidang input teks dengan format kawat.

Perangkat seluler

Khusus untuk Chrome di Android, pemformatan didasarkan pada bahasa tampilan Android. Saya menduga hal yang sama berlaku untuk browser lain, walaupun saya belum dapat memverifikasi ini.

Karena pertanyaan ini ditanyakan beberapa hal telah terjadi di dunia web, dan salah satu yang paling menarik adalah pendaratan komponen web . Sekarang Anda dapat menyelesaikan masalah ini dengan elegan dengan elemen HTML5 khusus yang dirancang sesuai dengan kebutuhan Anda. Jika Anda ingin mengganti / mengubah cara kerja tag html apa saja, buat saja permainan Anda dengan shadow dom .

Kabar baiknya adalah bahwa sudah ada banyak boilerplate yang tersedia sehingga kemungkinan besar Anda tidak perlu menemukan solusi dari awal. Periksa saja apa yang sedang dibangun orang dan dapatkan ide dari sana.

Anda bisa mulai dengan solusi sederhana (dan berfungsi) seperti datetime-input untuk polimer yang memungkinkan Anda untuk menggunakan tag seperti ini:

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

atau Anda bisa mendapatkan pemilih tanggal yang kreatif dan pop-up dengan gaya sesuai keinginan , dengan pemformatan dan lokal yang Anda inginkan, panggilan balik, dan daftar panjang opsi Anda (Anda memiliki API kustom lengkap yang Anda inginkan!)

Sesuai standar, tidak ada retasan.

Periksa ulang polyfill yang tersedia , browser / versi apa yang mereka dukung, dan jika mencakup cukup% dari basis pengguna Anda ... Ini 2018, jadi kemungkinan besar itu akan mencakup sebagian besar pengguna Anda.

Semoga ini bisa membantu!

Seperti disebutkan sebelumnya secara resmi tidak mungkin untuk mengubah format. Namun dimungkinkan untuk mendesain bidang, jadi (dengan sedikit bantuan JS) ini menampilkan tanggal dalam format yang kita inginkan. Beberapa kemungkinan untuk memanipulasi input tanggal hilang dengan cara ini, tetapi jika keinginan untuk memaksakan format lebih besar, solusi ini mungkin menjadi cara. Bidang tanggal hanya tetap seperti itu:

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

Sisanya adalah sedikit CSS dan 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">

Ini bekerja dengan baik di Chrome untuk desktop, dan Safari di iOS (terutama diinginkan, karena manipulator tanggal asli pada layar sentuh adalah IMHO yang tidak ada duanya). Tidak memeriksa orang lain, tetapi jangan berharap gagal di Webkit apa pun.

Penting untuk membedakan dua format berbeda :

• "Format kawat" RFC 3339 / ISO 8601: YYYY-MM-DD. Menurut spesifikasi HTML5, ini adalah format yang harus digunakan untuk nilai input pada saat pengiriman formulir atau ketika diminta melalui DOM API. Ini adalah lokal dan wilayah yang independen.
• Format ditampilkan oleh kontrol antarmuka pengguna dan diterima sebagai input pengguna. Vendor browser didorong untuk mengikuti pilihan preferensi pengguna. Misalnya, pada Mac OS dengan wilayah "Amerika Serikat" dipilih di panel Bahasa & Teks, Chrome 20 menggunakan format "m / d / yy".

Spesifikasi HTML5 tidak termasuk cara mengganti atau secara manual menentukan format apa pun.

Saya percaya browser akan menggunakan format tanggal lokal. Jangan berpikir itu mungkin untuk berubah. Anda tentu saja dapat menggunakan pemilih tanggal kustom.

Google Chrome dalam versi beta terakhirnya akhirnya menggunakan input type=date, dan formatnya adalah DD-MM-YYYY.

Jadi harus ada cara untuk memaksa format tertentu. Saya sedang mengembangkan halaman web HTML5 dan pencarian tanggal sekarang gagal dengan format yang berbeda.

Coba ini jika Anda memerlukan solusi cepat Untuk membuat yyyy-mm-dd pergi "dd- Sep -2016"

1) Buat di dekat input Anda satu rentang kelas (bertindak sebagai label)

2) Perbarui label setiap kali tanggal Anda diubah oleh pengguna, atau ketika perlu memuat dari data.

Bekerja untuk ponsel browser webkit dan acara-pointer untuk IE11 + membutuhkan jQuery dan 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>

Setelah membaca banyak diskusi, saya telah menyiapkan solusi sederhana tetapi saya tidak ingin menggunakan banyak Jquery dan CSS, hanya beberapa javascript.

Kode HTML:

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

Kode CSS:

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

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

Keluaran:

Seperti yang dikatakan, <input type=date ... >ini tidak sepenuhnya diimplementasikan di sebagian besar browser, jadi mari kita bicara tentang webkit seperti browser (chrome).

Menggunakan linux, Anda dapat mengubahnya dengan mengubah variabel lingkungan LANG, LC_TIMEsepertinya tidak berfungsi (setidaknya untuk saya).

Anda dapat mengetik localedi terminal untuk melihat nilai Anda saat ini. Saya pikir konsep yang sama dapat diterapkan ke iOS.

misalnya: Menggunakan:

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

Tanggal ditampilkan sebagai mm/dd/yyyy

Menggunakan:

LANG=pt_BR /opt/google/chrome/chrome

Tanggal ditampilkan sebagai dd/mm/yyyy

Anda dapat menggunakan http://lh.2xlibre.net/locale/pt_BR/ (ubah pt_BRdengan lokal Anda) untuk membuat sendiri lokal kustom dan format tanggal sesuai keinginan.

Referensi yang lebih maju tentang perubahan tanggal sistem default adalah: https://ccollins.wordpress.com/2009/01/06/how-to-change-date-formats-on-ubuntu/ dan https: // askubuntu. com / pertanyaan / 21316 / bagaimana-bisa-saya-menyesuaikan-sistem-lokal

Anda dapat melihat Anda format tanggal sebenarnya saat ini menggunakan date:

$ date +%x
01-06-2015

Tetapi karena LC_TIMEdan d_fmttampaknya ditolak oleh chrome (dan saya pikir itu bug di webkit atau chrome), sayangnya itu tidak berhasil . : '(

Jadi, sayangnya jawabannya, jika LANGvariabel lingkungan tidak menyelesaikan masalah Anda, belum ada cara.

Browser memperoleh format input tanggal dari format tanggal sistem pengguna.

(Diuji di browser yang didukung, Chrome, Edge.)

Karena tidak ada standar yang ditentukan oleh spesifikasi untuk mengubah gaya kontrol tanggal, tidak mungkin untuk menerapkan hal yang sama di browser.

Namun, perilaku mendapatkan format tanggal dari pengaturan sistem ini lebih baik dan saya sangat menyarankan, kita tidak boleh mencoba menimpanya. Alasannya adalah, pengguna akan melihat format input-tanggal sama seperti yang telah mereka konfigurasikan dalam sistem / perangkat dan mereka merasa nyaman atau cocok dengan lokal mereka.

Ingat, ini hanya format UI pada layar yang dilihat pengguna, dalam javascript / backend Anda, Anda selalu dapat menyimpan format yang Anda inginkan.

Rujuk halaman pengembang Google pada yang sama.

Tidak mungkin mengubah browser kit web menggunakan komputer pengguna atau format tanggal default ponsel. Tetapi jika Anda dapat menggunakan jquery dan jquery UI ada pemilih tanggal yang dirancang dan dapat ditampilkan dalam format apa pun sesuai keinginan pengembang. tautan ke pemilih tanggal UI jquery ada di halaman ini http://jqueryui.com/datepicker/ Anda dapat menemukan demo serta kode dan dokumentasi atau tautan dokumentasi

Sunting: -Saya menemukan bahwa chrome menggunakan pengaturan bahasa yang secara default sama dengan pengaturan sistem tetapi pengguna dapat mengubahnya tetapi pengembang tidak dapat memaksa pengguna untuk melakukannya sehingga Anda harus menggunakan solusi js lain seperti saya katakan Anda dapat mencari di web dengan kueri seperti pemetik tanggal javascript atau pemetik tanggal jquery

saya menemukan cara untuk mengubah format, ini cara yang sulit, saya baru saja mengubah tampilan bidang input tanggal hanya menggunakan kode 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">

Sejak posting aktif 2 bulan lalu. jadi saya berpikir untuk memberi masukan juga.

Dalam kasus saya, saya menerima tanggal dari pembaca kartu yang datang dalam format dd / mm / yyyy.

apa yang saya lakukan. Misalnya

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

apa yang kode lakukan:

1. itu membagi tanggal yang saya dapatkan sebagai dd / mm / yyyy (menggunakan split ()) berdasarkan "/" dan membuat array,
2. kemudian membalikkan array (menggunakan reverse ()) karena input tanggal mendukung kebalikan dari apa yang saya dapatkan.
3. kemudian bergabung (menggunakan join ()) array ke string sesuai format yang diperlukan oleh bidang input

Semua ini dilakukan dalam satu baris.

Saya pikir ini akan membantu seseorang jadi saya menulis ini.

Saya mencari masalah ini 2 tahun yang lalu, dan pencarian google saya mengarahkan saya lagi ke pertanyaan ini. Jangan buang waktu Anda untuk mencoba menangani ini dengan JavaScript murni. Saya buang-buang waktu mencoba membuatnya dd/mm/yyyy. Tidak ada solusi lengkap yang cocok dengan semua browser. Jadi saya sarankan untuk menggunakan jQuery datepicker atau memberi tahu klien Anda untuk bekerja dengan format tanggal default sebagai gantinya

Saya tahu ini adalah posting lama tetapi muncul sebagai saran pertama di pencarian google, jawaban singkat tidak, pengguna jawaban yang disarankan piker tanggal kustom, jawaban yang benar yang saya gunakan menggunakan kotak teks untuk mensimulasikan input tanggal dan melakukan format apa pun yang Anda inginkan , ini kodenya

<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- harap dicatat bahwa metode ini hanya berfungsi untuk browser yang mendukung jenis tanggal.

2- fungsi pertama dalam kode JS adalah untuk browser yang tidak mendukung tipe tanggal dan mengatur tampilan ke input teks normal.

3 - jika Anda akan menggunakan kode ini untuk beberapa input tanggal di halaman Anda, harap ubah ID "xTime" dari input teks di kedua panggilan fungsi dan input itu sendiri untuk sesuatu yang lain dan tentu saja gunakan nama input yang Anda inginkan untuk formulir kirim.

4-pada fungsi kedua Anda dapat menggunakan format apa pun yang Anda inginkan alih-alih hari + "/" + bulan + "/" + tahun misalnya tahun + "/" + bulan + "/" + hari dan dalam input teks gunakan pengganti atau nilai sebagai yyyy / mm / dd untuk pengguna saat halaman dimuat.