I'm bekerja dengan HTML5 elemen pada halaman web saya. Secara default input type="tanggal"
menunjukkan tanggal sebagai YYYY-MM-DD
.
Pertanyaannya adalah, apakah mungkin untuk mengubah format untuk sesuatu seperti: DD-MM-YYYY
?
Hal ini tidak mungkin untuk mengubah format
Kita harus membedakan antara bagian atas kawat format dan browser's presentation format.
The HTML5 input tanggal keterangan mengacu pada RFC3339 spesifikasi, yang menentukan penuh-format tanggal yang sama dengan: yyyy-mm-dd
. Lihat bagian 5.6 dari RFC3339 spesifikasi untuk rincian lebih lanjut.
Browser yang terbatas dalam cara mereka menyajikan date input. Pada saat penulisan Chrome, Edge, Firefox, dan Opera memiliki tanggal mendukung (lihat di sini). Mereka semua menampilkan tanggal picker dan format teks dalam kolom input.
Perangkat Desktop
Untuk Chrome, Firefox, dan Opera, format input field's teks didasarkan pada browser's pengaturan bahasa. Untuk Edge, hal ini didasarkan pada Jendela pengaturan bahasa. Sayangnya, semua web browser mengabaikan format tanggal dikonfigurasi dalam sistem operasi. Bagi saya ini sangat aneh, perilaku, dan sesuatu yang perlu dipertimbangkan ketika menggunakan ini jenis input. Misalnya, pengguna belanda yang memiliki sistem operasi atau browser mengatur bahasa untuk en-us
akan ditampilkan 01/30/2019
bukan dari format mereka terbiasa: 30-01-2019
.
Internet Explorer 9, 10, dan 11 tampilan input teks dengan bidang kawat format.
PerangkatMobile**
Khusus untuk Chrome di Android, format ini didasarkan pada Android bahasa tampilan. Saya menduga bahwa hal yang sama berlaku untuk browser yang lain, meskipun aku've tidak bisa untuk memverifikasi ini.
Karena pertanyaan ini diajukan beberapa hal yang telah terjadi di web dunia, dan salah satu yang paling menarik adalah arahan dari komponen web. Sekarang anda dapat memecahkan masalah ini elegan dengan custom elemen HTML5 dirancang sesuai dengan kebutuhan anda. Jika anda ingin mengganti/mengubah cara kerja dari setiap tag html untuk membangun, anda bermain dengan bayangan dom.
Kabar baiknya adalah bahwa sudah ada banyak boilerplate tersedia sehingga kemungkinan besar anda tidak akan perlu untuk datang dengan solusi dari awal. Hanya cek apa yang orang-orang yang sedang membangun dan mendapatkan ide-ide dari sana.
Anda bisa mulai dengan sederhana (dan kerja) solusi 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 kreatif dan pop-up lengkap-tanggal pemetik bergaya seperti yang anda inginkan, dengan format dan terkenal yang anda inginkan, callback, dan daftar panjang opsi (anda punya seluruh kustom API anda inginkan!)
Standar-compliant, tidak ada hacks.
Periksa tersedia polyfills, yang browser/versions mereka mendukung, dan jika ini mencakup cukup % dari basis pengguna anda... Itu's 2018, jadi kemungkinan itu'll pasti menutupi sebagian besar pengguna anda.
Semoga membantu!
Seperti yang telah disebutkan sebelumnya secara resmi tidak mungkin untuk mengubah format. Namun adalah mungkin untuk gaya lapangan, sehingga (dengan sedikit JS bantuan) itu menampilkan tanggal dalam format yang kita inginkan. Beberapa kemungkinan untuk memanipulasi tanggal input hilang dengan cara ini, tetapi jika keinginan untuk memaksa format yang lebih besar, solusi ini mungkin menjadi cara. Tanggal ladang tetap saja seperti itu:
<input type="date" data-date="" data-date-format="DD MMMM YYYY" value="2015-08-09">
Sisanya adalah sedikit CSS dan JS:
Ia bekerja dengan baik pada Chrome untuk desktop, dan Safari pada iOS (terutama diinginkan, asli sejak tanggal manipulator pada layar sentuh yang tak terkalahkan IMHO). Didn't check untuk orang lain, tapi don't mengharapkan untuk gagal pada setiap Webkit.
It's penting untuk membedakan dua format yang berbeda:
Spesifikasi HTML5 tidak termasuk sarana utama atau secara manual menentukan format baik.
Setelah banyak rintangan, aku datang dengan solusi yang memungkinkan mengubah <input type="tanggal"> format. Ada beberapa peringatan tapi dapat digunakan jika anda ingin memiliki 'Januari' atau '01' yang ditampilkan secara konsisten. Ia bekerja di Chrome pada Windows dan Mac hanya karena fakta bahwa Firefox belum mendukung native tanggal pemetik sama sekali.
https://github.com/northamerican/custom-input-date-format
JS:
function updateDateInputs() {
$('input').each(function() {
var $date = $(this),
date = $date.val().split('-'),
format = ['year', 'month', 'day'];
$.each(format, function(i, v) {
$date.attr('data-' + v, +date[i]);
});
});
}
SASS:
$months: '01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12';
@each $month in $months {
$i: index($months, $month);
input[data-month="#{$i}"][data-style="reg"]::-webkit-datetime-edit-month-field:after {
content: "#{$month}";
}
}
Google Chrome untuk versi terakhir versi beta akhirnya menggunakan input type=date
, dan format DD-MM-YYYY
.
Jadi harus ada cara untuk memaksa format tertentu. I'm mengembangkan HTML5 halaman web dan tanggal pencarian sekarang gagal dengan format yang berbeda.
Coba ** ini jika anda perlu solusi cepat** Untuk membuat yyyy-mm-dd pergi "dd - Sep -2016"
Buat dekat anda masukan salah satu span class (bertindak sebagai label)
Pembaruan label setiap kali anda tanggal diubah oleh pengguna, atau bila perlu memuat data.
Karya untuk webkit browser ponsel dan pointer-acara untuk IE11+ membutuhkan jQuery dan Jquery Upload
$("#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 sebuah solusi sederhana tapi aku don't ingin menggunakan banyak Jquery dan CSS, hanya beberapa javascript.
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;
}
Output:
It's tidak mungkin untuk mengubah browser web-kit menggunakan user's komputer atau ponsel default format tanggal. Tapi jika anda dapat menggunakan jquery dan jquery UI ada date-picker yang designable dan dapat ditampilkan dalam format apapun seperti yang diinginkan pengembang. link ke jquery UI date-picker di halaman ini http://jqueryui.com/datepicker/ anda dapat menemukan demo serta kode dan dokumentasi atau dokumentasi link
Edit:-saya menemukan bahwa chrome menggunakan pengaturan bahasa yang standarnya sama untuk pengaturan sistem, tetapi pengguna dapat mengubah mereka, tetapi pengembang dapat't memaksa pengguna untuk melakukan sehingga anda harus menggunakan js solusi seperti yang saya katakan, anda dapat mencari web dengan pertanyaan seperti javascript date-pemetik atau jquery date-picker
Seperti dikatakan, <input type=date ... >
tidak sepenuhnya dapat diterapkan di sebagian besar browser, jadi let's berbicara tentang webkit seperti browser (chrome).
Menggunakan linux, anda dapat mengubahnya dengan mengubah variabel lingkungan LANG
, LC_TIME
don't tampaknya bekerja(bagi saya setidaknya).
Anda dapat mengetik lokal
di terminal untuk melihat nilai anda saat ini. Saya pikir konsep yang sama dapat diterapkan untuk IOS.
misalnya: Menggunakan:
LANG=en_US.UTF-8 /opt/google/chrome/chrome
Tanggal ini menunjukkan sebagai mm/dd/yyyy
Menggunakan:
LANG=pt_BR /opt/google/chrome/chrome
Tanggal ini menunjukkan sebagai dd/mm/yyyy
Anda dapat menggunakan http://lh.2xlibre.net/locale/pt_BR/ (perubahan pt_BR
dengan lokal anda) untuk membuat anda sendiri kustom lokal dan format tanggal yang anda inginkan.
Bagus lebih maju referensi tentang cara mengubah default sistem tanggal adalah: https://ccollins.wordpress.com/2009/01/06/how-to-change-date-formats-on-ubuntu/ dan https://askubuntu.com/questions/21316/how-can-i-customize-a-system-locale
Anda dapat melihat anda yang sebenarnya saat ini format tanggal menggunakan tanggal
:
$ date +%x
01-06-2015
Tapi sebagai LC_TIME
dan d_fmt
tampaknya akan ditolak oleh chrome ( dan saya pikir itu's bug di webkit atau chrome ), sayangnya itu don't bekerja. :'(
Jadi, sayangnya respon, JIKA LANG
variabel lingkungan tidak memecahkan masalah anda, tidak ada cara lagi.
Browser mendapatkan tanggal-format input dari pengguna's format tanggal sistem.
(Diuji di browser yang didukung, Chrome, Tepi.)
Karena tidak ada standar yang didefinisikan oleh spesifikasi dari sekarang untuk mengubah gaya upload kontrol, yang tidak mungkin untuk menerapkan hal yang sama di browser.
Namun, perilaku Ini memperoleh format tanggal dari sistem pengaturan yang lebih baik dan saya sangat menyarankan, kita tidak harus mencoba untuk mengabaikan hal itu. Alasannya, pengguna akan melihat tanggal-input's format yang sama seperti yang mereka telah dikonfigurasi dalam sistem/perangkat dan yang mereka merasa nyaman dengan atau cocok dengan mereka lokal.
Ingat, ini hanya UI format pada layar yang dilihat pengguna, dalam javascript/backend anda selalu dapat menjaga format yang diinginkan.
Aku tahu itu's sebuah posting lama tapi itu datang sebagai saran pertama dalam pencarian google, jawaban singkat tidak, dianjurkan jawaban pengguna kustom tanggal piker , jawaban yang benar yang saya gunakan adalah dengan menggunakan kotak teks untuk mensimulasikan date input dan melakukan format apapun yang anda inginkan, berikut adalah kode
<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">▼</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 bekerja untuk browser yang mendukung jenis tanggal.
2 - fungsi pertama dalam kode JS untuk browser yang don't mendukung jenis tanggal dan mengatur tampilan untuk input teks normal.
3 - jika anda akan menggunakan kode ini untuk beberapa saat input di halaman anda silahkan ganti ID "xTime" input teks di kedua fungsi call dan input itu sendiri untuk sesuatu yang lain dan tentu saja menggunakan nama input yang anda inginkan untuk form submit.
4-pada kedua fungsi anda dapat menggunakan format apapun yang anda inginkan, bukan hari+" / "+bulan+" / "+tahun misalnya tahun+" / "+bulan+" / "+hari dan di input teks menggunakan placeholder atau yyyy / mm / dd untuk pengguna ketika halaman di-load.
Sejak posting aktif 2 Bulan yang lalu. jadi saya berpikir untuk memberikan saya masukan juga.
Dalam kasus saya, saya menerima upload dari pembaca kartu yang datang dalam dd/mm/yyyy.
apa yang saya lakukan. E. g.
var d="16/09/2019" // date received from card
function filldate(){
document.getElementById('cardexpirydate').value=d.split('/').reverse().join("-");
}
<input type="date" id="cardexpirydate">
apa kode do:
Semua ini dilakukan dalam satu baris.
saya pikir ini akan membantu seseorang jadi saya menulis ini.