pemilih tarikh mudah alih jQuery (datedropper) dan masa (timedropper) dengan kod sumber download_jquery

Kami sering menggunakan pemilih tarikh dan masa Yang paling kami gunakan sebelum ini ialah pemilih tarikh () UI jadi hari ini saya akan memperkenalkan kepada anda pemilih tarikh dan masa yang sangat menarik, yang dibahagikan kepada pemilih tarikh dan penitis masa pemilih masa, kedua-duanya amat sesuai untuk aplikasi mudah alih.

Demonstrasi Dalam Talian Muat turun kod sumber

penetes kurma

Penggunaan sangat mudah, dalam tiga langkah,

1. Perkenalkan fail js dan css yang berkaitan. Ambil perhatian bahawa datedropper dan timedropper adalah kedua-dua pemalam berasaskan jQuery, jadi fail perpustakaan jQuery juga mesti diperkenalkan.

<script src="jquery.js"></script> 
<script src="datedropper.js"></script> 
<link rel="stylesheet" type="text/css" href="datedropper.css"> 

2. Susun html dalam badan.

<input type="text" id="pickdate" /> 

3. Panggil penitis tarikh

<script> 
$("#pickdate").dateDropper(); 
</script> 

Kemudian, anda boleh mengkonfigurasi beberapa pilihan dengan sewajarnya mengikut keperluan anda. datedropper menyediakan tetapan pilihan asas berikut:

animate: Paparkan kesan animasi Apabila ditetapkan kepada benar, tarikh dalam panel pemilih akan bernyawa dan tatal ke tarikh semasa.

init_animation: Kesan animasi apabila mengklik pada panel timbul, termasuk fadeIn (lalai), lantunan dan dropDown.

format: Format tarikh, saya telah menukar format lalai kepada Y-m-d.

lang: Bahasa, saya telah menterjemah bulan dan minggu lalai pemalam ke dalam bahasa Cina.

maxYear: tahun maksimum, lalai kepada tahun semasa.

minTahun: tahun minimum, lalai 1970.

julat tahun: julat tahun, lalai ialah 10 tahun.

dateDropper juga menyediakan tetapan gaya kulit.

penitis masa

Seperti pemilih tarikh, ia mudah digunakan.

1. Import fail js dan css.

<script src="jquery.js"></script> 
<script src="timedropper.js"></script> 
<link rel="stylesheet" type="text/css" href="timedropper.css"> 

2. Susun html dalam badan.

<input type="text" id="picktime" /> 

3. Pentak masa panggilan

<script> 
$("#picktime").timeDropper(); 
</script> 

timeDropper menyediakan tetapan pilihan asas berikut:

meridian: Sama ada hendak menggunakan format 12 jam Format lalai ialah format 12 jam Jika ditetapkan kepada palsu, ia akan menjadi format 24 jam.

format: format, HH:mm seperti 02:12.

init_animation: borang animasi, fadeIn (lalai), dropDown.

setCurrentTime: Tetapkan masa semasa secara automatik.

timeDropper juga menyediakan tetapan gaya kulit.

Ini semua tentang pemilih tarikh mudah alih jQuery (datedropper) dan masa (timedropper) Rakan-rakan yang berminat boleh melihat demonstrasi kesan dan memuat turun kod sumber.