Cara mengatur nilai tanggal tipe input di javascript

Elemen HTML mengharapkan atribut value diatur dalam format "YYYY-MM-DD". Oleh karena itu, jika Anda menyetel nilai default menggunakan PHP, maka Anda harus mematuhi format tanggal yang benar (mis. e. "Y-m-d" dalam PHP)

Misalnya, Anda dapat mengatur tanggal saat ini menggunakan DateTime (atau DateTimeImmutable), dengan cara berikut

$dt = new DateTime();

echo '';

Demikian pula, Anda dapat menetapkan tanggal tertentu menggunakan DateTime (atau DateTimeImmutable), dengan cara berikut

$dt = new DateTime('16.10.2022');

echo '';

_

Ada beberapa cara lain untuk membuat tanggal yang diformat dalam PHP. Misalnya, Anda dapat menggunakan fungsi

$dt = new DateTime('16.10.2022');

echo '';

_1 sebagai alternatif, yang membuat objek DateTime baru

$dt = date_create('16.10.2022');

echo '';

---

Semoga postingan ini bermanfaat bagi Anda. Itu diterbitkan 16 Oktober 2022. Tolong tunjukkan cinta dan dukungan Anda dengan

Pengguna-163012697 diposting

Itu mudah diterapkan.  

Lihat kode di bawah ini. Anda dapat mengubah format sesuai keinginan untuk jenis tanggal. Secara default menerima 'yyyy-MM-dd'

    @Html.TextBox("txtInput", "", new { type = "text" })
    @Html.TextBox("txtDate", "", new { type = "date" })

    

_

    <<7 ________36______8________36______9head0 head1________36______9head3

inputdateObject.value = YYYY-MM-DD

90________36______9

inputdateObject.value = YYYY-MM-DD

92________92________

Kemarin, kita belajar cara mendapatkan nilai masukan berupa angka dengan JavaScript. Hari ini, kita akan mempelajari cara mendapatkan objek Date sebagai gantinya

Mari kita menggali lebih dalam

Sebuah contoh

Bayangkan Anda memiliki elemen input dengan atribut [type="date"]

Ini membuat pemilih tanggal asli browser yang berfungsi di semua browser modern. Properti value_ dari input akan mengembalikan tanggal yang dipilih dalam format

let field = document.querySelector('#date');

// Handle date changes
date.addEventListener('input', function () {
	// ...
});

1

<label for="date">Pick a datelabel>
<input type="date" name="date" id="date">

_

Setiap kali pengguna memperbarui nilai bidang, Anda ingin mendapatkan nilai

let field = document.querySelector('#date');

// Handle date changes
date.addEventListener('input', function () {
	// ...
});

2 sebagai objek Date

let field = document.querySelector('#date');

// Handle date changes
date.addEventListener('input', function () {
	// ...
});

Mari kita lihat dua cara untuk melakukannya

Menggunakan konstruktor let field = document.querySelector('#date'); // Handle date changes date.addEventListener('input', function () { // ... }); _4

Cara paling umum untuk melakukan ini adalah dengan meneruskan

let field = document.querySelector('#date');

// Handle date changes
date.addEventListener('input', function () {
	// ...
});

5 ke konstruktor

let field = document.querySelector('#date');

// Handle date changes
date.addEventListener('input', function () {
	// ...
});

4 untuk membuat objek baru

Ada sedikit trik dengan pendekatan ini. Katakanlah Anda memilih 7 April 2022 dari pemilih tanggal. Jika Anda meneruskan

let field = document.querySelector('#date');

// Handle date changes
date.addEventListener('input', function () {
	// ...
});

5 ke

let field = document.querySelector('#date');

// Handle date changes
date.addEventListener('input', function () {
	// ...
});

4, tergantung di belahan dunia mana Anda tinggal, objek _______ 46 ______ yang dikembalikan sebenarnya mungkin untuk 6 April 2022

// Get the date
let date = new Date(field.value);

Ini demonya

Ini terjadi karena string tanggal format

let field = document.querySelector('#date');

// Handle date changes
date.addEventListener('input', function () {
	// ...
});

1 menggunakan UTC/GMT sebagai zona waktunya, bukan zona waktu lokal Anda

Untuk menyiasatinya, kita perlu meneruskan string waktu dengan string tanggal. Kita bisa menggunakan tengah malam,

// Get the date
let date = new Date(field.value);

_1, seperti ini

// Get the date
let date = new Date(`${field.value}T00:00`);

Ini demo yang diperbarui

Ada cara lain yang lebih sederhana

Properti // Get the date let date = new Date(field.value); _2

Sama seperti , properti

// Get the date
let date = new Date(field.value);

_2 mendapatkan nilai dari input sebagai objek Date

let date = field.valueAsDate;

Sayangnya, ini mengalami masalah yang sama dengan melewati

let field = document.querySelector('#date');

// Handle date changes
date.addEventListener('input', function () {
	// ...
});

5 tanpa string waktu. tanggalnya sering sehari lebih awal. Ini demo lainnya

Penggunaan yang lebih andal untuk properti

// Get the date
let date = new Date(field.value);

_2 adalah menyetel nilai default bidang [type="date"]. Misalnya, ini akan membuat objek Date_ untuk momen saat ini dalam waktu setempat, dan menyetel nilai

let field = document.querySelector('#date');

// Handle date changes
date.addEventListener('input', function () {
	// ...
});

2 ke dalamnya

Bagaimana cara mengatur format tanggal pada tipe input?

Bagaimana cara mendapatkan nilai tanggal dalam JavaScript?

Bagaimana cara mengubah nilai default tanggal input?

Bagaimana cara mengatur tanggal saat ini di kotak teks menggunakan JavaScript?