Pemilih tarikh dan masa JavaScript sesuai untuk kemahiran terminal_javascript mudah alih

Ini ialah pemilih tarikh dan masa yang sesuai untuk aplikasi WEB peranti mudah alih Untuk versi desktop pemilih tarikh, kami biasanya menggunakan pemalam datepicker UI jQuery, manakala untuk versi mudah alih pemilih tarikh, anda boleh. pilih untuk menggunakan jQuery mengikut keperluan projek Pemalam mobiscroll.js yang disediakan oleh Mudah Alih menyediakan antara muka operasi pemilihan tarikh dan masa serta mudah untuk dikonfigurasikan dan digunakan.

HTML
Mula-mula kami memuatkan pemalam dan fail gaya yang berkaitan Pemalam adalah berdasarkan jQuery dan jQuery.mobile, jadi kami mula-mula perlu memuatkan kedua-dua fail perpustakaan ini, dan kemudian memuatkan pemalam mobiscroll.js dan fail CSS yang berkaitan. .

<script src="js/jquery.min.js"></script> 
<script src="js/jquery.mobile-1.3.0.min.js"></script> 
<script src="js/mobiscroll.js" type="text/javascript"></script> 
<link href="css/mobiscroll.custom-2.5.0.min.css" rel="stylesheet" type="text/css" /> 

Kemudian letakkan kotak input dalam badan, iaitu kotak input teks biasa Apabila tetikus mengklik pada kotak input untuk mendapatkan kursor, mobiscroll akan dicetuskan untuk muncul pemilih tarikh.

<input id="date" name="date" /> 

JavaScript
mobiscroll menyediakan banyak pilihan yang boleh ditetapkan, termasuk mentakrifkan kaedah paparan panel timbul, tarikh maksimum, tarikh minimum, format tarikh, tahun akhir, dll. Anda juga boleh menyetempatkan pemalam, termasuk menetapkan butang dan arahan bahasa Cina. Panggilannya juga sangat mudah, berikut ialah kod contoh:

$(function(){ 
 var opt = { 
 preset: 'date', //日期 
 theme: 'sense-ui', //皮肤样式 
 display: 'modal', //显示方式 
 mode: 'scroller', //日期选择模式 
 dateFormat: 'yy-mm-dd', // 日期格式 
 setText: '确定', //确认按钮名称 
 cancelText: '取消',//取消按钮名籍我 
 dateOrder: 'yymmdd', //面板中日期排列格式 
 dayText: '日', monthText: '月', yearText: '年', //面板中年月日文字 
 hourText: '时',minuteText: "分",ampmText:"上午/下午", 
 endYear:2020 //结束年份 
 }; 
 $("#date").mobiscroll().date(opt); 
}); 

Jika anda hanya memilih masa, anda boleh menulis seperti ini:

$("#time").mobiscroll().time(opt); 

Jika anda ingin memaparkan tarikh dan masa pada panel, hubungi ini:

$("#datetime").mobiscroll().datetime(opt); 

Muat turun kod sumber: Pemilih tarikh dan masa JavaScript sesuai untuk terminal mudah alih

Pemilih tarikh dan masa JavaScript yang mudah dan elegan yang sesuai untuk terminal mudah alih telah dibuat.