Cara menampilkan tanggal waktu di html

Question

Kita dapat menggunakan fungsi JavaScript Date()_ untuk mendapatkan tanggal saat ini. Fungsi mengembalikan tanggal dan waktu saat ini. Kita dapat membuat wadah HTML dan menampilkan tanggal saat ini di dalamnya menggunakan JavaScript. Kami akan menggunakan properti innerHTML_ untuk menulis tanggal dalam HTML

Nội dung chính Show

Bagaimana cara menampilkan datetime dalam HTML?
Bagaimana cara memasukkan tanggal dan waktu dalam HTML?
Bagaimana cara menampilkan tanggal dan waktu langsung dalam HTML?
Bagaimana cara menampilkan tanggal dan waktu saat ini di kotak teks HTML?

Misalnya, buat div dan tetapkan current_date sebagai idnya. Kemudian, tulis beberapa JavaScript di dalam tag script. Pilih current_id menggunakan properti

Mon Nov 01 2021 09:22:43 GMT+0545 (Nepal Time)

0 dan panggil fungsi Date(). Gunakan properti innerHTML untuk menulis tanggal pengembalian dalam HTML

Contoh di bawah ini akan menampilkan tanggal dan waktu saat ini seperti yang ditunjukkan pada bagian output di bawah ini. Keluarannya berisi hari dalam seminggu, bulan, hari, tahun, jam, menit, detik, dan GMT serta informasi tentang lokasi

Kode Contoh

_

Keluaran

Mon Nov 01 2021 09:22:43 GMT+0545 (Nepal Time)

Kami juga dapat menemukan tanggal saat ini dalam format

Mon Nov 01 2021 09:22:43 GMT+0545 (Nepal Time)

_3 menggunakan berbagai metode JavaScript Date(). Kita bisa mendapatkan tahun saat ini dari metode

Mon Nov 01 2021 09:22:43 GMT+0545 (Nepal Time)

5, bulan saat ini dari metode

Mon Nov 01 2021 09:22:43 GMT+0545 (Nepal Time)

6 dan hari ini dari metode

Mon Nov 01 2021 09:22:43 GMT+0545 (Nepal Time)

7. Dalam metode ini, kita akan menggunakan objek Date() untuk mengakses berbagai fungsi ini. Kami dapat memformat tanggal dengan cara apa pun yang kami inginkan dan menampilkannya di halaman HTML menggunakan properti innerHTML

Misalnya, buat div dengan id yang sama seperti pada metode di atas. Dalam JavaScript, buat objek

_1 dari kelas Date(). Selanjutnya, buat tiga variabel

3,

4 dan

5. Gunakan objek

_1 untuk memanggil metode

Mon Nov 01 2021 09:22:43 GMT+0545 (Nepal Time)

5,

Mon Nov 01 2021 09:22:43 GMT+0545 (Nepal Time)

6 dan

Mon Nov 01 2021 09:22:43 GMT+0545 (Nepal Time)

7, dan simpan dalam variabel masing-masing. Selanjutnya, gunakan objek

_0 dan panggil properti

Mon Nov 01 2021 09:22:43 GMT+0545 (Nepal Time)

0 untuk memilih id dari div. Selanjutnya, atur innerHTML ke variabel

4,

5 dan

3 dipisahkan oleh garis miring

Dengan cara ini, kita bisa mendapatkan tanggal saat ini dalam format

7 dalam HTML menggunakan kelas JavaScript Date()

Kode Contoh

_

Keluaran

Kita dapat menggunakan fungsi JavaScript

_9 untuk menemukan tanggal saat ini. Fungsi

_9 mengembalikan tanggal saat ini sesuai dengan bahasa yang disediakan dalam fungsi. Ada berbagai konvensi khusus bahasa, dan kita dapat mendefinisikan bahasa dengan fungsi

9. Fungsi mengambil dua parameter yaitu Date()2 dan Date()3. Kita dapat menentukan bahasa keluaran dengan opsi Date()2. Misalnya, kita dapat menggunakan Date()_5 untuk bahasa Inggris AS dan Date()6 untuk bahasa Inggris Britania

Misalnya, buat div dan tulis JavaScript di dalam tag script. Buat objek

1 dari kelas Date() dan panggil metode

9. Selanjutnya, gunakan innerHTML_2 untuk menampilkan variabel

1

Kita bisa melihat hasilnya dalam format ________15______7. Dengan demikian, kita dapat menggunakan metode

_9 untuk menemukan tanggal saat ini dalam HTML

const dateControl = document.querySelector('input[type="datetime-local"]');
dateControl.value = '2017-06-01T08:30';

5 elemen tipe

const dateControl = document.querySelector('input[type="datetime-local"]');
dateControl.value = '2017-06-01T08:30';

6 membuat kontrol input yang memungkinkan pengguna dengan mudah memasukkan tanggal dan waktu, termasuk tahun, bulan, dan hari serta waktu dalam jam dan menit

UI kontrol bervariasi secara umum dari browser ke browser. Di browser tanpa dukungan, ini menurun dengan anggun ke kontrol

const dateControl = document.querySelector('input[type="datetime-local"]');
dateControl.value = '2017-06-01T08:30';

7 sederhana

