Hoe lang duurt het voo..
Datum formaat
Als een gebruiker een datum invoert bijvoorbeeld 14-03-2020 dan wil ik de naam van de dag terug krijgen.
Ik kan gebruik maken van de getDay() functie maar als ik de datum zo invoer gebeurt er niets omdat de format niet klopt.
In Javascript zou de datum zo ingevoerd moeten worden new Date("March 14, 2020 23:15:00");
Code (php)
1
2
3
4
2
3
4
<script type = "text/javascript">
var dateday = new Date("March 14, 2020 23:15:00"); //zo zou ik het willen-> var dateday = new Date("14-03-2020");
document.write(dateday.getDay());
</script>
var dateday = new Date("March 14, 2020 23:15:00"); //zo zou ik het willen-> var dateday = new Date("14-03-2020");
document.write(dateday.getDay());
</script>
Is hier een makkelijke / snelle manier voor?
Gewijzigd op 14/03/2020 19:13:28 door Loek Lemmens
Je zou kunnen overwegen om een library te gebruiken, zoals de datepicker UI. Bijkomend voordeel is waarschijnlijk dat de datums die je als "input" hebt waarschijnlijk direct het juiste formaat hebben om verdere bewerkingen uit te voeren, zoals het weergeven van de bijbehorende dag-naam.
Gewijzigd op 14/03/2020 19:27:30 door Thomas van den Heuvel
Code (php)
1
2
3
4
5
6
7
2
3
4
5
6
7
<script>
function reverse(datum) {
return datum.split("-").reverse().join("-");
}
console.log(reverse('14-03-2020'));
</script>
function reverse(datum) {
return datum.split("-").reverse().join("-");
}
console.log(reverse('14-03-2020'));
</script>
Vraag is of de topicstarter daar invloed op uit kan oefenen. Zonee, dan zal zo'n kunstgreep/workaround nodig zijn, zoja repareren.
Gewijzigd op 14/03/2020 21:57:51 door Thomas van den Heuvel
Het wordt wel anders als je de html date type gebruikt. Deze draait (iig in Chrome) de datum om naar yyyy-mm--dd.
Code (php)
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
<!DOCTYPE html>
<html>
<body>
<form method="post">
<input type="date" name="birthday" onchange="alert(this.value);">
<input type="submit">
</form>
</body>
</html>
<html>
<body>
<form method="post">
<input type="date" name="birthday" onchange="alert(this.value);">
<input type="submit">
</form>
</body>
</html>
Hoe je dit verder presenteert (in een lokale standaard, bijvoorbeeld dd-mm-YY of whatever) staat hier verder helemaal los van.
Het is veel makkelijker om een standaard datum een bepaald format te geven dan om een lokaal format om te buigen om hier vervolgens makkelijk mee te kunnen rekenen of over te dragen aan andere componenten (die nagenoeg altijd dit standaard formaat direct accepteren) of zelfs om dit om te zetten naar een ander lokaal formaat.
Het enige gevolg van het voeren van een custom/lokaal format aan code of een database is dat je dit moet blijven repareren omdat het format in feite onhandelbaar is.
Werk gewoon met een standaard (die altijd werkt) en als je een keer een datum wilt weergeven kun je het er met (wederom, standaard) formatteringsfuncties precies zo uit laten zien zoals jij het wilt hebben. Maar hoe je datums presenteert staat echt helemaal los van hoe je dit intern opslaat.
Gewijzigd op 15/03/2020 15:04:44 door Thomas van den Heuvel
Ja gewoon yyyy-mm-dd binnen je applicatie en de database gebruiken. Helemaal mee eens. en voor de eindgebruiker kun je de format functies gebruiken om de datum op zijn nederlands weer te geven. Maar met in een formulierveld <input type="text"> ligt het anders. Hiermee wil je graag dat de eindgebruiker (lees een opa van 83 jaar oud) er mee overweg kan. Deze gebruikers zijn de standaard yyyy-mm-dd absoluut niet gewend dus je moet er over nadenken HOE je dit invoerveld wilt vormgeven.
Er zijn overigens al gauw drie opties:
- drie dropdown velden: dag, maand en jaar (die heeft ook een vertaalslag nodig)
- een HTML5 date type invoerveld waarbij je het probleem aan de webbrowser overlaat. Hier zijn zowel voordelen als nadelen aan verbonden.
- een text type invoerveld al dan niet met een javascript datepicker. In combinatie met de datepicker zou je er nog voor kunnen kiezen om de notatie yyyy-mm-dd in het formulierveld te hanteren maar blijft voor de nederlandse gebruikers toch verwarrend...
Toevoeging op 15/03/2020 15:00:05:
En dat onhandelbaar zoals jij het stelt Thomas is toch wel enigszins overdreven als ik het mag zeggen. Zoals Ariën al zegt zul je toch serverside moeten valideren. Als de datumtekst vervolgens valide is dan kan het omdraaien eigenlijk niet mis gaan.
Gebruik dus dropdowns of wellicht nog beter (want met dropdowns kun je nog steeds ongein uithalen zoals 31-02-2021 tenzij je hier allerlei logica in stopt) een datepicker.
Met onhandelbaar bedoel ik "niet direct te gebruiken". Er zal eerst een vertaalslag plaats moeten vinden. Het lijkt mij op zijn zachtst gezegd onhandig om extra code te kloppen voor een probleem wat je in wezen zelf introduceert. Neem dit probleem direct zelf weg (indien mogelijk), dan is die extra code ook niet nodig. We leven niet meer in het tijdperk dat je per regel code betaald wordt (wat trouwens "prachtige" programma's opleverde, zoals je je wellicht kunt voorstellen).
Dit heb ik even snel uitgetest op https://jqueryui.com/datepicker/ met een readonly via de webdeveloper tool. Maar dat is geen waterdichte oplossing uiteraard. Dus kijk wat $_POST['date'] uitspuugt, split e.v.t. met explode() erop, en doe een checkdate() erop.
Gewijzigd op 15/03/2020 15:28:25 door - Ariën -
Tegelijkertijd lijkt het mij wel zo handig, en is het wel zo gebruiksvriendelijk, om een zodanig systeem te hebben dat het aanleveren van foutieve informatie zo lastig mogelijk is. Hoe minder gelegenheid je iemand geeft om foutieve informatie op te geven, hoe groter de kans dat de informatie direct klopt en de validatie ook meteen slaagt. Dat werkt doorgaans fijner dan dat een systeem vijf keer een formulier teruggeeft met een foutmelding.
Uiteraard wil ik het zo maken dat de meeste gebruikers ermee overweg kunnen dus of ze nu 2020-03-14 of 14-03-2020 invoeren, het moet beide kunnen werken.
Maar dat is voor latere zorg. Nu is het zo dat je de naam van de maand moet benoemen March ipv 03.
doe ik 03 14, 2020 dan krijg ik Nan terug
Als je meerdere formaten accepteert, krijg je straks verwarring tussen:
dd-mm-yyyy
en
mm-dd-yyyy
En 1 april is wat anders dan 4 januari (01-04-yyyy)
Loek Lemmens op 15/03/2020 16:21:48:
Waar het mij omgaat is dat ik de naam van de dag terugkrijg.
Uiteraard wil ik het zo maken dat de meeste gebruikers ermee overweg kunnen dus of ze nu 2020-03-14 of 14-03-2020 invoeren, het moet beide kunnen werken.
Maar dat is voor latere zorg. Nu is het zo dat je de naam van de maand moet benoemen March ipv 03.
doe ik 03 14, 2020 dan krijg ik Nan terug
Uiteraard wil ik het zo maken dat de meeste gebruikers ermee overweg kunnen dus of ze nu 2020-03-14 of 14-03-2020 invoeren, het moet beide kunnen werken.
Maar dat is voor latere zorg. Nu is het zo dat je de naam van de maand moet benoemen March ipv 03.
doe ik 03 14, 2020 dan krijg ik Nan terug
Dus als je NaN krijgt probeer je de datum om te draaien zoals ik liet zien. Vervolgens maak je een Date object aan zoals je al zei en trek je de info er uit die je wilt.
Het omdraaien gaat ook niet omdat de date format March 14, 2020 is en niet 03 14, 2020
Gewijzigd op 15/03/2020 18:13:04 door Loek Lemmens
Uitgaande dat een gebruiker altijd vier cijfers voor het jaartal dient in te vullen en de mogelijke combinaties dd-mm-yyyy en yyyy-mm-dd mogen zijn ben ik uitgekomen op het volgende:
html snippet:
Code (php)
1
2
2
<input type="text" id="input-datum">
<div id="output"></div>
<div id="output"></div>
en javascript snippet (vergeet jquery niet in te laden)
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
function validateDate(dateString) {
var datum = dateString.split("-");
if(datum.length != 3) {
return false;
}
for(var i = 0 ; i < 3 ; i++) {
if(datum[i].length === 0 || datum[i] < 1) {
return false;
}
}
var d = new Date(dateString);
if(datum[2].length == 4) {
d = new Date(datum.reverse().join("-"));
}
if(d.toString() == 'Invalid Date') {
return false;
}
if(d.getYear() < 0) {
return false;
}
return d;
}
$(document).ready(function() {
$("#input-datum").on("change keyup paste", function() {
var days = ["zo", "ma", "di", "wo", "do", "vr", "za"];
var months = ["jan", "feb", "mrt", "apr", "mei", "jun", "jul", "aug", "sep", "okt", "nov", "dec"];
var d = validateDate($(this).val());
if(d === false) {
$("#output").html("Ongeldige datum");
} else {
var year = 1900 + d.getYear();
$("#output").html(days[d.getDay()] + " " + d.getDate() + " " + months[d.getMonth()] + " " + year);
}
});
});
var datum = dateString.split("-");
if(datum.length != 3) {
return false;
}
for(var i = 0 ; i < 3 ; i++) {
if(datum[i].length === 0 || datum[i] < 1) {
return false;
}
}
var d = new Date(dateString);
if(datum[2].length == 4) {
d = new Date(datum.reverse().join("-"));
}
if(d.toString() == 'Invalid Date') {
return false;
}
if(d.getYear() < 0) {
return false;
}
return d;
}
$(document).ready(function() {
$("#input-datum").on("change keyup paste", function() {
var days = ["zo", "ma", "di", "wo", "do", "vr", "za"];
var months = ["jan", "feb", "mrt", "apr", "mei", "jun", "jul", "aug", "sep", "okt", "nov", "dec"];
var d = validateDate($(this).val());
if(d === false) {
$("#output").html("Ongeldige datum");
} else {
var year = 1900 + d.getYear();
$("#output").html(days[d.getDay()] + " " + d.getDate() + " " + months[d.getMonth()] + " " + year);
}
});
});
Toevoeging op 15/03/2020 20:34:23:
Je kunt het hier werkend zien: https://codepen.io/frankbeen/pen/vYOjKNq