Calendrier et date [Résolu]

djbabou 155 Messages postés dimanche 21 octobre 2007Date d'inscription 23 novembre 2015 Dernière intervention - 17 janv. 2011 à 22:01 - Dernière réponse : djbabou 155 Messages postés dimanche 21 octobre 2007Date d'inscription 23 novembre 2015 Dernière intervention
- 21 janv. 2011 à 13:56
Bonjour a tous,

j'ai posté sur le forum php un problème que j'espère vous pourrez m'aider à résoudre. Le voici:

J'ai deux champs date dans un formulaire ( un champs de début, et un champs de fin)
J'aimerais que quand je choisis mon champs de date de fin, une vérification se fait de façon à ce que je puisse toujours avoir un jour d'ecart entre les deux dates.

Si ma date de début est la date d'aujourd'hui, automatiquement la date de fin sera celle de demain.

et vice versa, si on change la date de fin en la mettant à aujourd'hui, ben la date de débutprend la valeur de la date de hier ?

Je pense cependant m'y prendre ainsi :

-> juste recupérer en javascript la valeur de mon 1er champs date
-> y ajouter un jour, ou y retirer un jour
-> puis l'affecter à mon deuxième champs date

Auriez-vous des pistes à me donner ? Comment faire pour récupérer un champs html en javascript ? Comment affecter une valeur à un champs html en javascript ?*

Merci d'avance pour vos réponses...
Afficher la suite 

Votre réponse

9 réponses

Meilleure réponse
squonk14 16 Messages postés mardi 20 avril 2010Date d'inscription 20 juin 2012 Dernière intervention - 19 janv. 2011 à 10:44
3
Merci
Bonjour,

il y a plusieurs méthodes pour récupérer un champ html dans javascript. Personnellement j'aime assez définir un identifiant (id) sur le champ et le retrouver dans le code javascript grâce à cet identifiant.
Par exemple, si tu as un champ html comme ça :

tu peux le récupérer dans ton javascript comme ça :
var monchamp=document.getElementById("identifiantuniquedemonchamp")
Une fois le champ récupéré dans javascript tu peux "jouer" avec tous ces paramètres.

Ceci étant dit voici un exemple plus concret concernant ton problème.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1250">
<title>Untitled Document</title>
<script language="JavaScript" type="text/javascript">
function datetime(obj_dateParam){
/** FONCTION DE CONVERSION EN DATETIME (js) **/
date_c=obj_dateParam.value;
// Création d'un tableau contenant les informations sur la date saisie
var dateTab_c=date_c.split("/");


// Vérification de la validité de la date saisie
// Je n'ai mis qu'un test sur la structure de la valeur saisie
// Pour être valide la date doit être au format DD/MM/YYYY
// A compléter en fonction des besoins
if (dateTab_c.length!=3){
alert("La date saisie n'est pas valide");
}
else {
var dateParam_c=new Date(dateTab_c[2],dateTab_c[1]-1,dateTab_c[0],12,0,0,0);
// On remodifie la date saisie pour être sur qu'elle est valide
// par exemple : si on saisie 31/02/2011 cela change la date au 03/03/2011
obj_dateParam.value=ddmmyy10(dateParam_c);
if (obj_dateParam.name=="date1"){
// si on est sur date1, on veut modifier date2 : on ajoute 24 heures pour passer au jour suivant
var dateAutre_c=new Date(dateTab_c[2],dateTab_c[1]-1,dateTab_c[0],24,0,0,0);
var obj_dateAutre=document.getElementById("date2");
}
else if (obj_dateParam.name=="date2"){
// si on est sur date2, on veut modifier date1 : on enleve 12 heures pour passer au jour précédent
var dateAutre_c=new Date(dateTab_c[2],dateTab_c[1]-1,dateTab_c[0],-12,0,0,0);
var obj_dateAutre=document.getElementById("date1");
}
obj_dateAutre.value=ddmmyy10(dateAutre_c);
}
}
function ddmmyy10(d_brute){
// Conversion en DD/MM/YYYY
var d_jour=d_brute.getDate();
var d_mois=d_brute.getMonth();
d_mois++;
var d_jourf="";
if (d_jour<10 ) d_jourf="0"+d_jour;
else d_jourf=""+d_jour;
var d_moisf="";
if (d_mois<10 ) d_moisf="0"+d_mois;
else d_moisf=""+d_mois;
var d_annee=d_brute.getFullYear();
d_formate=d_jourf+"/"+d_moisf+"/"+d_annee;
return d_formate;
}

</script>
</head>




Date 1 : 

Date 2 : 



</html>


Les dates c'est pas le truc le plus évident à manipuler en javascript.

Bon courage.

-------------------------------------------------------------
Il ne suffit pas d'être inutile. Encore faut-il être odieux.

Merci squonk14 3

Avec quelques mots c'est encore mieux Ajouter un commentaire

Codes Sources a aidé 102 internautes ce mois-ci

Commenter la réponse de squonk14
Meilleure réponse
squonk14 16 Messages postés mardi 20 avril 2010Date d'inscription 20 juin 2012 Dernière intervention - 20 janv. 2011 à 16:13
3
Merci
D'accord, je suis allez sur le site et je comprends mieux pourquoi tu galères. C'est une vrai usine à gaz ce truc.
Je ne pense pas que le fait d'appeler une fonction sur un évènement de ton input soit une bonne idée.

Il faut identifier la fonction qui écrit la date dans l'input. D'après ce que j'ai vu tu dois avoir un bout de code quelque part qui ressemble à ça.
    g_calendarObject.setOnSelectedDelegate(function(){
        var obj = g_calendarObject.getSelectedDay();
        /**.....**/
    });


Il faut rajouter l'appel à datetime() dans cette fonction (si c'est bien la bonne mais je n'en suis pas sûr).
Le problème c'est que le code que je t'ai donné n'est pas compatible avec le calendrier que tu utilises.
Il faut retrouver l'identifiant de l'input pour pouvoir le passer à la variable.
Essaye ça :
var toto=g_calendatObject.target;
/** Tu peux mettre un alert pour tester la valeur de toto **/
alert(toto)
var objtoto=document.getElementById(toto);
datetime(objtoto);

Ensuite dans la fonction datetime tu remplaces "date1" par "inputField" et "date2" par "inputField2"
Attention aussi au format de la date. Le calendrier retourne apparemment une date j/m/yyyy où le jour et le mois peuvent être sur 1 seul caractère. Donc ma fonction ddmmyy10 peut poser un problème. Il faut peut-être virer les tests si d_jour<10 et si d_mois<10.

Ouf !! C'est pas gagné.

Si vraiment tu ne t'en sors pas il faut peut-être changer de calendrier, et en trouver un moins compliqué qui suffirait à tes besoins (pourquoi pas sur ce site) ...
Je te posterai bien le mien mais il est pas compatible Firefox. Et le temps que je corrige, ça peut prendre un moment. Tiens ça me donne une idée ...

-------------------------------------------------------------
Il ne suffit pas d'être inutile. Encore faut-il être odieux.

Merci squonk14 3

Avec quelques mots c'est encore mieux Ajouter un commentaire

Codes Sources a aidé 102 internautes ce mois-ci

Commenter la réponse de squonk14
djbabou 155 Messages postés dimanche 21 octobre 2007Date d'inscription 23 novembre 2015 Dernière intervention - 19 janv. 2011 à 14:18
0
Merci
Merci merci 1000 fois...

Je vais l'adapter à mon script pour voir si j'arrive à un résultat ...

Par contre, je ne sais pas si le onchange fonctionne sur les input de type texte.

Mon input je le remplis grace à un composant javascript : le fameux date-picker. On le trouve a cette adresse : http://javascriptcalendar.org/javascript-date-picker.php.

Du coup, quand je teste un evenement sur mon champs, peut importe l'evenement, ben rien ne se passe, la fonction ne s'exécute pas ...

Je ne sais pas pourquoi, ni si c'est normal mais bon je pense d'abord ke je doit résoudre ce souci, si la encor tu peux m'aider ...

en tout cas merci, j'ai bien avancé grace à toi !
Commenter la réponse de djbabou
squonk14 16 Messages postés mardi 20 avril 2010Date d'inscription 20 juin 2012 Dernière intervention - 19 janv. 2011 à 17:48
0
Merci
J'utilise moi aussi un datePicker amélioré par mes soins.
Tu peux bien sur mettre un onChange sur un input text. Remplace l'appel à ta fonction par ça :
onChange="alert('coucou')"
Si ça marche, c'est que ton onChange fonctionne bien, le problème est ailleurs, surement dans la fonction appelée.

