jQuery Pemalam tarikh mudah alih Mobiscroll instructions_jquery

Dalam pembangunan mudah alih baru-baru ini, saya menggunakan jQuery Mobile Tidak banyak pemalam mudah alih seperti yang terdapat pada pemalam Web, dan terdapat lebih sedikit pilihan yang perlu dibungkus sendiri, tetapi kemahirannya tak cukup.

JQM juga menyediakan pemalam tarikh terbina dalam, tetapi gayanya tidak cantik, jadi saya terpaksa menggunakan Baidu dan Google dan menemui dua jquery-mobile-datebox dan mobiscroll-2.3

jqueryMobileDatebox tidak menunjukkan prestasi yang baik di papan dan prestasinya agak perlahan

Prestasi mobiscroll lebih baik daripada yang pertama, kesannya lebih ringkas dan sapuan lebih lancar

Mari kita bandingkan bersama-sama

Pembaca yang dihormati, yang mana satu pada pendapat anda kelihatan lebih baik

Apa pun, saya rasa mobiscroll lebih berkesan Mari kita lihat beberapa cara untuk menggunakan lelaki ini

Langkah pertama: Pergi ke tapak web rasmi untuk memuat turun pakej termampat Anda perlu mendaftar sebelum memuat turun. Semasa memuat turun, anda boleh memilih rangka kerja dan gaya kulit yang anda gunakan, lihat gambar di bawah

Adalah diandaikan bahawa anda telah berjaya mendaftar dan memuat turun

Langkah kedua ialah mencipta fail HTML5 baharu, import jquery.js, jquerymobile.js dan fail lain yang diperlukan, dan tulis kod berikut ke dalam fail anda:

 <div data-role="fieldcontain">
     <label for="txtBirthday">出生日期：</label>
     <input type="text" data-role="datebox"  id="txtBirthday" name="birthday" />
 </div>

Kita boleh memulakan kawalan tarikh seperti ini:

$('input:jqmData(role="datebox")').mobiscroll().date();

Pratonton untuk melihat sama ada ia sedia untuk digunakan! Hanya antara muka ini dalam bahasa Inggeris, yang agak tidak selesa untuk orang Cina, dan tapak web rasmi tidak menyediakan pek bahasa Cina, tetapi tidak mengapa API tapak web rasmi masih bagus menggunakan atribut untuk menjadikannya mematuhi format tarikh konvensional.

//初始化日期控件
  var opt = {
    preset: 'date', //日期
    theme: 'jqm', //皮肤样式
    display: 'modal', //显示方式 
    mode: 'clickpick', //日期选择模式
    dateFormat: 'yy-mm-dd', // 日期格式
    setText: '确定', //确认按钮名称
    cancelText: '取消',//取消按钮名籍我
    dateOrder: 'yymmdd', //面板中日期排列格式
    dayText: '日', monthText: '月', yearText: '年', //面板中年月日文字
    endYear:2020 //结束年份
  };
  
  $('input:jqmData(role="datebox")').mobiscroll(opt);

Itu sahaja

Anda boleh melihatnya dengan jelas sekarang. Saya tidak akan menulisnya, hanya menulis sebanyak ini DOCS di laman web rasmi adalah sangat terperinci, jadi saya tidak akan menyenaraikannya satu persatu di sini.