2- Sélection d'un jour par le calendrier:
2.1-On test si on a déjà créer un tableau pour cette date
2.2-Si oui on le fait apparaitre
2.3-Si non on le créer:
faire pour les switch de tableau a partir de clone et qu'il soit relier a leur date du calendrier
onSelect:function(dateText) { if ($("#MonTableau"+_IDfromDateText).length > 0){ // Il existe..donc j'affiche le tableau }else{ // L'element n'existe pas.. je le crée ( clone).. // et je lui donne comme ID : "MonTableau"+_IDfromDateText }
<table id="myTbl_20140403" > ...
<!-- Sélection date : -> var TCA = $("#Table_Jour"+_IDfromDateText); // Tableau actuellement actif (avant le clonage) var _IDfromDateText = ""; // Date du jour au format "ddmmyyyy" var _DateJour = ""; // Date du jour au format "dd/mm/yyyy" $(function() { $('#popupDatepicker').datepick(); $('#inlineDatepicker').datepick( { onSelect:function(dateText) { //mise au format "ddmmmyyyy" de la date sélectionner $(_IDfromDateText)= $("#dateText").val($.format.date(new Date(), 'j M yy')); //mise au format "dd/mm/yyyy" de la date sélectionner $(_DateJour)= $("#dateText").val($.format.date(new Date(), 'j/M/yy')); if ($("#Table_Jour"+_IDfromDateText).length > 0) { // Il existe..donc j'affiche le tableau $("#Table_Jour"+_IDfromDateText).show(); // Alors je masque le précedent tableau. $(TCA).hide(); } else { // L'element n'existe pas.. je le crée (clone) $("#Table_Jour").clone().insertAfter("#Table_Jour"); // et je lui donne comme ID : "Table_Jour"+_IDfromDateText $("#Table_Jour").clone().attr('Table_Jour'+"_"+_IDfromDateText).after('TCA'); // puis on masque le tableau précédent. $TCA.hide(); // alors affiche le nouveau tableau $("#Table_Jour"+_IDfromDateText).show(); // On mes dans l'input date du clone la date sélectionner document.getElementById(" ").value =_DateJour; } } }); });
<!-- Initialisation de l'interface : -> var _IDfromDateText = ""; // Date du jour au format "ddmmyyyy" var _DateJour = ""; // Date du jour au format "dd/mm/yyyy" $(document).ready(function() { //mise au format "ddmmmyyyy" de la date sélectionner $(_IDfromDateText)= $("#dateText").val($.format.date(new Date(), 'j M yy')); //mise au format "dd/mm/yyyy" de la date sélectionner $(_DateJour)= $("#dateText").val($.format.date(new Date(), 'j/M/yy')) // je crée le 1er clone $("#Table_Jour").clone().insertAfter("#Table_Jour"); // et je lui donne comme ID : "Table_Jour"+_IDfromDateText $("#Table_Jour").clone().attr('Table_Jour'+"_"+_IDfromDateText).after("#Table_Jour"); // puis on masque le tableau précédent. $("#Table_Jour").hide(); // alors affiche le nouveau tableau $("#Table_Jour"+_IDfromDateText).show(); // On mes dans l'input date du clone la date sélectionner document.getElementById(" ").value =_DateJour; }); <!-- Sélection date : -> var TCA = $("#Table_Jour"+_IDfromDateText); // Tableau actuellement actif (avant le clonage) var _IDfromDateText = ""; // Date du jour au format "ddmmyyyy" var _DateJour = ""; // Date du jour au format "dd/mm/yyyy" $(function() { $('#popupDatepicker').datepick(); $('#inlineDatepicker').datepick( { onSelect:function(dateText) { //mise au format "ddmmmyyyy" de la date sélectionner $(_IDfromDateText)= $("#dateText").val($.format.date(new Date(), 'j M yy')); //mise au format "dd/mm/yyyy" de la date sélectionner $(_DateJour)= $("#dateText").val($.format.date(new Date(), 'j/M/yy')); if ($("#Table_Jour"+_IDfromDateText).length > 0) { // Il existe..donc j'affiche le tableau $("#Table_Jour"+_IDfromDateText).show(); // Alors je masque le précedent tableau. $(TCA).hide(); } else { // L'element n'existe pas.. je le crée (clone) $("#Table_Jour").clone().insertAfter("#Table_Jour"); // et je lui donne comme ID : "Table_Jour"+_IDfromDateText $("#Table_Jour").clone().attr('Table_Jour'+"_"+_IDfromDateText).after('TCA'); // puis on masque le tableau précédent. $TCA.hide(); // alors affiche le nouveau tableau $("#Table_Jour"+_IDfromDateText).show(); // On mes dans l'input date du clone la date sélectionner document.getElementById(" ").value =_DateJour; } } }); });
onSelect:function(dateText) { console.log(dateText); // avec dateText au format : YYYY-MM-DD var dateArr = dateText.split("-"); var IDfromDateText= dateArr[2] + dateArr[1] + dateArr[0]; if ($("#MonTableau_"+IDfromDateText).length > 0) { // Il existe..donc j'affiche le tableau } else { // L'element n'existe pas.. je le crée ( clone).. // et je lui donne comme ID : "MonTableau_"+ IDfromDateText } });
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question<!-- Initialisation de l'interface : -> $(document).ready(function() { var DateToday = new Date(); var IDfromDateText = ""; // Date du jour au format "ddmmyyyy" var DateJour = ""; // Date du jour au format "dd/mm/yyyy" //mise au format "ddmmmyyyy" de la date sélectionner var dateArr = DateToday.split("-"); var IDfromDateText= dateArr[2] + dateArr[1] + dateArr[0]; //mise au format "dd/mm/yyyy" de la date sélectionner var dateArr = DateToday.split("/"); var DateJour= dateArr[2] + dateArr[1] + dateArr[0]; // je crée le 1er clone $("#Table_Jour").clone().insertAfter("#Table_Jour"); // et je lui donne comme ID : "Table_Jour"+_IDfromDateText $("#Table_Jour").clone().attr('id', "Table_Jour"+"_"+IDfromDateText); // puis on masque le tableau précédent. $("#Table_Jour").hide(); // alors affiche le nouveau tableau $("#Table_Jour"+IDfromDateText).show(); // On mes dans l'input date du clone la date sélectionner document.getElementById(" ").value =DateJour; }); <!-- Sélection date : -> $(function() { $('#popupDatepicker').datepick(); $('#inlineDatepicker').datepick( { onSelect:function(dateText) { console.log(dateText); var TCA = $("#Table_Jour"+IDfromDateText); // Tableau actuellement actif (avant le clonage) console.log(dateText); var IDfromDateText = ""; // Date du jour au format "ddmmyyyy" var DateJour = ""; // Date du jour au format "dd/mm/yyyy" //mise au format "ddmmmyyyy" de la date sélectionner var dateArr = dateText.split(""); var IDfromDateText= dateArr[2] + dateArr[1] + dateArr[0]; //mise au format "dd/mm/yyyy" de la date sélectionner var dateArr = dateText.split("/"); var DateJour= dateArr[2] + dateArr[1] + dateArr[0]; if ($("#Table_Jour"+IDfromDateText).length > 0) { // Il existe... donc j'affiche le tableau $("#Table_Jour"+IDfromDateText).show(); // Alors je masque le précedent tableau. $(TCA).hide(); } else { // L'element n'existe pas... je le crée (clone) $("#Table_Jour").clone().insertAfter("#Table_Jour"); // et je lui donne comme ID : "Table_Jour"+_IDfromDateText $("#Table_Jour").clone().attr('id', "Table_Jour"+"_"+IDfromDateText); // puis on masque le tableau précédent. $TCA.hide(); // alors affiche le nouveau tableau $("#Table_Jour"+IDfromDateText).show(); // On mes dans l'input date du clone la date sélectionner document.getElementById(" ").value =DateJour; } } }); });
$(function() { $('#inlineDatepicker').datepicker({onSelect:function(dateText){ document.getElementById("DATE1").value =dateText; var dateArr = dateText.split("/"); var IDfromDateText= dateArr[2] + dateArr[0] + dateArr[1]; if ($("#myDivMonTableau_"+IDfromDateText).length > 0) { // Il existe..donc j'affiche le tableau AffichDiv("MonTableau_"+IDfromDateText); } else { // L'element n'existe pas.. je le crée ( clone).. // et je lui donne comme ID : "MonTableau_"+ IDfromDateText CreaTable("MonTableau_"+IDfromDateText); } } }); }); function AffichDiv(idTable){ //On masque TOUS les tableaux $('div[name="MesTBL"]').hide(); // On affiche celui que l'on a selectionné $('#myDiv'+ idTable).show(); } function CreaTable(idTable){ $("#foo").append("<div name='MesTBL' id='myDiv" + idTable + "'> Tableau : " + idTable + " </div>") var table = $('<table id="MonTableau_' + idTable + '"></table>').addClass('foo'); var row = $('<tr></tr>'); for(i=0; i<3; i++){ var td = $('<td></td>').text('Cellule ' + i); row.append(td); } table.append(row); $('#myDiv'+ idTable).append(table); //On masque le DIV noouvellement créé $('#myDiv'+ idTable).hide(); }
<div id="inlineDatepicker"></div> <input type="date" id="DATE1" Value='date' Size="9"></input> <div id='foo'> </div>
<html> <head> <meta http-equiv="content-type" content="text/php; charset=ISO-8859-1" /> <link rel="stylesheet" href="CSS/CSS_Daily_Timer.css"/> <link rel="stylesheet" href="CSS/Calendrier_CSS.css"/> <link rel="stylesheet" href="CSS/Calendar_Fixe_Design/jquery.datepick.css"> <script type="text/javascript" src="JS/JS_JQuery_2_1_0.js"></script> <script type="text/javascript" src="JS/JS_JQuery_Datepick_Pluging.js"></script> <script type="text/javascript" src="JS/JS_JQuery_Datepick.js"></script> <script type="text/javascript" src="JS/JS_Calendrier.js" ></script> <script type="text/javascript" src="JS/JS_Lanceur.js" ></script> </head> <body> <script type="text/javascript"> $(function() { $('#inlineDatepick').datepick({onSelect:function(dateText){ document.getElementById("DATE1").value =dateText; var dateArr = dateText.split("/"); var IDfromDateText= dateArr[2] + dateArr[0] + dateArr[1]; if ($("#myDivMonTableau_"+IDfromDateText).length > 0) { // Il existe..donc j'affiche le tableau AffichDiv("MonTableau_"+IDfromDateText); } else { // L'element n'existe pas.. je le crée ( clone).. // et je lui donne comme ID : "MonTableau_"+ IDfromDateText CreaTable("MonTableau_"+IDfromDateText); } } }); }); function AffichDiv(idTable){ //On masque TOUS les tableaux $('div[name="MesTBL"]').hide(); // On affiche celui que l'on a selectionné $('#myDiv'+ idTable).show(); } function CreaTable(idTable){ $("#foo").append("<div name='MesTBL' id='myDiv" + idTable + "'> Tableau : " + idTable + " </div>") var table = $('<table id="MonTableau_' + idTable + '"></table>').addClass('foo'); var row = $('<tr></tr>'); for(i=0; i<3; i++){ var td = $('<td></td>').text('Cellule ' + i); row.append(td); } table.append(row); $('#myDiv'+ idTable).append(table); //On masque le DIV noouvellement créé $('#myDiv'+ idTable).hide(); } </script> <div id="inlineDatepick"></div> <input type="date" id="DATE1" Value='date' Size="9"></input> <div id='foo'> </div> </body> </html>
<html> <head> <meta http-equiv="content-type" content="text/php; charset=ISO-8859-1" /> <link rel="stylesheet" href="CSS/CSS_Daily_Timer.css"/> <link rel="stylesheet" href="CSS/Calendrier_CSS.css"/> <link rel="stylesheet" href="CSS/Calendar_Fixe_Design/jquery.datepick.css"> <script type="text/javascript" src="JS/JS_JQuery_2_1_0.js"></script> <script type="text/javascript" src="JS/JS_JQuery_Datepick_Pluging.js"></script> <script type="text/javascript" src="JS/JS_JQuery_Datepick.js"></script> <script type="text/javascript" src="JS/JS_Calendrier.js" ></script> </head> <body> <div id="inlineDatepick"></div> <input type="date" id="DATE1" Value='date' Size="9"></input> <div id='foo'> </div> <br> <fieldset id="Partie_Basse_Fieldset"> <legend> DAILY TIMETABLE per request</legend> <div name="MesLignes" id="Partie_Basse_Div"> <table id="Table_Jour" border="2"> <tbody> <tr align="center" id="Tab"> <td bgcolor="#F0FFFF"></td> <td bgcolor="#F0FFFF">Date</td> <td bgcolor="#F0FFFF">Request</td> <td bgcolor="#F0FFFF">Time(h)</td> <td bgcolor="#F0FFFF">Description</td> <td bgcolor="#F0FFFF">Worker</td> </tr> <tr align="center" id="Line"> <td> <input type="button" name="NLine" id="" size="3" value="New" onclick="CloneLine(this.parentNode.parentNode);"> </input> </td> <td> <input type="date" name="date" id="TDate" size="9" value="" readonly="readonly"></input> </td> <td> <SELECT id="Select_Request" NAME="SRequest" onChange="saveValue(this)"> <option value="*****************" selected="selected"></option> <option>***************** </SELECT> </td> <td> <input type="text" name="time" id="" size="5" value=""></input> </td> <td> <textarea name="" id="TextArea_Description" rows="2" cols="30" value=""></textarea> </td> <td> <SELECT id="Table_Select_Worker" NAME="SWorker" onChange="saveValue(this)"> <option value="*****************" selected="selected"></option> <option>***************** </SELECT> </td> </tr> </tbody> </table> </div> <div></div> </fieldset> <style> .foo { color: blue; } .foo td { border:1px; } </style> <script type="text/javascript"> $(function() { $('#inlineDatepick').datepick( {onSelect: function(dateText) { document.getElementById("DATE1").value =dateText; var dateArr = dateText.split("/"); var IDfromDateText= dateArr[2] + dateArr[0] + dateArr[1]; if ($("#myDivMonTableau_"+IDfromDateText).length > 0) { // Il existe..donc j'affiche le tableau AffichDiv("MonTableau_"+IDfromDateText); } else { // L'element n'existe pas.. je le crée ( clone).. // et je lui donne comme ID : "MonTableau_"+ IDfromDateText CreaTable("MonTableau_"+IDfromDateText); } } }); }); function AffichDiv(idTable){ //On masque TOUS les tableaux $('div[name="MesTBL"]').hide(); // On affiche celui que l'on a selectionné $('#myDiv'+ idTable).show(); } function CreaTable(idTable) { $("#foo").append("<div name='MesTBL' id='myDiv" + idTable + "'> Tableau : " + idTable + " </div>") var table = $('<table id="MonTableau_' + idTable + '"></table>').addClass('foo'); var row = $('<tr></tr>'); for(i=0; i<3; i++){ var td = $('<td></td>').text('Cellule ' + i); row.append(td); } table.append(row); $('#myDiv'+ idTable).append(table); //On masque le DIV noouvellement créé $('#myDiv'+ idTable).hide(); } function CloneLine(Line) { newLine = Line.cloneNode(true); Line.parentNode.insertBefore(newLine,Line) //Line.parentNode.appendChild(newLine); } </script> </body> </html>
3 avril 2014 à 12:11
3 avril 2014 à 13:00
dans le script, le calendrier disparait de l'interface.
3 avril 2014 à 13:12
3 avril 2014 à 13:41
Voila le code de tout le script.
3 avril 2014 à 14:38
_IDfromDateText n'existe pas...
Je t'ai dit qu'il fallait que tu "remplaces" cette variable (ou du moins que tu lui affectes une valeur) en te basant sur la date selectionnée...