Weergave datum aanpassen

Status
Niet open voor verdere reacties.
L

luc99

Gebruiker
Lid geworden
10 nov 2015
Berichten
98
In een script dat ik op internet terug vind voor een toepassing die ik probeer aan te passen vind ik volgende code terug :

Code: 
if (DateUtils.isWeekend(dates[y][m][d])) { 	
	alert(dates[y][m][d]);
	}

Hierdoor bekom ik volgende resultaat

Sat Jan 16 2010 00:00:00 GMT+0100 (Midden-Europese standaardtijd)
Klik om te vergroten...

Nu zou ik graag het resultaat hiervan bekomen als volgt :

16/01/2010
Klik om te vergroten...

Hoe pas ik de alert hiervoor aan ?
 
is dit Javascript?

Als ik de notatie y m d volg, dan kom ik uit op iets in de volgorde met jaar, maand en dag.
In beide resultaten zie ik dit niet.

Is dit wel de juiste code?
 
Dit is de volledige code van de functie waar de if in voorkomt

Code: 
 function addGrid(div, data, dates, cellWidth, showWeekends) {
            var gridDiv = jQuery("<div>", { "class": "ganttview-grid" });
            var rowDiv = jQuery("<div>", { "class": "ganttview-grid-row" });
			for (var y in dates) {
				for (var m in dates[y]) {
					for (var d in dates[y][m]) {
						var cellDiv = jQuery("<div>", { "class": "ganttview-grid-row-cell" });
						if (DateUtils.isWeekend(dates[y][m][d]) && showWeekends) { 
							cellDiv.addClass("ganttview-weekend"); 
						}
						rowDiv.append(cellDiv);
					}
				}
			}
            var w = jQuery("div.ganttview-grid-row-cell", rowDiv).length * cellWidth;
            rowDiv.css("width", w + "px");
            gridDiv.css("width", w + "px");
            for (var i = 0; i < data.length; i++) {
                for (var j = 0; j < data[i].series.length; j++) {
                    gridDiv.append(rowDiv.clone());
                }
            }
            div.append(gridDiv);
        }
 
dat is addGrid, en ik zie een dates() functie.
 
De code die ik net toonde is de originele code. Ik heb deze als volgt aangepast omdat ik hier mee nog enkele andere bewerkingen moet gaan doen.
Het uiteindelijke doel is dat de vraag niet moet worden of de datum een dag uit het weekend is maar of de datum voorkomt uit een lijst met verlofdagen.
Ik probeer het probleem stap voor stap te analyseren en dacht dat allereerst al wou bekomen om de datum in het juiste datum formaat te krijgen om daarna te vergelijken met datums uit de verlofdagen lijst die ik nog dien toe te voegen.

Code: 
 function addGrid(div, data, dates, cellWidth, showWeekends) {
            var gridDiv = jQuery("<div>", { "class": "ganttview-grid" });
            var rowDiv = jQuery("<div>", { "class": "ganttview-grid-row" });
			for (var y in dates) {
				for (var m in dates[y]) {
					for (var d in dates[y][m]) {
						var cellDiv = jQuery("<div>", { "class": "ganttview-grid-row-cell" });
						if (DateUtils.isWeekend(dates[y][m][d])) { 
							alert (dates[y][m][d]); 
						}
						rowDiv.append(cellDiv);
					}
				}
			}
            var w = jQuery("div.ganttview-grid-row-cell", rowDiv).length * cellWidth;
            rowDiv.css("width", w + "px");
            gridDiv.css("width", w + "px");
            for (var i = 0; i < data.length; i++) {
                for (var j = 0; j < data[i].series.length; j++) {
                    gridDiv.append(rowDiv.clone());
                }
            }
            div.append(gridDiv);
        }
 
Hoe roep je die functie aan?
 
Als ik het goed begrijp is gebruik ik dates niet als een functie.

https://github.com/thegrubbsian/jquery.ganttView

Ik heb hierbij de link toegevoegd van het volledige ontwerp. Hier worden de dagen in de kalenderweergave van het weekend gekleurd in een ander kleurtje dan de rest.
De bedoeling is dus dat ik een lijst met verlofdagen kan toevoegen en indien de getoonde dag overeenkomt met een verlofdag, net zoals dus bij een dag van het weekend, de vakje in de kalender een ander kleurtje krijgt.
 
Nee, inderdaad. Ik zie net dat het inderdaad een argument is van addGrid.
 
