Bagaimana untuk menukar tarikh kepada rentetan dalam jquery

PHPz
Lepaskan: 2023-05-12 13:02:37
asal
1237 orang telah melayarinya

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.





  1. Menggunakan jQuery datepicker

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

Kod HTML:

Kod JavaScript:

$(dokumen). ready(function(){

$(".datepicker").datepicker();
Salin selepas log masuk

});

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.

  1. 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:


Tukar

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);
});
Salin selepas log masuk

});

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!

sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan