Sujet Précédent Sujet Suivant

Gestion par calendrier des fiches journaliére du planning

Résolu
EnguerrandP Messages postés 295 Date d'inscription vendredi 26 avril 2013 Statut Membre Dernière intervention 15 juillet 2015 - Modifié par EnguerrandP le 3/04/2014 à 12:05
EnguerrandP Messages postés 295 Date d'inscription vendredi 26 avril 2013 Statut Membre Dernière intervention 15 juillet 2015 - 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.

6 réponses

Réponse 1 / 6
jordane45 Messages postés 38141 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 20 avril 2024 344
3 avril 2014 à 12:06
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" >
...


0
EnguerrandP Messages postés 295 Date d'inscription vendredi 26 avril 2013 Statut Membre Dernière intervention 15 juillet 2015 1
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)
0
EnguerrandP Messages postés 295 Date d'inscription vendredi 26 avril 2013 Statut Membre Dernière intervention 15 juillet 2015 1
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.
0
jordane45 Messages postés 38141 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 20 avril 2024 344
3 avril 2014 à 13:12
Tu peux me coller le code complet de ton datepicker stp ?
0
EnguerrandP Messages postés 295 Date d'inscription vendredi 26 avril 2013 Statut Membre Dernière intervention 15 juillet 2015 1
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.
0
jordane45 Messages postés 38141 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 20 avril 2024 344
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 
			}
		});
	}
});
0
Réponse 2 / 6
EnguerrandP Messages postés 295 Date d'inscription vendredi 26 avril 2013 Statut Membre Dernière intervention 15 juillet 2015 1
Modifié par EnguerrandP le 3/04/2014 à 14:37
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.
0
Réponse 3 / 6
EnguerrandP Messages postés 295 Date d'inscription vendredi 26 avril 2013 Statut Membre Dernière intervention 15 juillet 2015 1
3 avril 2014 à 14:58 
<!-- 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'));

0
Réponse 4 / 6
jordane45 Messages postés 38141 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 20 avril 2024 344
3 avril 2014 à 15:07 

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

0
EnguerrandP Messages postés 295 Date d'inscription vendredi 26 avril 2013 Statut Membre Dernière intervention 15 juillet 2015 1
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
0
EnguerrandP Messages postés 295 Date d'inscription vendredi 26 avril 2013 Statut Membre Dernière intervention 15 juillet 2015 1
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
0

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

Posez votre question
Réponse 5 / 6
EnguerrandP Messages postés 295 Date d'inscription vendredi 26 avril 2013 Statut Membre Dernière intervention 15 juillet 2015 1
3 avril 2014 à 16:16
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
0
Réponse 6 / 6
jordane45 Messages postés 38141 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 20 avril 2024 344
3 avril 2014 à 16:48
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/

0
EnguerrandP Messages postés 295 Date d'inscription vendredi 26 avril 2013 Statut Membre Dernière intervention 15 juillet 2015 1
3 avril 2014 à 18:20
Merci
0
EnguerrandP Messages postés 295 Date d'inscription vendredi 26 avril 2013 Statut Membre Dernière intervention 15 juillet 2015 1
3 avril 2014 à 19:16
J'ai fais quelque teste de ce code mes sa n'à pas marcher (a par l'input il n'y a rien a l'écran) j'ai donc lu le code et après plusieurs relecture j'ai trouver une différence avec le code d'avant je les rectifier et alors le calendrier apparait mais le format de la date n'est pas modifier.

Voila tout le code: 
<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>


Es ce que le fait que l'ordinateur de mon domicile soit un mac peut être la cause de se dysfonctionnement?
0
EnguerrandP Messages postés 295 Date d'inscription vendredi 26 avril 2013 Statut Membre Dernière intervention 15 juillet 2015 1
Modifié par EnguerrandP le 3/04/2014 à 23:04
Bonsoir, je vient d'installer mozilla sur mon mac avec firebug et il me donne encore cette erreur (lorsque j'appuie sur le calendrier):
TypeError: dateText.split is not a function
Je ne comprend pas pourquoi elle est la alors que dans le lien de ton teste tout marche.
0
EnguerrandP Messages postés 295 Date d'inscription vendredi 26 avril 2013 Statut Membre Dernière intervention 15 juillet 2015 1
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)
0
EnguerrandP Messages postés 295 Date d'inscription vendredi 26 avril 2013 Statut Membre Dernière intervention 15 juillet 2015 1
Modifié par EnguerrandP le 3/04/2014 à 23:34
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>
0
Rejoignez-nous