Signaler

Utiliser 2 boutons différents [Résolu]

Posez votre question philip51 22Messages postés vendredi 6 janvier 2017Date d'inscription 9 février 2017 Dernière intervention - Dernière réponse le 9 févr. 2017 à 09:15 par philip51
Bonjour,
J'ai 2 boutons pour afficher un calendrier.
le premier bouton doit me servir à écrire une date dans un input text et le 2è bouton à écrire dans un autre input text
les 2 boutons et les 2 input

Date de début : <INPUT type="text" name="debut" value="" size=9em>
<input type="button" name="voir_cal" value="cal" class='boutonCal' id="buttonB" onclick="boutonclique('buttonB'),afficher_cal(),voir('entete')";><br /><br />
Date de fin : <INPUT type="text" name="fin" value=""size=9em style="margin-left:1.5em;">
<input type="button" name="voir_cal" value="cal" class='boutonCal' id="buttonE" onclick="afficher_cal(),voir('entete')";><br />

la fonction pour créer le calendrier

function afficher_cal(){
var existingTable = document.querySelector('table');
if (existingTable) existingTable.parentElement.removeChild(existingTable);

var ladate = new Date();
var ladatedujour = ladate.getDate();// la date du jour
var lemois = ladate.getMonth() + 1;
var i, c, j;
var row, td, th, cell;
var table = document.createElement('table');
table.id = 'tableCal';
//
// création des têtes de colonnes
//
var thead = table.createTHead();
row = thead.insertRow();
var nomsJours = [ 'Lu', 'Ma', 'Me', 'Je', 'Ve', 'Sa', 'Di' ];
for (i = 0; i < 7; i++) {
th = document.createElement('th'); // malheureusement, il n’y a pas de méthode insert pour les th(remarque de Watilin)
th.textContent = nomsJours[i];
th.scope = 'col'; // optionnel, pour l’accessibilité (remarque de Watilin)
row.appendChild(th);
}
//
// création du contenu
....
var table = document.getElementById("tableCal");
if (table != null) {
for (var i = 0; i < table.rows.length; i++) {
for (var j = 0; j < table.rows[i].cells.length; j++)
table.rows[i].cells[j].onclick = function () {
tableText(this);
};
}
}
}

la fonction du clic sur les boutons

function boutonclique(id){
var idbouton = id;
// alert(idbouton);
}

la fonction pour écrire dans l'input text

function tableText(tableCell) {
var lejourD = tableCell.textContent;
var lemoisD = parseInt(document.gen.mois_encours.value);
var lanneeD = parseInt(document.gen.annee.value);
var ladatedebut;
if (lejourD < 10) lejourD = '0'+lejourD;
if (lemoisD < 10) lemoisD = '0'+lemoisD;
ladatedebut = lejourD +'/'+lemoisD+'/'+lanneeD;
document.gen.debut.value = ladatedebut;
}

la fonction ci dessus écrit le résultat par défaut dans l'input text debut.

je ne sais pas comment passer l'id du bouton à la fonction tabletext pour écrire dans l'un des 2 input en fonction du bouton cliqué.

merci d'avance


Utile
+0
plus moins
Bonjour,

Tes fonctions appelées depuis l'HTML te permettent d'y introduire des paramètres.
Lorsque tu appelles ta fonction "afficher_cal()", tu peux lui ajouter l'objet en question
afficher_cal(this)
puis dans la fonction récupérer l'ID de l'objet :
function afficher_cal(obj) {
  // code
  var inputId = obj.id;
}
philip51 22Messages postés vendredi 6 janvier 2017Date d'inscription 9 février 2017 Dernière intervention - 31 janv. 2017 à 17:43
J'ai transféré mes 3 fichiers.
Donc en résumé ce que j'aimerai :
1/ écrire dans un input text en fonction du bouton cliqué
2/ que le calendrier se ferme à chaque clic sur une cellule
3/ sur 2 pages du site où je mettrai le calendrier j'ai 1 ou 2 tables en dur. Actuellement la chargement du calendrier supprime la table en dur.

