Sélecteur de date (datedropper) et d'heure (timedropper) mobile jQuery avec code source download_jquery

Nous appliquons souvent des sélecteurs de date et d'heure. Celui que nous utilisions le plus auparavant était le datepicker() de jQuery UI. Aujourd'hui, je vais donc vous présenter un sélecteur de date et d'heure très intéressant, qui est divisé en sélecteurs de date et. timepicker timedropper, tous deux sont particulièrement adaptés aux applications mobiles.

Démonstration en ligne Téléchargement du code source

datedropper

L'utilisation est très simple, en trois étapes,

1. Présentez les fichiers js et css pertinents. Notez que datedropper et timedropper sont tous deux des plug-ins basés sur jQuery, les fichiers de bibliothèque jQuery doivent donc également être introduits.

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

2. Organisez le code HTML dans le corps.

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

3. Appelez datedropper

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

Ensuite, vous pouvez configurer certaines options de manière appropriée en fonction de vos besoins. datedropper fournit les paramètres d'options de base suivants :

animer : afficher l'effet d'animation. Lorsqu'elle est définie sur true, la date dans le panneau de sélection s'animera et défilera jusqu'à la date actuelle.

init_animation : l'effet d'animation lorsque vous cliquez sur le panneau contextuel, y compris fadeIn (par défaut), rebond et dropDown.

format : Format date, j'ai changé le format par défaut en Y-m-d.

lang : Langue, j'ai traduit le mois et la semaine par défaut du plug-in en langue chinoise.

maxYear : année maximale, par défaut l'année en cours.

minYear : année minimale, par défaut 1970.

yearsRange : plage d'années, la valeur par défaut est 10 ans.

dateDropper fournit également des paramètres de style de peau.

timedropper timedropper

Comme le sélecteur de date, il est facile à utiliser.

1. Importez des fichiers js et css.

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

2. Organisez le code HTML dans le corps.

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

3. Appelez timedropper

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

timeDropper fournit les paramètres d'options de base suivants :

Méridiens : s'il faut utiliser le format 12 heures. La valeur par défaut est le format 12 heures. Si la valeur est définie sur false, ce sera le format 24 heures.

format : format, HH:mm tel que 02:12.

init_animation : formulaire d'animation, fadeIn (par défaut), dropDown.

setCurrentTime : définit automatiquement l'heure actuelle.

timeDropper fournit également des paramètres de style de peau.

Tout cela concerne les sélecteurs de date (datedropper) et d'heure (timedropper) mobiles jQuery. Les amis intéressés peuvent voir la démonstration de l'effet et télécharger le code source !