Kontrol dimaksudkan untuk mewakili tanggal dan waktu lokal, bukan tanggal dan waktu lokal pengguna. Dengan kata lain, implementasi harus mengizinkan kombinasi tahun, bulan, hari, jam, dan menit yang valid—bahkan jika kombinasi tersebut tidak valid dalam zona waktu lokal pengguna (seperti waktu dalam waktu musim panas jeda transisi maju-maju). . Beberapa browser seluler (terutama di iOS) saat ini tidak mengimplementasikannya dengan benar

Karena dukungan browser yang terbatas untuk

const dateControl = document.querySelector('input[type="datetime-local"]');
dateControl.value = '2017-06-01T08:30';

_6, dan variasi dalam cara kerja input, mungkin saat ini masih lebih baik menggunakan kerangka kerja atau pustaka untuk menyajikannya, atau menggunakan input kustom Anda sendiri. Pilihan lainnya adalah menggunakan input

const dateControl = document.querySelector('input[type="datetime-local"]');
dateControl.value = '2017-06-01T08:30';

_9 dan

<form>
  <label for="party">Enter a date and time for your party booking:label>
  <input id="party" type="datetime-local" name="partydate" />
form>

0 terpisah, yang masing-masing didukung lebih luas daripada

const dateControl = document.querySelector('input[type="datetime-local"]');
dateControl.value = '2017-06-01T08:30';

6

Beberapa browser mungkin menggunakan elemen input teks saja yang memvalidasi bahwa hasilnya adalah nilai tanggal/waktu yang sah sebelum membiarkannya dikirim ke server, tetapi Anda tidak boleh mengandalkan perilaku ini karena Anda tidak dapat memprediksi dengan mudah

Sebuah string yang mewakili nilai tanggal yang dimasukkan ke input. Format nilai tanggal dan waktu yang digunakan oleh jenis input ini dijelaskan di

Anda dapat menetapkan nilai default untuk masukan dengan menyertakan tanggal dan waktu di dalam atribut, seperti itu

<label for="party">Enter a date and time for your party booking:label>
<input
  id="party"
  type="datetime-local"
  name="partydate"
  value="2017-06-01T08:30" />

Satu hal yang perlu diperhatikan adalah format tanggal dan waktu yang ditampilkan berbeda dari

<form>
  <label for="party">Enter a date and time for your party booking:label>
  <input id="party" type="datetime-local" name="partydate" />
form>

2 yang sebenarnya; . Ketika nilai di atas dikirimkan ke server, misalnya, akan terlihat seperti

<form>
  <label for="party">Enter a date and time for your party booking:label>
  <input id="party" type="datetime-local" name="partydate" />
form>

6

Catatan. Ingat juga bahwa jika data tersebut dikirimkan melalui HTTP

<form>
  <label for="party">Enter a date and time for your party booking:label>
  <input id="party" type="datetime-local" name="partydate" />
form>

7, karakter titik dua harus di-escape untuk dimasukkan dalam parameter URL, mis. g.

<form>
  <label for="party">Enter a date and time for your party booking:label>
  <input id="party" type="datetime-local" name="partydate" />
form>

_8. Lihat

<form>
  <label for="party">Enter a date and time for your party booking:label>
  <input id="party" type="datetime-local" name="partydate" />
form>

_9 untuk satu cara melakukan ini

Anda juga bisa mendapatkan dan menetapkan nilai tanggal dalam JavaScript menggunakan properti

<form>
  <label for="party">Enter a date and time for your party booking:label>
  <input
    id="party"
    type="datetime-local"
    name="partydate"
    min="2017-06-01T08:30"
    max="2017-06-30T16:30" />
form>

0

<form>
  <label for="party">Enter a date and time for your party booking:label>
  <input id="party" type="datetime-local" name="partydate" />
form>

2, misalnya

const dateControl = document.querySelector('input[type="datetime-local"]');
dateControl.value = '2017-06-01T08:30';

Ada beberapa metode yang disediakan oleh

<form>
  <label for="party">Enter a date and time for your party booking:label>
  <input
    id="party"
    type="datetime-local"
    name="partydate"
    min="2017-06-01T08:30"
    max="2017-06-30T16:30" />
form>

2 JavaScript yang dapat digunakan untuk mengonversi informasi tanggal numerik menjadi string yang diformat dengan benar. Misalnya, metode

<form>
  <label for="party">Enter a date and time for your party booking:label>
  <input
    id="party"
    type="datetime-local"
    name="partydate"
    min="2017-06-01T08:30"
    max="2017-06-30T16:30" />
form>

_3 mengembalikan tanggal/waktu dalam UTC dengan akhiran "

<form>
  <label for="party">Enter a date and time for your party booking:label>
  <input
    id="party"
    type="datetime-local"
    name="partydate"
    min="2017-06-01T08:30"
    max="2017-06-30T16:30" />
form>

4" yang menunjukkan zona waktu tersebut;

Selain atribut yang umum untuk semua elemen

const dateControl = document.querySelector('input[type="datetime-local"]');
dateControl.value = '2017-06-01T08:30';

5, input datetime-local menawarkan atribut berikut

Tanggal dan waktu terakhir untuk menerima. Jika elemen yang dimasukkan lebih lambat dari stempel waktu ini, elemen gagal validasi kendala. Jika nilai atribut

