Sélecteur de date et d'heure JavaScript adapté aux compétences de terminal mobile_javascript

Il s'agit d'un sélecteur de date et d'heure adapté aux applications WEB des appareils mobiles. Pour la version de bureau du sélecteur de date, nous utilisons généralement le plug-in datepicker de jQuery UI, tandis que pour la version mobile du sélecteur de date, vous pouvez. choisissez d'utiliser jQuery en fonction des besoins du projet. Le plug-in mobiscroll.js fourni par Mobile fournit une interface conviviale d'opération de sélection de date et d'heure et est facile à configurer et à utiliser.

HTML
Nous chargeons d'abord les plug-ins et les fichiers de style pertinents. Le plug-in est basé sur jQuery et jQuery.mobile, nous devons donc d'abord charger ces deux fichiers de bibliothèque, puis charger le plug-in mobiscroll.js et les fichiers CSS associés. .

<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" />

Placez ensuite une zone de saisie dans le corps, qui est une zone de saisie de texte ordinaire. Lorsque la souris clique sur la zone de saisie pour obtenir le curseur, Mobiscroll sera déclenché pour faire apparaître le sélecteur de date.

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

JavaScript
mobiscroll fournit de nombreuses options qui peuvent être définies, notamment la définition de la méthode d'affichage du panneau contextuel, la date maximale, la date minimale, le format de date, l'année de fin, etc. Vous pouvez également localiser le plug-in, notamment en définissant des boutons et des instructions en chinois. L'appel est également très simple, voici l'exemple de code :

$(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);
});

Si vous sélectionnez uniquement l'heure, vous pouvez écrire comme ceci :

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

Si vous souhaitez afficher la date et l'heure sur le panneau, appelez ceci :

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

Téléchargement du code source : Sélecteur de date et d'heure Javascript adapté aux terminaux mobiles

Un sélecteur de date et d'heure JavaScript simple et élégant adapté aux terminaux mobiles a été créé.