Maison > interface Web > js tutoriel > le corps du texte

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

WBOY
Libérer: 2016-05-16 15:04:46
original
2121 Les gens l'ont consulté

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"> 
Copier après la connexion

2. Organisez le code HTML dans le corps.

<input type="text" id="pickdate" /> 
Copier après la connexion

3. Appelez datedropper

<script> 
$("#pickdate").dateDropper(); 
</script> 
Copier après la connexion

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"> 
Copier après la connexion

2. Organisez le code HTML dans le corps.

<input type="text" id="picktime" /> 
Copier après la connexion

3. Appelez timedropper

<script> 
$("#picktime").timeDropper(); 
</script> 
Copier après la connexion

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 !

source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal