Tutoriel Vidéo jQuery : jQuery UI Datepicker

ludo31 Il y a 2 mois Répondre

un très bon tuto bien expliqué merci !!

gugul Il y a 3 mois Répondre

Voilà un truc qui va me servir :D
Merci !

fantlo Il y a 3 mois Répondre

Le site de JQueryUi, et donc la doc jQueryUi sont down... =(

Nico Il y a 4 mois Répondre

Merci pour le tuto, comment doit on faire, pour avoir directement le calendrier qui apparait au lieu d'avoir un champs input. Merci par avance

NaetoH Il y a 4 mois Répondre

Très bon tuto, très sympa le système de question après le tutoriel ^^

Megaballs Il y a 4 mois Répondre

Très bon tutorial.

J'ai une question concernant le CSS du datepicker. Je sais que c'est un peu hors sujet, mais comment êtes vous arrivez à avoir un aussi beau skin pour le datepicker (dans la démo).

Les ombres, les marges du header... Comment avez vous modifié tout cela? Directement dans le CSS? Parce que le themeRoller de Jquery ne permet pas cela.

Ou peut être existe-t-il quelque part sur le net un meilleur ThemeRoller?

Mandarin974 Il y a 3 mois - Répondre

Salut,

Regarde a nouveau le tuto !
A 4min18s ! Il parle de Aristo !!! Et il explique tout !

Suffit tout simple de regarder la vidéo en entier !

Mandarin974.

maeda974 Il y a 4 mois Répondre

très bon tuto comme d'habiture accessible et bien expliqué, bravo et merci !

diabless6 Il y a 4 mois Répondre

J'avais essayer le datePicker, mais ça marchait pas bien parce que le CSS n'était pas chargé. Moi, je pensais qu'en chargeant le JS ben ça chargeait le reste
Mais bon c'st comme une voiture, on a beau tourner le contact, si ya pas d'essence ça ne marche pas :D
J'avais essayer de le mettre en français, mais j'y suis pas arrivée parce que j'avais rien pigé à la doc.
Faut dire que si la doc est lisible, ben c'est pas très clair d'utiliser le contenu et pi en anglais ça complique les choses pardi.
Mais avec vos tutos c'est plus clair même si faut rembobiner la vidéo plusieurs fois pour comprendre les subtilités masculines... :p

Joshua Il y a 4 mois Répondre

Bonjour,

Tout d'abord, très bon tutoriel !

J'ai appliqué le tutoriel à mon site et mis un datepicker sur deux champs pour rechercher des enregistrements dans l'intervalle des dates dans ma BDD.

Pour ce faire, j'ai :
- Un premier champ <input type="text" class="datepicker" name="date_debut" size="10" />
- Un second champ <input type="text" class="datepicker" name="date_fin" size="10" />

Dans une autre page, je récupère $_POST['date_debut'] et $_POST['date_fin'], pour les transformer en timestamp selon la formule suivante : $date_debut = mktime(0, 0, 0, $_POST['date_debut']); pour la date de début de recherche, et $date_fin = mktime(23, 59, 59, $_POST['date_fin']); pour la date de fin.

Mais voilà le soucis étant que, PHP me renvoi la même date de début et de fin, qui sont égales à la date du jour...

Cela marchait très bien avant que je mette un datepicker. Je ne comprends pas trop.
Auriez-vous une idée du problème ?

Merci d'avance.

Cordialement.

guilstunt Il y a 4 mois Répondre

Moi non plus ca ne fonctionne pas

voici le code

var datepickers = $('.datepicker').datepicker({
minDate : 0,
dateFormat : 'dd/mm/yy',
onSelect: function( date ) {
var option = this.id == 'aller' ? 'minDate' : 'maxDate';
}

});

J'ai comme erreur "Les valeur minDate et maxDate ne sont pas les bonnes"

Grafikart Il y a 4 mois - Répondre

Oui normal là tu n'a pas répondu à la question, il faut changer minDate et maxDate en fonction de ce qui est rempli. Là tu ne fais que déclarer une variable option

musicalitymaker Il y a 4 mois Répondre

Très bon tutoriel, mais par contre j'essaie de réussir les 5 questions, mais la dernière ne fonctionne pas (onSelect Event
)

Grafikart Il y a 4 mois - Répondre

Tu as mis quoi comme réponse ?

skajia Il y a 4 mois Répondre

