Sujet Précédent Sujet Suivant

Calendrier et date

Résolu
djbabou Messages postés 155 Date d'inscription dimanche 21 octobre 2007 Statut Membre Dernière intervention 23 novembre 2015 - 17 janv. 2011 à 22:01
djbabou Messages postés 155 Date d'inscription dimanche 21 octobre 2007 Statut Membre Dernière intervention 23 novembre 2015 - 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...

9 réponses

Réponse 1 / 9
squonk14 Messages postés 16 Date d'inscription mardi 20 avril 2010 Statut Membre Dernière intervention 20 juin 2012
19 janv. 2011 à 10:44
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.
3
Réponse 2 / 9
squonk14 Messages postés 16 Date d'inscription mardi 20 avril 2010 Statut Membre Dernière intervention 20 juin 2012
20 janv. 2011 à 16:13
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.
3
Réponse 3 / 9
djbabou Messages postés 155 Date d'inscription dimanche 21 octobre 2007 Statut Membre Dernière intervention 23 novembre 2015
19 janv. 2011 à 14:18
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 !
0
Réponse 4 / 9
squonk14 Messages postés 16 Date d'inscription mardi 20 avril 2010 Statut Membre Dernière intervention 20 juin 2012
19 janv. 2011 à 17:48
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.
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
Réponse 5 / 9
djbabou Messages postés 155 Date d'inscription dimanche 21 octobre 2007 Statut Membre Dernière intervention 23 novembre 2015
19 janv. 2011 à 21:34
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 ...
0
Réponse 6 / 9
squonk14 Messages postés 16 Date d'inscription mardi 20 avril 2010 Statut Membre Dernière intervention 20 juin 2012
20 janv. 2011 à 09:34
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.
0
Réponse 7 / 9
djbabou Messages postés 155 Date d'inscription dimanche 21 octobre 2007 Statut Membre Dernière intervention 23 novembre 2015
20 janv. 2011 à 14:11
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..
0
Réponse 8 / 9
djbabou Messages postés 155 Date d'inscription dimanche 21 octobre 2007 Statut Membre Dernière intervention 23 novembre 2015
20 janv. 2011 à 14:17
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.
0
Réponse 9 / 9
djbabou Messages postés 155 Date d'inscription dimanche 21 octobre 2007 Statut Membre Dernière intervention 23 novembre 2015
21 janv. 2011 à 13:56
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 ...
0

Discussions similaires

calcul d'un nombre de jours entre deux dates
cs_borisV -
tbbuim1 -

8 réponses
Redirection par header ou javascript?
Evangun -
Anthomicro -

8 réponses
comparaison date
taytam -
jordane45 -

4 réponses
Recuperer la date de demain
cs_hasen -
jeca -

4 réponses
Format de Date sous VB.NET
bernardbouree -
limpsilver -

20 réponses
Rejoignez-nous