Rumah > Artikel > hujung hadapan web > Bagaimana untuk mengimport kalendar dengan jquery
Bagaimana untuk mengimport kalendar dengan jquery
- WBOYasal
- 2023-05-25 11:54:08487semak imbas
Dengan perkembangan Internet, kehidupan kita menjadi lebih digital, dan terdapat lebih banyak lagi pelbagai aplikasi. Komponen kalendar sering digunakan semasa pembangunan laman web. jquery kini merupakan salah satu rangka kerja JavaScript yang paling popular dan praktikal Ia menyediakan API yang kaya yang membolehkan kami membina komponen kalendar yang sangat baik. Artikel ini akan memperkenalkan cara menggunakan jquery untuk mengimport komponen kalendar.
1. Muat turun pemalam kalendar jquery
Pertama, anda perlu membuka tapak web rasmi jquery (https://jquery.com/) untuk memuat turun fail perpustakaan jquery, dan pilih versi yang serasi untuk rujukan. Selain itu, anda juga perlu memuat turun pemalam kalendar jquery.
Adalah disyorkan untuk menggunakan komponen pemilih tarikh UI jQuery. Muat turun fail yang berkaitan dari tapak web rasmi jquery ui, yang termasuk fail css, fail js dan imej yang berkaitan.
2. Cipta struktur HTML
Dalam fail HTML, anda perlu menggunakan teg dan atribut yang sepadan untuk mencipta struktur pemilih tarikh. Berikut ialah kod pemetik tarikh asas:
<!DOCTYPE html>
<html>
<head>
<title>jquery-datepicker</title>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$(function() {
$( "#datepicker" ).datepicker();
});
</script>
</head>
<body>
<p>Date: <input type="text" id="datepicker"></p>
</body>
</html>Dalam kod ini, kami memperkenalkan fail perpustakaan jquery dan fail perpustakaan ui jquery. Dalam teg p bahagian badan, kami mencipta teg input dan menambahkan atribut id "datepicker" padanya.
3. Gunakan jquery untuk import kalendar
Tambahkan kod yang berkaitan bagi komponen kalendar jquery dalam teg kepala. Kod ini termasuk rujukan kepada gaya dan skrip, serta tetapan permulaan yang berkaitan.
<!DOCTYPE html>
<html>
<head>
<title>jquery-datepicker</title>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$(function() {
$( "#datepicker" ).datepicker({
dateFormat: "yy-mm-dd"
});
});
</script>
<style>
.ui-datepicker {
font-size: 12px;
}
</style>
</head>
<body>
<p>Date: <input type="text" id="datepicker"></p>
</body>
</html>Dalam kod di atas, kami memperkenalkan komponen kalendar jquery ui dan menetapkan format tarikh (dateFormat) kepada "yy-mm-dd" dalam fungsi permulaan. Pada masa yang sama, kami juga menambah gaya ringkas yang mengubah saiz fon kalendar.
Pada ketika ini, komponen kalendar jquery kami telah berjaya diimport! Selepas membuka fail HTML dalam penyemak imbas, anda boleh melihat kotak input kalendar.
Ringkasan
Dengan kaedah di atas, kita boleh mengimport komponen kalendar dengan mudah menggunakan jquery. Malah, selain menyediakan API yang kaya, jquery juga menyediakan banyak komponen dan pemalam lain untuk membina tapak web yang berkuasa dengan mudah. Saya harap artikel ini boleh membantu semua orang, dan saya juga berharap semua orang boleh menggunakan jquery dengan mahir dalam projek sebenar untuk membawa pengalaman yang lebih baik kepada pengguna.
Atas ialah kandungan terperinci Bagaimana untuk mengimport kalendar dengan jquery. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!