Gestion par calendrier des fiches journaliére du planning [Résolu]

EnguerrandP 295 Messages postés vendredi 26 avril 2013Date d'inscription 15 juillet 2015 Dernière intervention - 3 avril 2014 à 11:51 - Dernière réponse : EnguerrandP 295 Messages postés vendredi 26 avril 2013Date d'inscription 15 juillet 2015 Dernière intervention
- 4 avril 2014 à 11:48
Bonjour,

Je cherche a mettre au point une page qui me permet grâce à un calendrier de gérer les fiche quotidienne du planning.

Présentation de la page :

/-------------------------------------------------------------------------------
/ ! Name worker!^!
/ ! < Month> ! < Year > !______
/ !___!___!___!___!___!___!___!
/ !___!___!___!___!___!___!___!
/ !___!___!CALENDRIER!___!___!
/ !___!___!___!___!___!___!___!
/ !___!___!___!___!___!___!___!
/ !___!___!___!___!___!___!___!
/
/ !______________________________________________________
/ !
/ !
/ !
/ ! PARTIE BASSE
/ !
/ !
/ !
/ !
/ !______________________________________________________!
/
/_____________________________________________________________
/-------------------------------------------------------------------------------

Fonctionnement souhaiter:
0- Initialisation de la page : On clone le Tableau on change l'id du clone, on fait apparaitre le clone, on masque l'originale, on mais la date du jours dans l'input date du tableau
1- Lorsque la page est charger on doit avoir dans la partie basse un tableau avec un input qui contient la date du jour
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:
En clonent le tableau original, changent son id puis en l'affichant.
On mais la date du jour sélectionner dans l'input du jour du nouveau tableau cloner.

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

<div id="inlineDatepicker"></div>

<br>

<div name="titi" id="toto">
		 <!-- lier au calendrier les appel des onglets -->
		 <!-- lors du clonnage ajouter le lien de l'onglet au calendrier -->
   		 <p> <a href="#Partie_Basse_Div" name="liens"> DIV 1 </a></p>
   		 <p> <a href="#Partie_Basse_Div_2" name="liens"> DIV 2 </a></p>
   		 <p> <a href="#Partie_Basse_Div_3" name="liens"> DIV 3 </a></p>
	</div>	
	
<fieldset id="Partie_Basse_Fieldset">
<legend> DAILY TIMETABLE per request</legend>

<div name="MesLignes" id="Partie_Basse_Div">
	<table id="Partie_Basse_Table" 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> 

<script type="text/javascript">
<!-- Tansfert de la valeur de la date à ...  ->
$(function() 
{
   $('#popupDatepicker').datepick();
   
   $('#inlineDatepicker').datepick(
    {
		onSelect:function(dateText)
		{
		document.getElementById("TDate").value =dateText;
		}
    });
});

function CloneLine(Line)
{
	newLine = Line.cloneNode(true); 
	Line.parentNode.insertBefore(newLine,Line)
	//Line.parentNode.appendChild(newLine);
}

var tbl=document.getElementById("Partie_Basse_Table")
var newTab = tbl.rows[0].cloneNode(true); 
var newTab2	= tbl.rows[1].cloneNode(true);
$('#inlineDatepicker').click
(
	function ()
	{	
		newTab=Tab.parentNode.appendChild(newTab)	
		Tab.parentNode.appendChild(newTab2)	
	}
);

<!-- Fonction Switch ->
$("a[name='liens']").click
	(
		function()
		{
		var target=$(this).attr('href');
			$("div[name='MesLignes']").hide();
			$(target).show();    
		}
	);

</script>

</body>
</html>


Comment je peut faire pour les switch de tableau a partir de clone et qu'il soit relier a leur date du calendrier?

(Et je ne sais pas pour quoi mais la fonction clone ne marche qu'une seul fois.)

Merci


Merci et que le café soit avec vous.
Afficher la suite 

Votre réponse

21 réponses

jordane45 22700 Messages postés mercredi 22 octobre 2003Date d'inscriptionModérateurStatut 6 octobre 2018 Dernière intervention - 3 avril 2014 à 12:06
0
Merci
Bonjour,

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:

Il me semble que ces points sont déjà traités :
2 - Selection d'un jour dans le calendrier
2.3 -( la création / clonage de ton tableau)

Donc maintenant tu souhaites réaliser les points 2.1 et 2.2 ?
faire pour les switch de tableau a partir de clone et qu'il soit relier a leur date du calendrier

Cette partie se fait dans le Onselect de ton datepicker.
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
  
  }


