Bagaimana untuk menukar tarikh kepada rentetan dalam jquery

Pemprosesan tarikh ialah masalah biasa dalam pembangunan bahagian hadapan. Apabila membangun dengan jQuery, menukar tarikh kepada rentetan juga merupakan keperluan biasa. Artikel ini akan menunjukkan cara menukar tarikh kepada rentetan dengan memperkenalkan pemalam datepicker jQuery.

1. jQuery datepicker

jQuery datepicker ialah pemalam pemilih tarikh yang menggunakan gaya UI jQuery dan menyediakan fungsi interaktif untuk pemilihan tarikh. Menggunakan pemalam datepicker jQuery, anda boleh memilih tarikh dengan mudah dan memformatkannya ke dalam rentetan.

1. Pasang jQuery datepicker

Mula-mula, anda perlu memperkenalkan fail perpustakaan jQuery dan jQuery UI, serta fail perpustakaan jQuery datepicker ke dalam halaman HTML. Fail perpustakaan yang sepadan boleh dimuat turun dari laman web rasmi jQuery (https://jquery.com/) dan laman web rasmi UI jQuery (https://jqueryui.com/). Atau muatkan menggunakan CDN.

162af23817261d4fc6ac1b65cbd537d02cacc6d41bbb37262a98f745aa00fbf0
ea8d1149b7e4f28c9f66faf8324b89272cacc6d41bbb37262a98f745aa00fbf0
26506cee0e045ab2e0514f675d5ac881
c6f9f990b826ff3923888897c04585eb2cacc6d41bbb37262a98f745aa00fbf0
a6b2fd597d08e40703108a9a1e876ef7

2. Menggunakan jQuery datepicker

Menggunakan jQuery datepicker cuma tambah kelas pada kotak input tarikh , dan kemudian panggil fungsi datepicker dalam JavaScript.

Kod HTML:

dce39bab25e8c23ccacfef3c0853299c

Kod JavaScript:

$(dokumen). ready(function(){

$(".datepicker").datepicker();

});

Dengan cara ini, anda boleh mengklik pada kotak input tarikh untuk muncul pemilih tarikh.

2. Menukar tarikh kepada rentetan

Menukar tarikh kepada rentetan terutamanya melibatkan dua proses: mendapatkan tarikh dan memformat menjadi rentetan.

1. Dapatkan tarikh

Menggunakan jQuery datepicker, anda boleh mendapatkan tarikh melalui fungsi. Contohnya, untuk mendapatkan tarikh lalai apabila pemilih tarikh muncul:

$(".datepicker").datepicker("getDate")

Fungsi ini mengembalikan objek jenis Tarikh JavaScript.

2. Formatkan menjadi rentetan

Menggunakan jenis Tarikh JavaScript disertakan dengan beberapa kaedah pemformatan tarikh, termasuk toDateString(), toLocaleDateString(), dsb. Tetapi kelemahan kaedah ini ialah format tidak boleh disesuaikan.

Untuk memformat tarikh dengan mudah, kami boleh menggunakan moment.js perpustakaan pihak ketiga (https://momentjs.com/), yang menyediakan kaedah pemprosesan tarikh yang sangat mudah.

Sebagai contoh, jika kita ingin memformat tarikh ke dalam bentuk yyyy-mm-dd, kita boleh menggunakan kaedah format() moment.js.

moment(date).format("YYYY-MM-DD")

Di mana, tarikh ialah objek jenis Tarikh JavaScript, mewakili tarikh yang akan diformatkan. Parameter kaedah format() ialah rentetan yang digunakan untuk menentukan format output. YYYY mewakili tahun empat digit, MM mewakili bulan dan DD mewakili bilangan hari.

Kod lengkap adalah seperti berikut:

Kod HTML:

dce39bab25e8c23ccacfef3c0853299c
3858ea28c7a5ce823f46626efc27f2f6Tukar65281c5ac262bf6d81768915a4a77ac0
9369b95c0a54fa14078c71ff87b92a5394b3e26ee717c64999d7867364b1b4a3

Kod JavaScript:

$(dokumen).siap ( function(){

$(".datepicker").datepicker();
$("#btnConvert").click(function(){
    var date = $(".datepicker").datepicker("getDate");
    var dateString = moment(date).format("YYYY-MM-DD");
    $("#result").text(dateString);
});

});

Pertama, kelas datepicker ditambah untuk kotak input tarikh. Kemudian, butang ditakrifkan untuk mencetuskan proses penukaran tarikh. Apabila butang diklik, fungsi getUserDate() akan mendapatkan tarikh dan menggunakan moment.js untuk memformat tarikh menjadi rentetan.

3. Ringkasan

Menggunakan pemalam datepicker jQuery, anda boleh melaksanakan pemilih tarikh dengan cepat. Menggunakan moment.js, anda boleh menukar tarikh kepada rentetan dengan mudah dan menyesuaikan format tarikh. Melalui penjelasan artikel ini, saya percaya semua orang mempunyai pemahaman yang lebih mendalam tentang cara jQuery menukar tarikh kepada rentetan.

Atas ialah kandungan terperinci Bagaimana untuk menukar tarikh kepada rentetan dalam jquery. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!