Instructions d'utilisation du plug-in de date jQuery Mobile Mobiscroll_jquery

Dans le développement mobile récent, j'utilise jQuery Mobile. Il n'y a pas autant de plug-ins mobiles que de plug-ins Web, et il y a moins de choix. Certains d'entre eux doivent être packagés par vous-même, mais les compétences sont là. pas assez.

JQM fournit également un plug-in de date intégré, mais le style n'est pas beau, j'ai donc dû utiliser Baidu et Google et j'ai trouvé deux jquery-mobile-datebox et mobiscroll-2.3

jqueryMobileDatebox ne fonctionne pas bien sur le tableau et ses performances sont un peu lentes

Les performances de Mobiscroll sont meilleures que les précédentes, l'effet est plus simple et le balayage est plus fluide

Comparons-les ensemble

Chers lecteurs, lequel vous semble le plus beau

Quoi qu'il en soit, je pense que Mobiscroll est plus efficace. Jetons un coup d'œil à quelques façons d'utiliser ce type

.

Première étape : accédez au site officiel pour télécharger un package compressé. Vous devez vous inscrire avant de télécharger. Lors du téléchargement, vous pouvez choisir le framework et le style de skin que vous utilisez, voir l'image ci-dessous

Il est supposé que vous vous êtes inscrit et téléchargé avec succès

La deuxième étape consiste à créer un nouveau fichier HTML5, à importer jquery.js, jquerymobile.js et les autres fichiers nécessaires, et à écrire le code suivant dans votre fichier :

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

On peut initialiser le contrôle de date comme ceci :

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

Prévisualisez-le pour voir s'il est prêt à être utilisé ! Seule cette interface est en anglais, ce qui est un peu inconfortable pour les Chinois, et le site officiel ne fournit pas de pack de langue chinoise, mais ce n'est pas grave. L'API du site officiel est toujours bonne. Nous pouvons en définir couramment. utilisé des attributs pour le rendre conforme au format de date conventionnel.

//初始化日期控件
  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);

C'est tout. Jetons un coup d'oeil aux rendus

Vous pouvez le voir clairement maintenant. Je ne l'écrirai pas, j'écrirai juste cela. Les DOCS sur le site officiel sont très détaillés, donc je ne les listerai pas un par un ici. Les amis intéressés peuvent aller l'étudier.