Bonjour,
Vraiment excellente cette idée! sur le net on trouve certains sites qui reprennent ce type de travaux pratiques. Mais toi, tu rajoutes la vidéo et le Français. Youpi!!!
c'est exactement le genre de méthodologie qui me convient pour apprendre.
J'ai une question (même si je me doute de l'impossibilité): as tu l'intention de porter ce système d'apprentissage sur tes anciens cours? En particulier sur PHP ;-)

Bravo et bonne continuation.

PS: Dans le TP, le bouton "envoyer" n'a pas l'air de fonctionner?! à moins que je n'ai sauté une étape?...

Gregou Il y a 4 mois Répondre

Encore un super tutoriel de plus.

Ne change rien, j'apprends pas mal de choses avec tes tutoriels!

bahamut Il y a 4 mois Répondre

Bonjour, Très bon tuto

Mais si comme moi vous voulez aussi le timepicker en fr rajouté ceci dans le fichier jquery.ui.js

<pre>/* Czech translation for the jQuery Timepicker Addon */
/* Written by Thomas Lété */
$.timepicker.regional['fr'] = {
timeOnlyTitle: 'Choisir une heure',
timeText: 'Heure',
hourText: 'Heures',
minuteText: 'Minutes',
secondText: 'Secondes',
timezoneText: 'Fuseau horaire',
currentText: 'Maintenant',
closeText: 'Terminé',
timeFormat: 'hh:mm',
ampm: false
};
$.timepicker.setDefaults($.timepicker.regional['fr']);
</pre>

robin850 Il y a 4 mois Répondre

Le système d'exercices est super bien foutu ! On se concentre tout le long de la vidéo et on a pas besoin de créer un dossier avec les librairies dedans et tout, ça donne vachement plus envie de tenter et on teste directement ce qu'on vient de voir ! Super idée.

SummerlySubset Il y a 4 mois Répondre

Merci pour ce tuto, je me mets aux exercices

force_rouge Il y a 4 mois Répondre

bravo très sympa ton tuto sur les datepickers, toujours pointu comme d'hab et bien rythmé par un système d'apprentissage innovant! On sent que tu as bien soigné la chose;)
Cependant, par rapport à un tuto écrit ( genre les qcm sur le sdz ) ces étapes de validation de connaissances obligent à rester bien concentré tout le long de la vidéo. En tous cas chapeau!

akaseb Il y a 4 mois Répondre

Merci pour tout

keskispas Il y a 4 mois Répondre

Excellent ce tuto pour comprendre le plugin.
En plus, tu montres comment coder plus vite et mieux en utilisant la puissance du langage ou de jQuery.

Et le module d'exercice en live m'a laissé sur le Q !

Bravo et merci !

igors Il y a 4 mois Répondre

J'aime bien les exercices :D

Charly Il y a 4 mois Répondre

L'exercice pratique ne marche pas sous Chrome... en tout cas chez moi avec la dernière version.

Mugi Il y a 4 mois Répondre

Super système de tuto. Bien joué !

romain25 Il y a 4 mois Répondre

Les valeurs minDate et maxDate ne sont pas les bonnes

MathRobin Il y a 4 mois Répondre