Post ton code et on verra si on peut débrouiller ça.

-------------------------------------------------------------
Il ne suffit pas d'être inutile. Encore faut-il être odieux.
Commenter la réponse de squonk14
djbabou 155 Messages postés dimanche 21 octobre 2007Date d'inscription 23 novembre 2015 Dernière intervention - 19 janv. 2011 à 21:34
0
Merci
Salut...

En testant le petit bout de code que tu m'a donnée, je n'ai toujours rien qui s'affiche à l'écran en sélectionnant ma date dans mon input.
Voici sa déclaration :


La fonction javascript qui ouvre le calendrier est la suivante :
<script type="text/javascript">
window.onload = function(){
new JsDatePick({
useMode:2,
target:"inputField",
dateFormat:"%d-%M-%Y"
});};
</script>

Mais sinon, toujours rien ...

C'est sympa de me donner un coup de main merci ...
Commenter la réponse de djbabou
squonk14 16 Messages postés mardi 20 avril 2010Date d'inscription 20 juin 2012 Dernière intervention - 20 janv. 2011 à 09:34
0
Merci
Je risque d'avoir un peu de mal pour t'aider à débugger ton javascript. C'est de l'orienté objet et je ne connais pas bien cette façon de coder.
Par contre c'est normal si ton input est bloqué puisque l'attribut readonly est à "true".
A noter que c'est surement fait exprès. Ca oblige à utiliser le calendrier pour sélectionner une date. De cette façon, impossible de saisir n'importe quoi.
Du coup le code que je t'ai donné et qui décale l'autre champ date à + ou - 1 jour ne doit pas être associé au onChange du champ. Tu dois avoir une fonction qui se déclenche quand tu as choisi une date dans le calendrier. Un truc du genre selectDate, qui met à jour ton champ date associé. C'est à la fin de cette fonction que tu dois ajouter l'appel à la fonction datetime().
Enfin un dernier truc : tu as 2 champs dates. Les 2 ont un id="inputField" ? Ca fonctionne ça ? Pas sûr !


-------------------------------------------------------------
Il ne suffit pas d'être inutile. Encore faut-il être odieux.
Commenter la réponse de squonk14
djbabou 155 Messages postés dimanche 21 octobre 2007Date d'inscription 23 novembre 2015 Dernière intervention - 20 janv. 2011 à 14:11
0
Merci
Merci

En fait, les deux champs ne porte pas le meme nom. L'un a comme id 'inputField', tandis que l'autre a pour id 'inputField2'.

Effectivement, le readonly permet à ce que la date soit choisie dans le calendrier, et non pas saisie directement.
Remarque, avec le readonly à false, la fonction ne s'exécute toujours pas.

Sinon, j'ai essayé l'évènement onblur :


Sa semble exécuter une fois qu'n choisi la date ...
J'y est donc appliqué la fonction datetime(this) et la, rien. Mais bon c'est parce que je n'ai pas encore adapté le script.
Je fais les modifs, et te tiens o courant. Merci encore..
Commenter la réponse de djbabou
djbabou 155 Messages postés dimanche 21 octobre 2007Date d'inscription 23 novembre 2015 Dernière intervention - 20 janv. 2011 à 14:17
0
Merci
Ah erreur !!! Surtout ne pas utiliser le 'onblur', car in ne retourne pas du tout la valeur du champs mais un champs vide.

J'ai comme valeur pour mes champs 'indefined'.

Et oui, retour a la case départ.
Commenter la réponse de djbabou
djbabou 155 Messages postés dimanche 21 octobre 2007Date d'inscription 23 novembre 2015 Dernière intervention - 21 janv. 2011 à 13:56
0
Merci
Un grand merci a toi pour ton aide...

Après, en ce qui concerne le calendrier, ben je ferai au plus simple. Je vais en chercher un autre beaucoup plus accessible et simple.

Sinon, si je ne trouve aucun répondant à mes besoins, je vais tester de résoudre le problème comme un grand avec le fameux datepicker.

Merci encore ...
Commenter la réponse de djbabou

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.

Le fait d'être membre vous permet d'avoir des options supplémentaires.