Bagaimana untuk memilih kawalan masa dengan jquery-Soal Jawab bahagian hadapan-php.cn

Bagaimana untuk memilih kawalan masa dengan jquery

WBOY

Lepaskan： 2023-05-23 20:47:06

asal

2111 orang telah melayarinya

Dengan perkembangan Internet, kawalan pemilihan masa menjadi semakin biasa digunakan dalam pembangunan web. Antaranya, pemalam pemilih masa jQuery mempunyai kelebihan yang jelas dalam operasi mudah dan kesan yang cantik, dan dialu-alukan secara meluas dan disokong oleh pembangun. Artikel ini akan memperkenalkan cara menggunakan pemalam pemilih masa jQuery untuk membantu pembangun melaksanakan kawalan pemilihan masa dengan lebih pantas dan lebih mudah.

1. Pengenalan kepada pemalam pemilih masa jQuery

Pemalam pemilih masa jQuery ialah pemalam pemilih tarikh dan masa yang pantas, fleksibel, merentas penyemak imbas yang bergantung pada perpustakaan jQuery dan mempunyai penyesuaian, Mudah dikembangkan, gaya yang cantik dan ciri-ciri lain. Ia mudah digunakan, menyokong berbilang bahasa, boleh disesuaikan dengan tinggi dan menyediakan fungsi panggil balik acara yang kaya. Pembangun hanya perlu memperkenalkan fail JS dan CSS yang berkaitan dan hanya memanggil mereka untuk melaksanakan kawalan pemilihan masa. Pada masa ini, terdapat berbilang versi pemalam pemilih masa jQuery Artikel ini merujuk kepada pemalam dengan nombor versi 2.1.9.

2. Penggunaan pemalam pemilih masa jQuery

Pengenalan fail berkaitan

Pertama sekali, anda perlu memperkenalkan perpustakaan jQuery dan Fail JS dan CSS berkaitan pemalam pemilih masa jQuery.

<head>
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery-timepicker/2.1.9/jquery.timepicker.min.js"></script>
  <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/jquery-timepicker/2.1.9/jquery.timepicker.min.css">
</head>

Salin selepas log masuk

reka letak halaman HTML

Seterusnya, tambahkan teg input pada halaman sebagai bekas untuk pemilih masa.

<input type="text" class="timepicker" />

Salin selepas log masuk

Antaranya, nilai atribut kelas ialah pemilih masa, menunjukkan bahawa teg input ini ialah pemilih masa.

Mulakan pemalam

Panggil kaedah timepicker() bagi pemalam pemilih masa jQuery untuk memulakan pemilih masa.

$(document).ready(function() {
  $('.timepicker').timepicker();
});

Salin selepas log masuk

Antaranya, kaedah ready() digunakan untuk memastikan dokumen telah dimuatkan sepenuhnya sebelum melaksanakan kod JavaScript. Kaedah timepicker() digunakan untuk memulakan pemilih masa, yang mempunyai pelbagai parameter pilihan dan boleh sangat disesuaikan.

Penggunaan fungsi lanjutan

Selain pemilihan masa asas, pemalam pemilih masa jQuery juga menyediakan banyak fungsi lanjutan, seperti menetapkan format masa, menetapkan minit selang waktu, menambah had masa, menukar bahasa, dsb. Di bawah, pelaksanaan fungsi biasa ini akan diperkenalkan masing-masing.

(1) Tetapkan format masa

Dengan menetapkan atribut format, anda boleh menetapkan format pemilih masa. Pilihan pemformatan boleh termasuk format tarikh, format masa dan masa awal (jika anda ingin memaparkan masa awal, anda perlu menetapkan masa yang sepadan).

$(function() {
  $("#timepicker").timepicker({
    timeFormat: "HH:mm:ss",
    dateFormat: "yy-mm-dd",
    dateTimeFormat: "yy-mm-dd HH:mm:ss",
    initialValue: "09:00"
  });
});

Salin selepas log masuk

Kod di atas menetapkan format masa pemilih masa kepada "HH:mm:ss", format tarikh kepada "yy-mm-dd", dan format masa tarikh kepada "yy-mm- dd HH:mm" :ss", masa awal ialah "09:00".

(2) Tetapkan selang minit

Dengan menetapkan atribut langkah, anda boleh menetapkan selang minit dan kedua pemilih masa, mengambil 15 minit sebagai contoh:

$(function() {
  $("#timepicker").timepicker({
    step: 15 * 60  // 单位为秒
  });
});

Salin selepas log masuk

Tetapan kod di atas Selang minit pemilih masa ditetapkan kepada 15 minit.

(3) Tambah had masa

Dengan menetapkan atribut minTime dan maxTime, anda boleh mengehadkan julat masa pemilih masa, mengambil 9:00 hingga 17:00 sebagai contoh:

$(function() {
  $("#timepicker").timepicker({
    minTime: "9:00",
    maxTime: "17:00"
  });
});

Salin selepas log masuk

Kod di atas menetapkan masa terawal pemilih masa kepada 9:00 dan masa terkini kepada 17:00.

(4) Tukar bahasa

Dengan menetapkan pek bahasa, anda boleh menukar bahasa pemilih masa.

$(function() {
  $("#timepicker").timepicker({
    timeFormat: "HH:mm",
    lang: "zh"
  });
});

Salin selepas log masuk

Kod di atas menetapkan format masa pemilih masa kepada "HH:mm" dan bahasa kepada bahasa Cina.

3. Ringkasan

Artikel ini memperkenalkan cara menggunakan pemalam pemilih masa jQuery untuk melaksanakan kawalan pemilihan masa. Dengan memperkenalkan fail yang berkaitan, menambah reka letak halaman HTML dan memulakan pemalam, anda boleh mencipta pemilih masa yang cantik dan praktikal dengan cepat. Selain itu, pemilih masa boleh disesuaikan lagi dengan menetapkan ciri lanjutan seperti format masa, selang minit, had masa dan pek bahasa. Oleh itu, bagi pembangun yang membangunkan pemilih masa, belajar menggunakan pemalam pemilih masa jQuery adalah kemahiran yang sangat diperlukan.

Atas ialah kandungan terperinci Bagaimana untuk memilih kawalan masa dengan jquery. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!