* IDfromDateText etant un ID que tu génères à partir de ta date....
Par exemple.. tu la convertis en format YYYYMMDD et tu créés les ID de tes tableaux (ceux que tu ajoutes par clonage) sous la forme :
<table id="myTbl_20140403" >
...


EnguerrandP 295 Messages postés vendredi 26 avril 2013Date d'inscription 15 juillet 2015 Dernière intervention - 3 avril 2014 à 12:11
Merci oui c'est bien les point 2.1, 2.2 et 2.3que je cherche a résoudre actuellement car pour les autre point j'ai déjà crée des poste (comme pour le problème de clonage de mon tableau)
EnguerrandP 295 Messages postés vendredi 26 avril 2013Date d'inscription 15 juillet 2015 Dernière intervention - 3 avril 2014 à 13:00
Lorsque je mes :

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
  
  }


dans le script, le calendrier disparait de l'interface.
jordane45 22700 Messages postés mercredi 22 octobre 2003Date d'inscriptionModérateurStatut 6 octobre 2018 Dernière intervention - 3 avril 2014 à 13:12
Tu peux me coller le code complet de ton datepicker stp ?
EnguerrandP 295 Messages postés vendredi 26 avril 2013Date d'inscription 15 juillet 2015 Dernière intervention - 3 avril 2014 à 13:41
<script type="text/javascript">
<!-- Tansfert de la valeur de la date à ...  ->
$(function() 
{
   $('#popupDatepicker').datepick();
   
   $('#inlineDatepicker').datepick(
    {
		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 
			}
		});
	}
});

function CloneLine(Line)
{
	newLine = Line.cloneNode(true); 
	Line.parentNode.insertBefore(newLine,Line)
	//Line.parentNode.appendChild(newLine);
}

var tbl=document.getElementById("Partie_Basse_Table")
var newTab = tbl.rows[0].cloneNode(true); 
var newTab2	= tbl.rows[1].cloneNode(true);
$('#inlineDatepicker').click
(
	function ()
	{	
		newTab=Tab.parentNode.appendChild(newTab)	
		Tab.parentNode.appendChild(newTab2)	
	}
);

<!-- Fonction Switch ->
$("a[name='liens']").click
	(
		function()
		{
		var target=$(this).attr('href');
			$("div[name='MesLignes']").hide();
			$(target).show();    
		}
	);

</script>

Voila le code de tout le script.
jordane45 22700 Messages postés mercredi 22 octobre 2003Date d'inscriptionModérateurStatut 6 octobre 2018 Dernière intervention - 3 avril 2014 à 14:38
C'est normal que ça plante... ( normalement.. si tu utilises FireBUG tu dois avoir un message d'erreur......).
_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...

 $(function() 
{
   $('#popupDatepicker').datepick();
   
   $('#inlineDatepicker').datepick(
    {
		onSelect:function(dateText)
		{
		console.log(dateText);
		//Par exemple : 20140403
		 var IDfromDateText = "20140403";
		 // Mais dans l'ideal.. il te faut 'générer' 
		 //  cet identifiant à partir de 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 
			}
		});
	}
});
  
Commenter la réponse de jordane45
EnguerrandP 295 Messages postés vendredi 26 avril 2013Date d'inscription 15 juillet 2015 Dernière intervention - Modifié par EnguerrandP le 3/04/2014 à 14:37
0
Merci
Bonjour,

Il me faudrait un coup de main pour cette fonction lors de la sélection de la date:

<!-- 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;
			}
		}
	});
});

Merci
Merci et que le café soit avec vous.
Commenter la réponse de EnguerrandP
EnguerrandP 295 Messages postés vendredi 26 avril 2013Date d'inscription 15 juillet 2015 Dernière intervention - 3 avril 2014 à 14:58
0
Merci
<!-- 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;
			}
		}
	});
});



La j'ai firebug qui me donne se message d'erreur :
ReferenceError: invalid assignment left-hand side
$(_IDfromDateText)= $("#dateText").val($.format.date(new Date(), 'dd M yy'));