<form>
  <label for="party">Enter a date and time for your party booking:label>
  <input
    id="party"
    type="datetime-local"
    name="partydate"
    min="2017-06-01T08:30"
    max="2017-06-30T16:30" />
form>

_9 bukan string valid yang mengikuti format

<form>
  <label for="party">Enter a date and time for your party booking:label>
  <input id="party" type="datetime-local" name="partydate" />
form>

5, maka elemen tersebut tidak memiliki nilai maksimum

Nilai ini harus menentukan string tanggal setelah atau sama dengan yang ditentukan oleh atribut

<input type="hidden" id="timezone" name="timezone" value="-08:00" />

1

Tanggal dan waktu paling awal untuk menerima; . Jika nilai atribut

<input type="hidden" id="timezone" name="timezone" value="-08:00" />

_1 bukan string valid yang mengikuti format

<form>
  <label for="party">Enter a date and time for your party booking:label>
  <input id="party" type="datetime-local" name="partydate" />
form>

5, maka elemen tersebut tidak memiliki nilai minimum

Nilai ini harus menentukan string tanggal lebih awal atau sama dengan yang ditentukan oleh atribut

<form>
  <label for="party">Enter a date and time for your party booking:label>
  <input
    id="party"
    type="datetime-local"
    name="partydate"
    min="2017-06-01T08:30"
    max="2017-06-30T16:30" />
form>

9

Atribut

<input type="hidden" id="timezone" name="timezone" value="-08:00" />

_5 adalah angka yang menentukan perincian yang harus dipatuhi oleh nilai, atau nilai khusus

<input type="hidden" id="timezone" name="timezone" value="-08:00" />

6, yang dijelaskan di bawah. Hanya nilai yang sama dengan dasar untuk melangkah (jika ditentukan, jika tidak, dan nilai default yang sesuai jika tidak ada yang diberikan) yang valid

Nilai string

<input type="hidden" id="timezone" name="timezone" value="-08:00" />

6 berarti tidak ada langkah yang tersirat, dan nilai apa pun diperbolehkan (kecuali batasan lain, seperti dan )

Catatan. Ketika data yang dimasukkan oleh pengguna tidak mengikuti konfigurasi stepping, agen pengguna dapat membulatkan ke nilai valid terdekat, lebih memilih angka dalam arah positif ketika ada dua opsi yang sama-sama dekat.

Untuk input

const dateControl = document.querySelector('input[type="datetime-local"]');
dateControl.value = '2017-06-01T08:30';

_6, nilai

<input type="hidden" id="timezone" name="timezone" value="-08:00" />

5 diberikan dalam hitungan detik, dengan faktor penskalaan 1000 (karena nilai numerik yang mendasarinya dalam milidetik). Nilai default

<input type="hidden" id="timezone" name="timezone" value="-08:00" />

5 adalah 60, menunjukkan 60 detik (atau 1 menit, atau 60.000 milidetik)

Saat ini, tidak jelas apa arti nilai

<input type="hidden" id="timezone" name="timezone" value="-08:00" />

6 untuk

<input type="hidden" id="timezone" name="timezone" value="-08:00" />

5 saat digunakan dengan input

const dateControl = document.querySelector('input[type="datetime-local"]');
dateControl.value = '2017-06-01T08:30';

6. Ini akan diperbarui segera setelah informasi itu ditentukan

Input tanggal/waktu terdengar nyaman pada pandangan pertama; . Namun, ada masalah dengan

<select name="timezone" id="timezone">
  <option value="Pacific/Kwajalein">Eniwetok, Kwajaleinoption>
  <option value="Pacific/Midway">Midway Island, Samoaoption>
  <option value="Pacific/Honolulu">Hawaiioption>
  <option value="Pacific/Marquesas">Taiohaeoption>
  
select>

_8 karena dukungan browser yang terbatas

Kita akan melihat penggunaan dasar dan lebih kompleks dari

<select name="timezone" id="timezone">
  <option value="Pacific/Kwajalein">Eniwetok, Kwajaleinoption>
  <option value="Pacific/Midway">Midway Island, Samoaoption>
  <option value="Pacific/Honolulu">Hawaiioption>
  <option value="Pacific/Marquesas">Taiohaeoption>
  
select>

8, kemudian menawarkan saran untuk mengurangi masalah dukungan browser nanti (lihat )

Penggunaan paling sederhana dari

<select name="timezone" id="timezone">
  <option value="Pacific/Kwajalein">Eniwetok, Kwajaleinoption>
  <option value="Pacific/Midway">Midway Island, Samoaoption>
  <option value="Pacific/Honolulu">Hawaiioption>
  <option value="Pacific/Marquesas">Taiohaeoption>
  
select>

8 melibatkan kombinasi elemen dasar

const dateControl = document.querySelector('input[type="datetime-local"]');
dateControl.value = '2017-06-01T08:30';

5 dan

<form>
  <div>
    <label for="party">
      Choose your preferred party date and time (required, June 1st 8.30am to
      June 30th 4.30pm):
    label>
    <input
      id="party"
      type="datetime-local"
      name="partydate"
      min="2017-06-01T08:30"
      max="2017-06-30T16:30"
      required />
    <span class="validity">span>
  div>
  <div>
    <input type="submit" value="Book party!" />
  div>
form>

2, seperti yang terlihat di bawah ini

<form>
  <label for="party">Enter a date and time for your party booking:label>
  <input id="party" type="datetime-local" name="partydate" />
form>

Anda dapat menggunakan atribut and untuk membatasi tanggal/waktu yang dapat dipilih oleh pengguna. Dalam contoh berikut, kami menetapkan waktu tanggal minimum

<form>
  <div>
    <label for="party">
      Choose your preferred party date and time (required, June 1st 8.30am to
      June 30th 4.30pm):
    label>
    <input
      id="party"
      type="datetime-local"
      name="partydate"
      min="2017-06-01T08:30"
      max="2017-06-30T16:30"
      required />
    <span class="validity">span>
  div>
  <div>
    <input type="submit" value="Book party!" />
  div>
form>

5 dan waktu tanggal maksimum

<form>
  <div>
    <label for="party">
      Choose your preferred party date and time (required, June 1st 8.30am to
      June 30th 4.30pm):
    label>
    <input
      id="party"
      type="datetime-local"
      name="partydate"
      min="2017-06-01T08:30"
      max="2017-06-30T16:30"
      required />
    <span class="validity">span>
  div>
  <div>
    <input type="submit" value="Book party!" />
  div>
form>

6

<form>
  <label for="party">Enter a date and time for your party booking:label>
  <input
    id="party"
    type="datetime-local"
    name="partydate"
    min="2017-06-01T08:30"
    max="2017-06-30T16:30" />
form>

Hasilnya di sini adalah itu

Hanya hari di bulan Juni 2017 yang dapat dipilih — hanya bagian "hari" dari nilai tanggal yang dapat diedit, dan tanggal di luar bulan Juni tidak dapat digulir ke dalam widget pemilih tanggal
Bergantung pada browser apa yang Anda gunakan, Anda mungkin menemukan bahwa waktu di luar nilai yang ditentukan mungkin tidak dapat dipilih di pemilih waktu (mis. g. Edge), atau tidak valid (lihat ) tetapi masih tersedia (mis. g. Chrome)

Catatan. Anda harus dapat menggunakan atribut untuk memvariasikan jumlah hari yang dilompati setiap kali tanggal bertambah (mis. g. mungkin Anda hanya ingin membuat hari Sabtu dapat dipilih). Namun, ini tampaknya tidak bekerja secara efektif dalam implementasi apa pun pada saat penulisan

<select name="timezone" id="timezone">
  <option value="Pacific/Kwajalein">Eniwetok, Kwajaleinoption>
  <option value="Pacific/Midway">Midway Island, Samoaoption>
  <option value="Pacific/Honolulu">Hawaiioption>
  <option value="Pacific/Marquesas">Taiohaeoption>
  
select>

8 tidak mendukung atribut ukuran kontrol formulir seperti. Anda harus menggunakan CSS untuk menyesuaikan ukuran elemen ini

Satu hal yang tidak disediakan oleh tipe input

const dateControl = document.querySelector('input[type="datetime-local"]');
dateControl.value = '2017-06-01T08:30';

_6 adalah cara untuk mengatur zona waktu dan/atau lokal kontrol tanggal/waktu. Ini tersedia dalam tipe input

div {
  margin-bottom: 10px;
  display: flex;
  align-items: center;
}

label {
  display: inline-block;
  width: 300px;
}

input:invalid + span::after {
  content: "✖";
  padding-left: 5px;
}

input:valid + span::after {
  content: "✓";
  padding-left: 5px;
}

1, tetapi tipe ini sekarang sudah usang, telah dihapus dari spesifikasi. Alasan utama mengapa ini dihapus adalah kurangnya implementasi di browser, dan kekhawatiran akan antarmuka/pengalaman pengguna. Lebih mudah untuk hanya memiliki kontrol (atau kontrol) untuk mengatur tanggal/waktu dan kemudian menangani lokal dalam kontrol terpisah

Misalnya, jika Anda membuat sistem di mana pengguna mungkin sudah masuk, dengan lokal mereka sudah disetel, Anda dapat memberikan zona waktu dalam jenis input

div {
  margin-bottom: 10px;
  display: flex;
  align-items: center;
}

label {
  display: inline-block;
  width: 300px;
}

input:invalid + span::after {
  content: "✖";
  padding-left: 5px;
}

input:valid + span::after {
  content: "✓";
  padding-left: 5px;
}

2. Sebagai contoh

<input type="hidden" id="timezone" name="timezone" value="-08:00" />

Di sisi lain, jika Anda diminta untuk mengizinkan pengguna memasukkan zona waktu bersama dengan input tanggal/waktu, Anda dapat memiliki elemen

div {
  margin-bottom: 10px;
  display: flex;
  align-items: center;
}

label {
  display: inline-block;
  width: 300px;
}

input:invalid + span::after {
  content: "✖";
  padding-left: 5px;
}

input:valid + span::after {
  content: "✓";
  padding-left: 5px;
}

3 untuk memungkinkan pengguna menyetel zona waktu yang tepat dengan memilih lokasi tertentu dari antara

<select name="timezone" id="timezone">
  <option value="Pacific/Kwajalein">Eniwetok, Kwajaleinoption>
  <option value="Pacific/Midway">Midway Island, Samoaoption>
  <option value="Pacific/Honolulu">Hawaiioption>
  <option value="Pacific/Marquesas">Taiohaeoption>
  
select>

Apa pun kasusnya, nilai tanggal/waktu dan zona waktu akan dikirimkan ke server sebagai titik data terpisah, dan kemudian Anda harus menyimpannya dengan tepat di database di sisi server

Secara default,

<select name="timezone" id="timezone">
  <option value="Pacific/Kwajalein">Eniwetok, Kwajaleinoption>
  <option value="Pacific/Midway">Midway Island, Samoaoption>
  <option value="Pacific/Honolulu">Hawaiioption>
  <option value="Pacific/Marquesas">Taiohaeoption>
  
select>

_8 tidak menerapkan validasi apa pun ke nilai yang dimasukkan. Implementasi UI umumnya tidak mengizinkan Anda memasukkan apa pun yang bukan tanggal/waktu — yang berguna — tetapi pengguna mungkin masih tidak mengisi nilai dan mengirim, atau memasukkan tanggal dan/atau waktu yang tidak valid (mis. g. tanggal 32 April)

Anda dapat menggunakan dan untuk membatasi tanggal yang tersedia (lihat ), dan Anda dapat menggunakan atribut untuk membuat pengisian tanggal/waktu wajib. Akibatnya, browser pendukung akan menampilkan kesalahan jika Anda mencoba mengirimkan tanggal di luar batas yang ditentukan, atau kolom tanggal kosong

Mari kita lihat sebuah contoh;

<form>
  <div>
    <label for="party">
      Choose your preferred party date and time (required, June 1st 8.30am to
      June 30th 4.30pm):
    label>
    <input
      id="party"
      type="datetime-local"
      name="partydate"
      min="2017-06-01T08:30"
      max="2017-06-30T16:30"
      required />
    <span class="validity">span>
  div>
  <div>
    <input type="submit" value="Book party!" />
  div>
form>

Jika Anda mencoba mengirimkan formulir dengan tanggal yang tidak lengkap (atau dengan tanggal di luar batas yang ditentukan), browser akan menampilkan kesalahan. Coba mainkan dengan contoh sekarang

Inilah CSS yang digunakan dalam contoh di atas. Di sini kita menggunakan properti CSS

div {
  margin-bottom: 10px;
  display: flex;
  align-items: center;
}

label {
  display: inline-block;
  width: 300px;
}

input:invalid + span::after {
  content: "✖";
  padding-left: 5px;
}

input:valid + span::after {
  content: "✓";
  padding-left: 5px;
}

_8 dan

div {
  margin-bottom: 10px;
  display: flex;
  align-items: center;
}

label {
  display: inline-block;
  width: 300px;
}

input:invalid + span::after {
  content: "✖";
  padding-left: 5px;
}

input:valid + span::after {
  content: "✓";
  padding-left: 5px;
}

9 untuk menata input berdasarkan apakah nilai saat ini valid. Kami harus meletakkan ikon pada

<form>
  <div>
    <label for="party">
      Choose your preferred party date and time (required, June 1st 8.30am to
      June 30th 4.30pm):
    label>
    <input
      id="party"
      type="datetime-local"
      name="partydate"
      min="2017-06-01T08:30"
      max="2017-06-30T16:30"
      pattern="[0-9]{4}-[0-9]{2}-[0-9]{2}T[0-9]{2}:[0-9]{2}"
      required />
    <span class="validity">span>
  div>
  <div>
    <input type="submit" value="Book party!" />
  div>
  <input type="hidden" id="timezone" name="timezone" value="-08:00" />
form>

_0 di sebelah input, bukan pada input itu sendiri, karena di Chrome konten yang dihasilkan ditempatkan di dalam kontrol formulir, dan tidak dapat ditata atau ditampilkan secara efektif

div {
  margin-bottom: 10px;
  display: flex;
  align-items: center;
}

label {
  display: inline-block;
  width: 300px;
}

input:invalid + span::after {
  content: "✖";
  padding-left: 5px;
}

input:valid + span::after {
  content: "✓";
  padding-left: 5px;
}

Peringatan. Validasi formulir HTML bukanlah pengganti skrip yang memastikan bahwa data yang dimasukkan dalam format yang tepat. Terlalu mudah bagi seseorang untuk melakukan penyesuaian pada HTML yang memungkinkan mereka melewati validasi, atau menghapusnya seluruhnya. Seseorang juga dapat mem-bypass HTML Anda sepenuhnya dan mengirimkan data langsung ke server Anda. Jika kode sisi server Anda gagal memvalidasi data yang diterimanya, bencana dapat terjadi ketika data yang diformat tidak benar dikirimkan (atau data yang terlalu besar, jenisnya salah, dan sebagainya)

Seperti disebutkan di atas, browser yang tidak mendukung dengan anggun menurunkan ke input teks, tetapi ini menimbulkan masalah baik dalam hal konsistensi antarmuka pengguna (kontrol yang disajikan akan berbeda), dan penanganan data

Masalah kedua adalah yang paling serius; . Dengan input teks di sisi lain, secara default browser tidak mengenali format tanggal yang seharusnya, dan ada banyak cara berbeda di mana orang menulis tanggal dan waktu, misalnya

<form>
  <div>
    <label for="party">
      Choose your preferred party date and time (required, June 1st 8.30am to
      June 30th 4.30pm):
    label>
    <input
      id="party"
      type="datetime-local"
      name="partydate"
      min="2017-06-01T08:30"
      max="2017-06-30T16:30"
      pattern="[0-9]{4}-[0-9]{2}-[0-9]{2}T[0-9]{2}:[0-9]{2}"
      required />
    <span class="validity">span>
  div>
  <div>
    <input type="submit" value="Book party!" />
  div>
  <input type="hidden" id="timezone" name="timezone" value="-08:00" />
form>

_3

<form>
  <div>
    <label for="party">
      Choose your preferred party date and time (required, June 1st 8.30am to
      June 30th 4.30pm):
    label>
    <input
      id="party"
      type="datetime-local"
      name="partydate"
      min="2017-06-01T08:30"
      max="2017-06-30T16:30"
      pattern="[0-9]{4}-[0-9]{2}-[0-9]{2}T[0-9]{2}:[0-9]{2}"
      required />
    <span class="validity">span>
  div>
  <div>
    <input type="submit" value="Book party!" />
  div>
  <input type="hidden" id="timezone" name="timezone" value="-08:00" />
form>

_4

<form>
  <div>
    <label for="party">
      Choose your preferred party date and time (required, June 1st 8.30am to
      June 30th 4.30pm):
    label>
    <input
      id="party"
      type="datetime-local"
      name="partydate"
      min="2017-06-01T08:30"
      max="2017-06-30T16:30"
      pattern="[0-9]{4}-[0-9]{2}-[0-9]{2}T[0-9]{2}:[0-9]{2}"
      required />
    <span class="validity">span>
  div>
  <div>
    <input type="submit" value="Book party!" />
  div>
  <input type="hidden" id="timezone" name="timezone" value="-08:00" />
form>

_5

<form>
  <div>
    <label for="party">
      Choose your preferred party date and time (required, June 1st 8.30am to
      June 30th 4.30pm):
    label>
    <input
      id="party"
      type="datetime-local"
      name="partydate"
      min="2017-06-01T08:30"
      max="2017-06-30T16:30"
      pattern="[0-9]{4}-[0-9]{2}-[0-9]{2}T[0-9]{2}:[0-9]{2}"
      required />
    <span class="validity">span>
  div>
  <div>
    <input type="submit" value="Book party!" />
  div>
  <input type="hidden" id="timezone" name="timezone" value="-08:00" />
form>

_6

<form>
  <div>
    <label for="party">
      Choose your preferred party date and time (required, June 1st 8.30am to
      June 30th 4.30pm):
    label>
    <input
      id="party"
      type="datetime-local"
      name="partydate"
      min="2017-06-01T08:30"
      max="2017-06-30T16:30"
      pattern="[0-9]{4}-[0-9]{2}-[0-9]{2}T[0-9]{2}:[0-9]{2}"
      required />
    <span class="validity">span>
  div>
  <div>
    <input type="submit" value="Book party!" />
  div>
  <input type="hidden" id="timezone" name="timezone" value="-08:00" />
form>

_7

<form>
  <div>
    <label for="party">
      Choose your preferred party date and time (required, June 1st 8.30am to
      June 30th 4.30pm):
    label>
    <input
      id="party"
      type="datetime-local"
      name="partydate"
      min="2017-06-01T08:30"
      max="2017-06-30T16:30"
      pattern="[0-9]{4}-[0-9]{2}-[0-9]{2}T[0-9]{2}:[0-9]{2}"
      required />
    <span class="validity">span>
  div>
  <div>
    <input type="submit" value="Book party!" />
  div>
  <input type="hidden" id="timezone" name="timezone" value="-08:00" />
form>

_8 (waktu 12 jam)

<form>
  <div>
    <label for="party">
      Choose your preferred party date and time (required, June 1st 8.30am to
      June 30th 4.30pm):
    label>
    <input
      id="party"
      type="datetime-local"
      name="partydate"
      min="2017-06-01T08:30"
      max="2017-06-30T16:30"
      pattern="[0-9]{4}-[0-9]{2}-[0-9]{2}T[0-9]{2}:[0-9]{2}"
      required />
    <span class="validity">span>
  div>
  <div>
    <input type="submit" value="Book party!" />
  div>
  <input type="hidden" id="timezone" name="timezone" value="-08:00" />
form>

_9 (24 jam)

dll.

Salah satu cara mengatasinya adalah dengan meletakkan atribut pada input

const dateControl = document.querySelector('input[type="datetime-local"]');
dateControl.value = '2017-06-01T08:30';

6 Anda. Meskipun input

const dateControl = document.querySelector('input[type="datetime-local"]');
dateControl.value = '2017-06-01T08:30';

_6 tidak menggunakannya, fallback input teks akan. Misalnya, coba lihat demo berikut di browser yang tidak mendukung

