begin process at 2012 05 29 01:18:01
  Trouver un code source :
 
dans
 
[ Dernières recherches ]
Accueil > Forum > 

Javascript / DHTML / Ajax

 > 

Framework

 > 

Ajax

 > 

calendrier et date

Derniers messages déposésPoser une question dans le forum ou lancer une discussion

calendrier et date

lundi 17 janvier 2011 à 22:01:40 | calendrier et date

djbabou
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...
mercredi 19 janvier 2011 à 10:44:02 | Re : calendrier et date

squonk14
Réponse acceptée !

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 :
<input type="text" id="identifiantuniquedemonchamp">
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.

Code HTML :
<!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>

<body>
<div>
Date 1 : <input type="text" name="date1" id="date1" onChange="datetime(this)"><br>
Date 2 : <input type="text" name="date2" id="date2" onChange="datetime(this)">
</div>
</body>
</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.
mercredi 19 janvier 2011 à 14:18:41 | Re : calendrier et date

djbabou
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 !
mercredi 19 janvier 2011 à 17:48:46 | Re : calendrier et date

squonk14

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.
mercredi 19 janvier 2011 à 21:34:20 | Re : calendrier et date

djbabou
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 :
<input type="text" size="12" id="inputField" name="tpc[dated]" readonly="true" onChange="alert('coucou')" />

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 ...
jeudi 20 janvier 2011 à 09:34:08 | Re : calendrier et date

squonk14
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.
jeudi 20 janvier 2011 à 14:11:00 | Re : calendrier et date

djbabou
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 :
<input type="text" size="12" id="inputField" name="tpc[dated]" readonly="true" onblur="alert('test')" />

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..
jeudi 20 janvier 2011 à 14:17:51 | Re : calendrier et date

djbabou
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.
jeudi 20 janvier 2011 à 16:13:06 | Re : calendrier et date

squonk14
Réponse acceptée !
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.
Code Javascript :
    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 :
Code Javascript :
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.
vendredi 21 janvier 2011 à 13:56:35 | Re : calendrier et date

djbabou
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 ...




Cette discussion est classée dans : fin, date, valeur, champs, jour

Répondre à ce message

Sujets en rapport avec ce message

mise à jour champs date dynamique [ par laubro ] Bonjourvoilà, j'ai 2 champs date "Y-m-d" qui se remplissent via un calendar, le but étant d'avoir une date de début et de fin.ce que j'aimerais pouvoi Fonction recherche date [ par Eyeron ] Bonjour, Je souhaite rechercher dans ma bdd tous les enregistrements datant de x jours. Je m'explique: j'ai une base de données avec des valeurs qui formulaire onclick + mise a jour valeur php? [ par Dav_c ] Bonjour, j'utilise les sessions en php et j'ai ajouter un bout de code pour deconnecter l'utilisateur après x minute. Donc j'aimerais pouvoir remettr compte a rebours [ par valkerio ] bonjour voila j'ai trouve un petit script sur ce site mais je voudrais bien un peu le modifier mais je ne connais pas grand chose en javascript. donc Problème affichage date mise à jour [ par rgdu86 ] Bonsoir à tous, J'ai un petit soucis, sinon je ne viendrais pas vous poser la question. J'ai un script Javascript sur une de mes pages, sui me perme Help: Date en javascript qui retourne une mauvaise date [ par dgfhierf ] Bonjour,Je voudrais ajouter 30 jours à une date et je ne pense pas me tromper en faisant : myDate = new Date(annee,mois,jour);  New_date = myDate; New mettre à jour une page [ par alacowboy ] slt à ts!je veux à chaque fois récupérer la valeur d'une zone texte dans une textarea (ou dans un div) sans que l'encienne valeur s'éfface <img src="/ calcul de date debut a partir de periode et date fin [ par hejerhejer ] slt,je suis débutante en java script,mon problème c'est que j'ai une date fin de facture et un nombre de mois et je dois trouver la date début en java Input et onchange [ par djbabou ] Bonjour, Petite question : J'ai un formulaire dans lequel je déclare un champs texte de cette manière: Comme vous l'aurez remarqué, j'aurai besoi comparer avec date du jour et afficher article en fonction [ par cdoliv ] Bonjour, Je suis en javascript. Comment fait-on pour récupérer la date du jour, la comparer à la date d'un article que j'ai en BDD et dire si la dat


Nos sponsors


Sondage...

Comparez les prix


Archos 7 home tablet - 2 Go
Entre 149€ et 159€

Visiter le guide achat

CalendriCode

Mai 2012
LMMJVSD
 123456
78910111213
14151617181920
21222324252627
28293031   

Consulter la suite du CalendriCode

A découvrir
 
Développement réalisé par Nicolas SOREL (Nix) avec l'aide de : Cyril DURAND et Emmanuel (EBArtSoft), Merci à Vincent pour ses précieux conseils.
CodeS-SourceS.com© Toute reproduction même partielle est interdite sauf accord écrit du Webmaster
CodeS-SourceS.com© est une marque déposée tous droits réservés

Google Coop CodeS-SourceS Google Coop CodeS-SourceS
Temps d'éxécution de la page : 0,172 sec (4)

Nous contacter | Annoncer sur CodeS-SourceS | Mentions légales
Outils Convertisseur VB/C# Snippets et scripts Outils en ligne La ToolBox
Communauté Programmation Photographie Technologie Newsgroups Emploi Forum Blogs
Guide d'achat Téléphonie mobile Image et son Informatique Bureautique Jeux vidéo
Logiciels Internet & Réseau Développement Market Android Jeux & Loisirs Graphisme Multimédia Sécurité Pilotes
Loisirs Cartes virtuelles Vidéos droles Jeux en ligne Géoguide AndroLib (Android Market)