Bagaimana cara mengatur format tanggal dalam tag input tanggal HTML?

105

Saya bertanya-tanya apakah mungkin untuk menyetel format tanggal di <input type="date"></input>tag html ... Saat ini adalah tttt-bb-hh, sementara saya membutuhkannya dalam format hh-mm-tttt.

— Piotr
sumber

3

Bukankah ini merupakan duplikat dari Menentukan nilai keluaran dari input HTML5 type = date? ? Saya akan mengatakan, pertanyaan ini di sini lebih baik ditanyakan daripada pertanyaan yang lebih tua, tetapi pertanyaan yang lebih tua itu memiliki jawaban yang cukup bagus.

— Arsen7

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

— Vaibhav Mule

Pengaturan negara saya adalah Belanda, dan di Chrome menampilkan DD-MM-YYYY. Sepertinya itu tergantung pada pengaturan jendela klien yang menggunakan situs web.

— dark_passages

11

Kamu tidak.

Pertama, pertanyaan Anda rancu - apakah maksud Anda format yang ditampilkan kepada pengguna, atau format yang dikirimkan ke server web?

Jika yang Anda maksud adalah format yang ditampilkan kepada pengguna, maka ini tergantung pada antarmuka pengguna akhir, bukan apa pun yang Anda tentukan dalam HTML. Biasanya, saya mengharapkannya berdasarkan pada format tanggal yang ditetapkan dalam pengaturan lokal sistem operasi. Tidak masuk akal untuk mencoba menimpanya dengan format pilihan Anda sendiri, karena format yang ditampilkannya (secara umum) adalah yang benar untuk lokal pengguna dan format yang digunakan pengguna untuk menulis / memahami tanggal.

Jika yang Anda maksud adalah format pengirimannya ke server, Anda mencoba memperbaiki masalah yang salah. Yang perlu Anda lakukan adalah memprogram kode sisi server untuk menerima tanggal dalam format tttt-bb-hh.

— Stewart
sumber

1

Sayangnya, komentar kedua Anda tidak sepenuhnya benar di dunia nyata. Beberapa browser, seperti Chrome dan Opera, setidaknya menghormati urutan entitas, meskipun tidak lebih dari itu. Misalnya, pengaturan lokal OS saya menetapkan bahwa sebagai tanggal singkat, hari pertama Agustus tahun ini harus 1 / 8-2016 , tetapi bahkan Chrome dan Opera menunjukkan 01/08/2016 . Browser lain, seperti Safari dan Firefox (setidaknya di OS X) mengabaikan pengaturan OS sepenuhnya dan selalu menampilkan 2016-08-16 apa pun yang terjadi. Di situs di mana pengguna dapat mengatur preferensi tanggal mereka sendiri, tentu masuk akal untuk menimpa ini.

— Janus Bahs Jacquet

(Abaikan catatan tentang Firefox dan Safari ... Saya lelah. Tidak ada browser yang mendukung jenis tanggal sama sekali, jadi mereka hanya menampilkan format nilai yang mendasarinya, yang dalam kasus kode saya saat ini adalah YYYY-MM-DD .)

— Janus Bahs Jacquet

Apakah sebagian besar orang bertanya bagaimana cara mengubah format tanggal tampilan / masukan yang ingin memungkinkan pengguna mengatur preferensi mereka sendiri, atau menerapkan format tanggal pilihan mereka sendiri di dunia? Yang terakhir adalah sesuatu yang tidak boleh dilakukan oleh siapa pun, seperti yang telah saya katakan, tetapi Anda dapat berdebat dengan cara apa pun tentang apakah yang pertama sesuai. Tapi itu akan menjadi pengaturan presentasi, jadi di luar cakupan HTML.

— Stewart

Masalahnya adalah bahwa ini adalah pengaturan presentasi yang tidak dapat diatur . Pengaturan presentasi pada umumnya termasuk dalam CSS, tetapi tidak ada cara untuk mengubahnya di CSS (atau di mana pun). Selain itu, bahkan spesifikasi HTML itu sendiri tidak bebas dari pengaturan penyajian. Misalnya, bagian tentang input[type=password]mengatakan bahwa "agen pengguna harus mengaburkan nilai sehingga orang selain pengguna tidak dapat melihatnya", yang sama banyaknya dengan presentasi yang mengatakan bahwa agen pengguna harus menyajikan tanggal dengan cara tertentu.

— Janus Bahs Jacquet

1

Beberapa orang akan mengatakan itu adalah hal yang baik bahwa itu tidak dapat diatur, karena mencegah webmaster untuk membuat format tanggal pilihan mereka sendiri di dunia. Tapi masukan kata sandi membuat saya berpikir. Di banyak tempat, spesifikasi HTML memang memberikan rekomendasi presentasi, yang pada dasarnya merupakan rekomendasi untuk stylesheet default browser. Perbedaannya di sini adalah bahwa sepertinya tidak ada properti CSS untuk aspek presentasi khusus ini.

— Stewart

11

Saya menemukan pertanyaan yang sama atau pertanyaan terkait di stackoverflow

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

Saya menemukan satu solusi sederhana, Anda tidak dapat memberikan Format partikulat tetapi Anda dapat menyesuaikan Seperti ini.

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

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:

— ashish bhatt
sumber

Bahkan lebih baik - gunakan css untuk memposisikan kontrol tanggal transparan di atas input biasa

— George Mauer

Terima kasih atas balasan Anda, jika Anda memiliki tautan atau kode untuk ini, saya perlu memperbarui

— ashish bhatt

Ini adalah pilihan yang bagus.

— Dillon Burnett

Saya pikir dia bertanya apakah mungkin dengan HTML (berdasarkan pertanyaan), bukan CSS atau Javascript.