Merci d'avance
Répondre
Nexii 336Messages postés jeudi 13 mars 2014Date d'inscription 14 mars 2017 Dernière intervention - 1 févr. 2017 à 10:48
Tu souhaite faire apparaître et disparaître le calendrier au clic de la cellule ?
Donc ton bouton "Cal" disparaît ?
Il serait plus facile et logique d'ouvrir le calendrier lors du focus sur la cellule puis de fermer celui-ci lors d'un clic ailleurs..Qu'en penses-tu ?
Répondre
Nexii 336Messages postés jeudi 13 mars 2014Date d'inscription 14 mars 2017 Dernière intervention - 1 févr. 2017 à 09:13
Vous auriez du me fournir l'URL générée afin que je télécharge les fichiers... je n'ai pas l'adresse pour les télécharger. Celle-ci vous a été communiqué après l'upload de votre archive..
Répondre
philip51 22Messages postés vendredi 6 janvier 2017Date d'inscription 9 février 2017 Dernière intervention - 1 févr. 2017 à 09:20
Je pensais qu'il y avait une adresse unique. Je ne connaissais pas ce sustème.
Voici l'adresse
https://we.tl/bzznfBGqxO_
Répondre
Nexii 336Messages postés jeudi 13 mars 2014Date d'inscription 14 mars 2017 Dernière intervention - 1 févr. 2017 à 09:23
Je l'ai merci, je regarde.
Répondre
Donnez votre avis
Utile
+0
plus moins
Voila tu peux trouver ton fichier ici

J'ai mis des commentaires et spécifier ou est le nouveau code (sauf pour l'HTML).
Tu remarqueras que j'ai utilisé jQuery uniquement pour les nouvelles fonctions, je n'ai pas voulu détruire ton code et que tu ne comprennes plus rien.
Attention : la librairie jQuery est hebergé sur internet, pour que ton site fonctionne tu devras avoir accès à internet. Sinon tu télécharge le fichier.js, tu en fais un fichier dans ton dossier de travail et tu fais une balise qui pointe vers celui-ci. Bien charger ce script avant ton script perso :).
Nexii 336Messages postés jeudi 13 mars 2014Date d'inscription 14 mars 2017 Dernière intervention - 2 févr. 2017 à 13:35
Tu peux essayer pour le DIV qui englobe les calendrier en effet.

En ce qui concerne ton autre problème je ne comprend pas trop ce qui ne va pas..
Répondre
philip51 22Messages postés vendredi 6 janvier 2017Date d'inscription 9 février 2017 Dernière intervention - 2 févr. 2017 à 15:53
Sur la 1ère ligne de code ci-dessous j'ai mis une simple table pour tester. Quand je clique sur un input la table s'efface.Sur le site la table que j'ai est complétée au chargement de la page.
Pour l'autre problème, c'est à dire le bouton pour enregistrer les dates dans la base de donnée je l'ai placé après la balise "calendrier" et malgré ça quand le calendrier s'affiche le bouton est entre "l'entête" et le calendrier.

<table><tr><td>toto</td><td>tata</td></tr></table><br />
<div id="calendrier">
<FORM NAME="gen">
<p class="selection">
<span style="text-align:center;">Sélection des dates de disponibilités</span><br /><br />
Date de début : <INPUT class="choseDate tgt" id="startDate" type="text" name="debut" value="" size=9em/> <br/><br/>
Date de fin : <INPUT class="choseDate tgt" id="endDate" type="text" name="fin" value="" size=9em style="margin-left:1.5em;">
</p>
....
<!---date fin pour bdd---> <INPUT type="hidden" name="date_fin" value="">
<!--- en tête du tableau contenant "1 bouton < cliquable", le mois et l'année, "1 bouton > cliquable" --->
<div id="entete" class="tgt">
<input type='button' name='bouton' value='<' onclick='previous(gen),Njours(gen)'; class='boutonCal'>
<input type='text' name='an' class='inputladate' size=16em value='<?php echo $mois_fr[$mois]; echo " $anne";?>'>
<input type='button' name='bouton' value='>' onclick='next(gen),Njours(gen)'; class='boutonCal'>
</div>
</FORM>
</div>
<input type = "button" name = "Enreg" value = "Enregistrer">
</body>

Et une autre chose que je viens de voir : si je clique sur les cellules du début du calendrier ou de la fin (les cellules du mois d'avant ou du mois d'après ) je récupère la valeur dans les input. sauf que par exemple si je clique sur la 1ere cellule de février je récupère "30/02/2017". j'ai mais ça dans le css des cellules vides mais ça ne fait rien

#tableCal .couleurvide { background-color : #E0FFFF;color:#808080;disabled:disabled;}

J'espère que mes explications sont plus claires.
Je cherche en même temps
Répondre
Nexii 336Messages postés jeudi 13 mars 2014Date d'inscription 14 mars 2017 Dernière intervention - 2 févr. 2017 à 17:03
Tu as besoin d'un calendrier ou te lance-tu dans ce développement pour apprendre ?
Si c'est le premier cas, il existe des solutions qui entrerait sur 10 lignes de code. Dans le cas de la deuxième :

1) Pour la table qui s'efface : en effet dans ton code javascript, ta fonction "afficher_cal" vérifie au début s'il existe ou non un element HTML de tag "table", si c'est le cas, il le supprime :
var existingTable = document.querySelector('table');
  if (existingTable) existingTable.parentElement.removeChild(existingTable);