<form>
  <div>
    <label for="party">
      Choose your preferred party date and time (required, June 1st 8.30am to
      June 30th 4.30pm):
    label>
    <input
      id="party"
      type="datetime-local"
      name="partydate"
      min="2017-06-01T08:30"
      max="2017-06-30T16:30"
      pattern="[0-9]{4}-[0-9]{2}-[0-9]{2}T[0-9]{2}:[0-9]{2}"
      required />
    <span class="validity">span>
  div>
  <div>
    <input type="submit" value="Book party!" />
  div>
  <input type="hidden" id="timezone" name="timezone" value="-08:00" />
form>

Jika Anda mencoba mengirimkannya, Anda akan melihat bahwa browser sekarang menampilkan pesan kesalahan (dan menyorot input sebagai tidak valid) jika entri Anda tidak cocok dengan pola

div {
  margin-bottom: 10px;
}

input:invalid + span {
  position: relative;
}

input:invalid + span::after {
  content: "✖";
  position: absolute;
  right: -18px;
}

input:valid + span {
  position: relative;
}

input:valid + span::after {
  content: "✓";
  position: absolute;
  right: -18px;
}

3, di mana

div {
  margin-bottom: 10px;
}

input:invalid + span {
  position: relative;
}

input:invalid + span::after {
  content: "✖";
  position: absolute;
  right: -18px;
}

input:valid + span {
  position: relative;
}

input:valid + span::after {
  content: "✓";
  position: absolute;
  right: -18px;
}

4 adalah angka dari 0 sampai 9. Tentu saja, hal ini tidak menghentikan orang untuk memasukkan tanggal yang tidak valid, atau format tanggal dan waktu yang salah

Dan pengguna mana yang akan memahami pola yang mereka perlukan untuk memasukkan waktu dan tanggal?

Kami masih memiliki masalah

div {
  margin-bottom: 10px;
}

input:invalid + span {
  position: relative;
}

input:invalid + span::after {
  content: "✖";
  position: absolute;
  right: -18px;
}

input:valid + span {
  position: relative;
}

input:valid + span::after {
  content: "✓";
  position: absolute;
  right: -18px;
}

Cara terbaik untuk menangani tanggal dalam formulir dengan cara lintas-browser saat ini adalah membuat pengguna memasukkan hari, bulan, tahun, dan waktu dalam kontrol terpisah (

div {
  margin-bottom: 10px;
  display: flex;
  align-items: center;
}

label {
  display: inline-block;
  width: 300px;
}

input:invalid + span::after {
  content: "✖";
  padding-left: 5px;
}

input:valid + span::after {
  content: "✓";
  padding-left: 5px;
}

3 elemen sedang populer - lihat di bawah untuk implementasi),

JavaScript menggunakan floating point presisi ganda untuk menyimpan tanggal, seperti halnya semua angka, yang berarti bahwa kode JavaScript tidak akan mengalami masalah Y2K38 kecuali pemaksaan bilangan bulat/peretasan bit digunakan karena semua operator bit JavaScript menggunakan bilangan bulat pelengkap 2s bertanda 32-bit

Masalahnya ada pada sisi server. penyimpanan tanggal lebih besar dari 2^31 - 1. Untuk memperbaiki masalah ini, Anda harus menyimpan semua tanggal menggunakan bilangan bulat 32-bit yang tidak ditandatangani, bilangan bulat 64-bit yang ditandatangani, atau floating point presisi ganda di server. Jika server Anda ditulis dalam PHP, perbaikannya mungkin sesederhana memutakhirkan ke PHP 8 atau 7, dan memutakhirkan perangkat keras Anda ke x86_64 atau IA64. Jika Anda terjebak dengan perangkat keras lain, Anda dapat mencoba meniru perangkat keras 64-bit di dalam mesin virtual 32-bit, tetapi sebagian besar VM tidak mendukung virtualisasi semacam ini, karena stabilitas mungkin menurun, dan kinerja pasti akan sangat menurun.

Di banyak server, tanggal disimpan sebagai angka, bukan sebagai string--angka dengan ukuran tetap dan format agnostik (selain endianness). Setelah tahun 10.000, angka tersebut hanya akan sedikit lebih besar dari sebelumnya, sehingga banyak server tidak akan melihat masalah dengan formulir yang dikirimkan setelah tahun 10.000

Masalahnya ada pada sisi klien. parsing tanggal dengan lebih dari 4 digit pada tahun

const dateControl = document.querySelector('input[type="datetime-local"]');
dateControl.value = '2017-06-01T08:30';

0

Sesederhana itu. Siapkan saja kode Anda untuk sejumlah digit. Jangan hanya menyiapkan 5 digit. Berikut adalah kode JavaScript untuk mengatur nilainya secara terprogram

const dateControl = document.querySelector('input[type="datetime-local"]');
dateControl.value = '2017-06-01T08:30';

1

Mengapa mengkhawatirkan masalah Y10K jika itu akan terjadi berabad-abad setelah kematian Anda?

Dalam contoh ini, kami membuat dua set elemen UI untuk memilih waktu — pemilih

<select name="timezone" id="timezone">
  <option value="Pacific/Kwajalein">Eniwetok, Kwajaleinoption>
  <option value="Pacific/Midway">Midway Island, Samoaoption>
  <option value="Pacific/Honolulu">Hawaiioption>
  <option value="Pacific/Marquesas">Taiohaeoption>
  
select>

8 asli, dan satu set lima elemen

div {
  margin-bottom: 10px;
  display: flex;
  align-items: center;
}

label {
  display: inline-block;
  width: 300px;
}

input:invalid + span::after {
  content: "✖";
  padding-left: 5px;
}

input:valid + span::after {
  content: "✓";
  padding-left: 5px;
}

3 untuk memilih tanggal dan waktu di browser lama yang tidak mendukung input asli

HTML terlihat seperti itu

const dateControl = document.querySelector('input[type="datetime-local"]');
dateControl.value = '2017-06-01T08:30';

2

Bulan-bulan diberi kode keras (karena selalu sama), sedangkan nilai hari dan tahun dihasilkan secara dinamis tergantung pada bulan dan tahun yang dipilih saat ini, dan masing-masing tahun saat ini (lihat komentar kode di bawah untuk penjelasan terperinci tentang bagaimana ini . ) Kami juga memutuskan untuk membuat jam dan menit secara dinamis, karena jumlahnya sangat banyak

const dateControl = document.querySelector('input[type="datetime-local"]');
dateControl.value = '2017-06-01T08:30';

3

Bagian lain dari kode yang mungkin menarik adalah kode deteksi fitur — untuk mendeteksi apakah browser mendukung

<select name="timezone" id="timezone">
  <option value="Pacific/Kwajalein">Eniwetok, Kwajaleinoption>
  <option value="Pacific/Midway">Midway Island, Samoaoption>
  <option value="Pacific/Honolulu">Hawaiioption>
  <option value="Pacific/Marquesas">Taiohaeoption>
  
select>

8, kami membuat elemen

const dateControl = document.querySelector('input[type="datetime-local"]');
dateControl.value = '2017-06-01T08:30';

5 baru, coba atur

const dateControl = document.querySelector('input[type="datetime-local"]');
dateControl.value = '2017-06-01T08:30';

00 ke

const dateControl = document.querySelector('input[type="datetime-local"]');
dateControl.value = '2017-06-01T08:30';

6, lalu segera periksa tipe apa yang disetel. Browser yang tidak mendukung

const dateControl = document.querySelector('input[type="datetime-local"]');
dateControl.value = '2017-06-01T08:30';

_6 mengembalikan

const dateControl = document.querySelector('input[type="datetime-local"]');
dateControl.value = '2017-06-01T08:30';

03, karena itulah

const dateControl = document.querySelector('input[type="datetime-local"]');
dateControl.value = '2017-06-01T08:30';

6 kembali ke. Jika

<select name="timezone" id="timezone">
  <option value="Pacific/Kwajalein">Eniwetok, Kwajaleinoption>
  <option value="Pacific/Midway">Midway Island, Samoaoption>
  <option value="Pacific/Honolulu">Hawaiioption>
  <option value="Pacific/Marquesas">Taiohaeoption>
  
select>

_8 tidak didukung, kami menyembunyikan pemilih asli dan menampilkan UI pemilih cadangan (

div {
  margin-bottom: 10px;
  display: flex;
  align-items: center;
}

label {
  display: inline-block;
  width: 300px;
}

input:invalid + span::after {
  content: "✖";
  padding-left: 5px;
}

input:valid + span::after {
  content: "✓";
  padding-left: 5px;
}

3) sebagai gantinya

const dateControl = document.querySelector('input[type="datetime-local"]');
dateControl.value = '2017-06-01T08:30';

4

Catatan. Ingatlah bahwa beberapa tahun memiliki 53 minggu di dalamnya (lihat ). Anda harus mempertimbangkan hal ini saat mengembangkan aplikasi produksi

Bagaimana cara menampilkan datetime dalam HTML?

Nilai Atribut .

YYYY - tahun (mis. g. 2011)

MM - bulan (mis. g. 01 untuk Januari)

DD - hari dalam sebulan (mis. g. 08)

T atau spasi - pemisah (diperlukan jika waktu juga ditentukan)

jj - jam (mis. g. 22 untuk 10. 00 malam)

mm - menit (mis. g. 55)

ss - detik (mis. g. 03)

Bagaimana cara memasukkan tanggal dan waktu dalam HTML?

menentukan pemilih tanggal. Nilai yang dihasilkan meliputi tahun, bulan, hari, dan waktu. Tip. Selalu tambahkan tag

Bagaimana cara menampilkan tanggal dan waktu langsung dalam HTML?

You need to add a

HTML element between the lines

Dashboard

and so you can set the time using JavaScript code.

Bagaimana cara menampilkan tanggal dan waktu saat ini di kotak teks HTML?

function getDate(){ var todaydate = new Date(); . getDate(); . getMonth() + 1;

kode html

Cara menampilkan tanggal waktu di html

Bagaimana cara menampilkan datetime dalam HTML?

Bagaimana cara memasukkan tanggal dan waktu dalam HTML?

Bagaimana cara menampilkan tanggal dan waktu langsung dalam HTML?

Dashboard

Bagaimana cara menampilkan tanggal dan waktu saat ini di kotak teks HTML?

Bài Viết Liên Quan

Có thể bạn quan tâm

Xem Nhiều

Chúng tôi

Điều khoản

Trợ giúp

Mạng xã hội