— Shizukura

6

Jika Anda menggunakan jQuery, berikut adalah metode sederhana yang bagus

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

Atau ada cara tradisional lama:

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

— sean.boyer
sumber

4

Mengapa tidak menggunakan kontrol tanggal html5 apa adanya, dengan atribut lain yang memungkinkannya berfungsi dengan baik di browser yang mendukung jenis tanggal dan masih berfungsi di browser lain seperti firefox yang belum mendukung jenis tanggal

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

— Paul IE

8

Persyaratannya jelas, saya kutip - "Saya membutuhkannya dalam format hh-bb-tttt." Bagaimana ini membantu?

— Harijs Krūtainis

1

tidak bekerja dengan Firefox. Html ini menampilkan masukan dengan placeholder hh / bb / tttt. Jendela saya dan firefox saya diatur dengan bahasa Belanda sebagai bahasa pertama. Pengaturan regional Windows menunjukkan tanggal pendek: 30-11-2018.

— Roland

1

Saya rasa begitu, dalam HTML tidak ada sintaks untuk format DD-MM-YYYY. Lihat halaman ini http://www.java2s.com/Code/SQLServer/Date-Timezone/FormatdateMmmddyyyyhhmmdp.htm . Agak itu akan membantu Anda. Lain gunakan pemilih tanggal javascript.

— Rathika Jeganathan
sumber

1

Saya tidak tahu pasti, tapi saya pikir ini seharusnya ditangani oleh browser berdasarkan pengaturan tanggal / waktu pengguna. Coba atur komputer Anda untuk menampilkan tanggal dalam format itu.

— Kesalahan sintaks
sumber

1

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

— Dheeraj Rao
sumber

3

Terima kasih atas cuplikan kode ini, yang mungkin memberikan beberapa bantuan langsung. Penjelasan yang tepat akan sangat meningkatkan nilai pendidikannya dengan menunjukkan mengapa ini adalah solusi yang baik untuk masalah tersebut, dan akan membuatnya lebih berguna bagi pembaca di masa mendatang dengan pertanyaan yang serupa, tetapi tidak identik. Harap edit jawaban Anda untuk menambahkan penjelasan, dan berikan indikasi batasan dan asumsi apa yang berlaku.

— Toby Speight

1

Saya melakukan banyak penelitian dan saya rasa tidak ada yang bisa memaksakan format <input type="date">. Browser memilih format lokal, dan tergantung pada pengaturan pengguna, jika bahasa pengguna dalam bahasa Inggris, tanggal akan ditampilkan ke format bahasa Inggris (bb / hh / tttt).

Menurut saya, solusi terbaik adalah menggunakan plugin untuk mengontrol tampilan.

Jquery DatePicker tampaknya merupakan pilihan yang baik karena Anda dapat memaksakan lokalisasi , format tanggal ...

— Fifi
sumber

1

Saya mendapatkan jawaban yang sedikit berbeda dari apa pun di atas yang pernah saya baca.

Solusi saya menggunakan sedikit JavaScript dan input html.

Tanggal diterima oleh hasil masukan dalam String yang diformat sebagai 'yyyy-mm-dd'. Kita dapat membaginya dan menempatkannya dengan benar sebagai Date () baru.

Ini HTML dasar:

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

Inilah JS dasar:

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

Anda dapat memformat tanggal sesuka Anda. Anda dapat membuat Tanggal baru () dan mengambil semua info dari sana ... atau cukup gunakan 'userDate []' untuk membangun string Anda.

Perlu diingat, beberapa cara memasukkan tanggal ke 'Tanggal baru ()' menghasilkan hasil yang tidak terduga. (yaitu - satu hari di belakang)

— thielr7
sumber

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
sumber

2

Saat Anda memposting kode HTML di sini, sangat penting untuk memformatnya sebagai kode. Jika tidak, ini diformat sebagai bagian dari halaman, dan jawaban Anda tidak tampak seperti jawaban. Jika Anda tidak tahu cara memformatnya, ada panduan bagus tentangnya di pusat bantuan

— Zoe

0

jawaban langsung singkat tidak atau tidak di luar kotak tetapi saya telah menemukan metode untuk menggunakan kotak teks dan kode JS murni untuk mensimulasikan input tanggal dan melakukan format apa pun yang Anda inginkan, berikut 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 perhatikan bahwa metode ini hanya berfungsi untuk browser yang mendukung tipe 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 pemanggilan fungsi dan input itu sendiri menjadi 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, bukan hari + "/" + bulan + "/" + tahun misalnya tahun + "/" + bulan + "/" + hari dan dalam input teks gunakan placeholder atau nilai sebagai tttt / bb / hh untuk pengguna saat halaman dimuat.

— teduh
sumber

0

Untuk Pemformatan dalam hh-bb-tttt

aa = date.split ("-")

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

— Abilash Raghu
sumber

-1

Implementasi bersih tanpa ketergantungan. 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
sumber

-2

Inilah solusinya:

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

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

semoga ini akan menyelesaikan masalah :)

— Muhammad Waqas
sumber

1

Solusi Anda tidak menggunakan input HTML tipe tanggal, jadi tidak benar-benar menjawab pertanyaan.

— Vincent

Anda tidak perlu menyetel jenisnya ke tanggal. untuk datepicker itu akan bekerja tanpa tanggal. Cobalah, semoga masalah Anda teratasi.

— Muhammad Waqas

-3

Format nilai tanggal adalah 'YYYY-MM-DD'. Lihat contoh berikut

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

Yang Anda butuhkan hanyalah memformat tanggal dalam php, asp, ruby atau apa pun untuk memiliki format itu.

— Charmi
sumber