Sympa comme tuto et très intéressant. J'ai appris quelques petits trucs bien pratiques !
Par contre "date d'aller", pas "date d'allée"
Précision technique : IE supporte console.log depuis IE8 (http://msdn.microsoft.com/en-us/library/dd565625(v=vs.85).aspx #consolelogging)

Pingu Il y a 4 mois Répondre

Le nouveau système d'exercices (et le tuto évidemment) sont au top !

Il ne me reste plus qu'à trouver un usage pour un datepicker :p

syndrael Il y a 4 mois Répondre

Même si je pratique le datePicker depuis son apparition il y a un ptit bout de temps, ce tuto peut aider beaucoup de monde et distille aussi qqs bonnes notions de développement.. L'emploi du Console, le 'var datapickers =' qui optimise un peu..
Seul point négatif (je chipote) ALLER !! et pas ALLEE..
S.

guss Il y a 4 mois Répondre

Super tuto, trés didactique.
Une voix agéable à écouter qui nous amène du soleil.

Merci.

Flohw Il y a 4 mois Répondre

j'ai trouvé une solution plus simple que la tienne et qui marche aussi (d'apres ton message vert et d'apres me test sur les datepicker !
voici ce que je met dans la fonction de l'evenement onSelect :
$('#retour').datepicker('option', 'minDate', $('#aller').val());
$('#aller').datepicker('option', 'maxDate', $('#retour').val());

carrément simple, apres c'est vrai que ca execute les deux mais c'est pas comme si ca prenait beaucoup de temps et exécuté coté serveur

Grafikart Il y a 4 mois

Oui mais ce n'est pas la vrai réponse, vu que ça ne marche pas si on change les dates

Flohw Il y a 4 mois

comment ca ? tu veux dire que si on les change manuellement, sans passer par le plugin, ca marche pas, c'est ca ?

Grafikart Il y a 4 mois - Répondre

J'ai rien dit je n'avais pas vu que tu l'avais mis dans le select, la réponse est bonne aussi.

sgalou Il y a 4 mois Répondre

Bonjour

Petit bug de sélection dans le textarea des exercices

Sous Opera, la sélection est décalée vers la gauche de trois caracteres!

Exemple:
Sur 12345678
Si je met mon curseur (clic souris) entre le 7 et le 8 et que je supprime, c'est le 4 qui ce supprime!!! c'est pas évident de coder!

Sinon, bravo, je trouve l'idée géniale.

hachbe Il y a 4 mois - Répondre

Je confirme les dires de sgalou, sous Opera il y a un petit décalage de 2, 3 caractères qui n'aide pas visuellement. A part ce détail, c'est excellent comme système et très pédagogique. Merci pour ce boulot

Arbiter0x Il y a 4 mois Répondre

Enorme le système :D

Et pareil pour le tuto, encore merci :D

talandria Il y a 4 mois Répondre

super sympa , pour apprendre , ce qui est bien c'est que l'on ne soit pas obligé de faire l'exercice de suite , moi j'aime bien suivre le tuto en entier 1 fois avant de le refaire ... good idea !!!

nano-tiger Il y a 4 mois Répondre

Super ton tuto ! toujours des tutos de qualité !
En revanche, je renommerais "Date d'aller" par "Date de départ" dans ta démo.
Mais, ce n'est pas important. Ce qui compte, c'est le fond et pas forcement la forme.
Et meilleurs voeux !

cbtraize Il y a 4 mois Répondre

Franchement c'est top cette idée d'exo !bravo

siriu Il y a 4 mois Répondre

Et j'ai passé 2h pour le faire fonctionne cette semaine... si j'avais su j'aurai attendu :lol:

Jasse29 Il y a 4 mois Répondre

Félicitation pour cette nouvelle fonctionnalité, c'est vraiment très bien (je n'ai pas rencontré de soucis).
Par contre, il me semble que date d'allée s'écrit plutôt date d'aller...

Ithor Il y a 4 mois Répondre

Pile le tuto qui me fallait :D
Merci merci bcp !
tu gères

Rtransat Il y a 4 mois Répondre

Merci pour le tuto et le système d'exo :p, par contre en dessous de la vidéo je ne vois que des liens je ne vois pas la "time line" et les ronds. C'est normal ?

Tony T. Il y a 4 mois - Répondre

Même soucis je suis sous Chrome sur Linux(Ubuntu), je ne vois également que les traits verts .

pierrot13 Il y a 4 mois Répondre

Encore un tuto super intéressant.
Même question que Fantoche : Prévois tu d'autre tuto sur cette librairie UI ??

Merci !!

Grafikart Il y a 4 mois

Oui propose un sujet (un élément de la librairie) qui t'intérèsse http://www.grafikart.fr/forum/proposition-de-tutoriels-57

siriu Il y a 4 mois - Répondre

Est ce qu'on peut faire un menu contextuel clic droit avec jQuery UI ?

mezigh Il y a 4 mois Répondre

salut super tuto as usual

mais quand même le honte pour "allée" ;(
à plus Oliv

neoris Il y a 4 mois Répondre

sympa cet ajout ! par contre j'ai eu des problèmes de validation des exercices. J'ai entré du codes erronés, donc il m'affiche l'erreur (normal !) seulement après avoir corrigé l'erreur, il m'affichais toujours une erreur. J'ai rechargé la page, et là tout rentre dans l'ordre. Je sais pas si ça vient de chez moi ou pas

Mikachu Il y a 4 mois Répondre

Super sympa l'interactivité....

Penses-tu qu'a un moment perdu tu l'intégreras sur d'autres tutos précédemment fait? (je penses plus particulièrement aux tuto site de A a Z MVC, et celui de cakePHP :p

fantoche Il y a 4 mois Répondre

Prévois tu d'autre tuto sur cette librairie UI ??

maxfr Il y a 4 mois Répondre

c'est également mon cas, la vidéo est saccadée (sur chrome), impossible à lire.
De plus sur Firefox (v9) impossible de lire la vidéo ou même de faire les exercices.

Grafikart Il y a 4 mois

Tout est réparé, essaie de réactualiser la page

maxfr Il y a 4 mois - Répondre

en effet, c'est réparé
Merci bien.