Het lijkt iets als dit te zijn maar dat weet ik niet zeker
Code: 
dates = 
  array y [
    array m [
      array d [
      ]
    ]
  ]

Zet de volgende regel i.p.v. de alert regel.
Open de console en refresh de pagina om de inhoud van 'dates' te bekijken ;)
Code: 
console.log(dates);

Uh, de laatste update van 'jquery.ganttView.js' is 10 jaar oud....
 
Laatst bewerkt:
Hierdoor zie ik in de console het resultaat Array(2011).
Dit is eigenlijk vreemd aangezien de eerste dag die in mijn voorbeeld getoond wordt de datum is van 01/01/2010 en de laatste dag van het overzicht is 26/04/2010.
 
Het script zet in [d] de UTC string (luiheid van de maker). Je kan een functie toevoegen om er een NL datum van te maken. Het format van de output van deze functie is dd/mm/jjjj
Code: 
function utcToDutchDate (str) {
    var dUtc = new Date(str);
    var dtDD = ((dUtc.getDate()  < 10) ? '0' : '') + dUtc.getDate();
    var dtMM = ((dUtc.getMonth() < 10) ? '0' : '') + dUtc.getMonth();
    return (dtDD + '/' + dtMM + '/' + dUtc.getFullYear());
}

alert (utcToDutchDate(dates[y][m][d]));
 
Laatst bewerkt:
Je andere vraag, over de datums, die staan in bestand 'data.js' , dat is de gebruikers data van het overzicht.
Code: 
{
    id: 1,
    name: "Feature 1",
    series: [
        {
            name: "Planned",
            start: new Date(2010,00,01),
            end: new Date(2010,00,03)
        },
        {
            name: "Actual",
            start: new Date(2010,00,02),
            end: new Date(2010,00,05),
            color: "#f0f0f0"
        }
    ]
},
{
    id: 2,
    ... (dezelfde manier) ...
}

Ik begrijp niet goed wat de functie van het script is want wijzigingen worden nergens opgeslagen. Bij een refresh van de pagina zijn alle wijzigingen verloren.
 
Laatst bewerkt:
Ik zie wel het probleem bij de datum 02/04/2010 wordt 02/03/2010 weergegeven. De maand begint blijkbaar dus te tellen vanaf 0 ipv 1
 
Ik begrijp niet goed wat de functie van het script is want wijzigingen worden nergens opgeslagen. Bij een refresh van de pagina zijn alle wijzigingen verloren.
Klik om te vergroten...

Dat is een specialleke. De bedoeling is dat ik deze code in een webviewer van Filemaker plaats. In het voorbeeld waarmee ik werk wordt de data vanuit Filemaker in de code van het javascript geplaatst en na wijziging van de planning wordt de nieuwe datum terug aan Filemaker bezorgd om deze terug in de database te bewaren. Deze toepassing is dus eigenlijk om het wijzigingen van planningen eenvoudiger en grafisch voor te stellen. Dit is een functie die niet in Filemaker bestaat maar sinds de nieuwe versie van Filemaker 19 kan er Javascript code gebruikt worden in een webviewer. Dit is een enorme verbetering voor Filemaker waardoor een wereld aan nieuwe mogelijkheden zich opent.
 
2 dingen. Soms wordt een UTC datum niet goed herkend, daarom de 2e regel toegevoegd die er "Z" erachter zet.
En inderdaad, de maand loopt van 0 tot 11, daar moet er eentje bij opgeteld worden. De functie wordt dan
Code: 
function utcToDutchDate (str) {
    if (str.slice(-1) != "Z") str = str + "Z";
    var dUtc = new Date(str);
    var dtDD = ((dUtc.getDate() < 10) ? '0' : '') + dUtc.getDate();
    var dtMM = ((dUtc.getMonth() < 9) ? '0' : '') + (dUtc.getMonth() + 1);
    return (dtDD + '/' + dtMM + '/' + dUtc.getFullYear());
}
 
Laatst bewerkt:
Omdat het script zo oud is werkt het niet met de huidige jQuery 3, dan zijn er al 8 errors na een pagina refresh.
 
Ik heb het wel werkend momenteel, maar is er een ander voorbeeld van soortgelijk ontwerp dat werkt met een meer actuele code ?
 
Zelf nog nooit met software voor planning bezig geweest, mijn advies: googelen ;)
 
Status
Niet open voor verdere reacties.
Steun Ons

Nieuwste berichten

Terug
Bovenaan Onderaan