Je te propose ici de ne pas utiliser querySelector mais plutôt "getElementById" avec l'ID donné plus bas à ta table (à savoir tableCal).


2) Concernant le bouton enregistrer qui se met au milieu :
En fait tu créer ton calendrier dans le DOM dans ta fonction "afficher_cal" :
document.body.appendChild(table);

donc il n'est pas créer dans "calendrier" car tu l'ajoute à la suite de "body" donc avant la balise fermante </body>.
Tu dois modifier cette ligne pour le mettre dans le DIV calendrier :
document.getElementById("calendrier").appendChild(table);

Tu remarqueras alors que ton calendrier est décalé. Tu devras supprimer les lignes suivantes de ton css :
#tableCal {
    border-width: 1px;
    border-style: outset;
    width: 15.1em;
    /* margin-left: 14.8em; A SUPPRIMER */
    border-collapse: collapse;
    font-family: verdana;
    font-size: 0.83em;
    text-align: center;
}

#entete {
    width: 12.57em;
    /* margin-left: 2.3em; A SUPPRIMER */
    display: none;
}



3) Pour le problème des cellules en début de mois qui correspondent au mois précédent : normal, ton javascript prend le "mois_en_cours", il faut donc modifier ton algorithme pour soit ne pas afficher les valeurs du mois précédent/suivant, soit lui dire que ces valeurs appartiennent au moins précédent/suivant. Je te laisse adapter ton algo.
Répondre
philip51 22Messages postés vendredi 6 janvier 2017Date d'inscription 9 février 2017 Dernière intervention - 2 févr. 2017 à 17:25
Merci pour tes réponses.
Ce qui m'intéresse ce n'est pas de récupérer des choses toutes faites mais d'apprendre à les faire. Et pour les calendriers, puisqu'il est question de ça, j'en ai téléchargés des dizaines mais mois de 1 sur 2 fonctionnait.
Répondre
Nexii 336Messages postés jeudi 13 mars 2014Date d'inscription 14 mars 2017 Dernière intervention - 2 févr. 2017 à 17:31
Le plus simple :
Tu as le code complet https://jqueryui.com/datepicker/
Répondre
Donnez votre avis
Utile
+0
plus moins
bonjour,
Comme je l'ai dit ça ne m'intéresse pas de récupérer quelque chose de 'tout cuit' mais je veux faire par moi-même pour apprendre. Mais bien sûr j'ai quand même besoin d'aide!!!

donc dans mon projet la dernière chose qu'il me reste à faire c'est d'afficher un message quand la cellule cliquée ne correspond pas à une cellule où il y a les jours du mois encours.
code css

#tableCal .couleurvide { background-color : #E0FFFF;color:#808080;}

le code pour récupérer la cellule cliquée et savoir si elle correspond à un jour du mois en cours

$("#tableCal td").on('click', function () {
// On récupère la cellule cliquée
var clickedCell = $(this);
if ($(this).class === 'couleurvide'){
alert('Cette date ne correspond pas au mois');
}
else {
tableText(clickedCell);
}
});

'couleurvide' est la class attribuée aux cellules des jours qui ne sont pas les jours du mois.
Le if ne fonctionne pas.
Nexii 336Messages postés jeudi 13 mars 2014Date d'inscription 14 mars 2017 Dernière intervention - 7 févr. 2017 à 10:44
Bonjour,

Oui mais comme tu disais n'être pas arrivé à les faire fonctionné, je te donnais un moyen simple. C'est bien plus formateur de le créer toi-même tu as raison :).

Pour ton problème, si ton élément a plusieurs classe alors l'égalité ne pourra pas fonctionner, et je sais que ton élément possède plus d'une classe !

Tu dois récupérer l'ensemble des classes dans un tableau, puis le parcourir pour matcher celle que tu veux :
var clickedCellId = $(this).id; // Si tes cellules ont un ID, sinon trouve un autre moyen de matcher la ligne du dessous
var classList = document.getElementById(clickedCellId).className.split(/\s+/);
for (var i = 0; i < classList.length; i++) {
  if (classList[i] === 'couleurvide') {
      //do something
  }
}


Un petit tips pour tes class/id. En informatique on utilise l'écriture CamelCase. Cela signifie que pour une meilleure lisibilité dans les classes, variables, fonctions, on met des majuscules à tous les mots. Ta classe couleurvide devient alors couleurVide ou CouleurVide.

Bon courage.

Passe le sujet en Résolu lorsque tu auras terminé :).
Répondre
philip51 22Messages postés vendredi 6 janvier 2017Date d'inscription 9 février 2017 Dernière intervention - 9 févr. 2017 à 09:15
Merci pour toute l'aide
Répondre
Donnez votre avis

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.

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

Vous n'êtes pas encore membre ?

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