Commenter la réponse de EnguerrandP
jordane45 22700 Messages postés mercredi 22 octobre 2003Date d'inscriptionModérateurStatut 6 octobre 2018 Dernière intervention - 3 avril 2014 à 15:07
0
Merci

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 
			}
		});


EnguerrandP 295 Messages postés vendredi 26 avril 2013Date d'inscription 15 juillet 2015 Dernière intervention - 3 avril 2014 à 15:11
On peut mettre les var dans la fonction en jquery? car j'ai fais des test d'autre fonction est elle ne marcher pas lorsque les var était dedans
EnguerrandP 295 Messages postés vendredi 26 avril 2013Date d'inscription 15 juillet 2015 Dernière intervention - 3 avril 2014 à 15:57
je comprend pas ton code:
-console.log(dateText); et firebug donne :
ReferenceError: dateText is not defined
A quoi sa sert ?

Se que je croit avoir compris :
-var dateArr = dateText.split("-");
Si je comprend bien sa permet de choisir le séparateur de la date

- var IDfromDateText= dateArr[2] + dateArr[1] + dateArr[0];
Si j'ai bien compris sa sert a repositionner les élément de la date a la place que l'on veut.

Merci
Commenter la réponse de jordane45
EnguerrandP 295 Messages postés vendredi 26 avril 2013Date d'inscription 15 juillet 2015 Dernière intervention - 3 avril 2014 à 16:16
0
Merci
Bonjour ,
J'ai apporter quelque "correction" a mon script:
<!-- 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;
			}
		}
	});
});


Mais Firebug me donne cette erreur:
TypeError: DateToday.split is not a function
var dateArr = DateToday.split("-");

merci
Commenter la réponse de EnguerrandP
jordane45 22700 Messages postés mercredi 22 octobre 2003Date d'inscriptionModérateurStatut 6 octobre 2018 Dernière intervention - 3 avril 2014 à 16:48
0
Merci
Bon...

Jettes un oeil à ceci :
    $(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>
 


Tu peux aller le tester : http://jsfiddle.net/bgPfx/18/

EnguerrandP 295 Messages postés vendredi 26 avril 2013Date d'inscription 15 juillet 2015 Dernière intervention - 3 avril 2014 à 23:13
D'après se que je lis le problème serai que pour utiliser .split sur dateText il faudrait que se soit une fonction. Je ne comprend pas pourquoi dans les exemple du net je voit pas en quoi la variable qu'il y a devant le .spilt et une fonction comme la :

Example

Split a string into an array of substrings:
var str = "How are you doing today?";
var res = str.split(" ");

The result of res will be an array with the values:
How,are,you,doing,today?
(http://www.w3schools.com/jsref/jsref_split.asp)
EnguerrandP 295 Messages postés vendredi 26 avril 2013Date d'inscription 15 juillet 2015 Dernière intervention - 3 avril 2014 à 23:18
voila tout le code de ma page :
<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>
EnguerrandP 295 Messages postés vendredi 26 avril 2013Date d'inscription 15 juillet 2015 Dernière intervention - 3 avril 2014 à 23:23
en remplacent :
var dateArr = dateText.split("/");


par :
var dateArr = ('dateText').split("/");


sa marche un peu mieux. pour le début mais après lorsque l'on click sur la calendrier il y a "undefineddateTextundefined " qui apparait la :
Tableau : MonTableau_undefineddateTextundefined
EnguerrandP 295 Messages postés vendredi 26 avril 2013Date d'inscription 15 juillet 2015 Dernière intervention - 4 avril 2014 à 00:25
Bonjour,
Voila la solution a se problème:
<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 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(dates)
   		{
    		var dateText = $.datepick.formatDate(dates[0]);
    		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)
{
    $("#Table_Jour").append("<div name='MesTBL' id='myDiv" + idTable + "'> Tableau : " + idTable  + " </div>")
 
var table = $('<table id="MonTableau_' + idTable + '"></table>').addClass('Table_Jour');
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>
EnguerrandP 295 Messages postés vendredi 26 avril 2013Date d'inscription 15 juillet 2015 Dernière intervention - 4 avril 2014 à 11:48
Et merci a tous ceux qui mon aider sur se problème en particulier Jordan45 et les Web programmeur des OP.
Commenter la réponse de jordane45

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.