Polyfill date input IE11/FF

[hoi1234]

Mijn vraag
Ik ben voor school bezig met een website voor een dienst die video-on-demand aanbiedt. (zeg maar een concurrent van Netflix) In de casus staat dat de gebruiker bij het registeren o.a. een geboortedatum moet kunnen opgeven. Ook bepaalt de casus dat je eerst de front-end moet 'implementeren' in HTML 5 en CSS 3. Bij het tweede inlevermoment is het de bedoeling dat je de back-end 'implementeert' m.b.v. PHP. Dit is de relevante code die ik heb:

code:

<form action="register2.html" method="post">
    <p>Geboortedatum</p>
    <input type="date" name="geboortedatum" tabindex="5" required pattern="[0-9]{2}-[0-9]{2}-[0-9]{4}">
</form>

Het probleem is dat o.a Internet Explorer 11 en Firefox de 'date' type niet ondersteunen.

Relevante software en hardware die ik gebruik
IE 11/FF/Chrome/Opera

Wat ik al gevonden of geprobeerd heb
Ik denk dat het het in mijn geval het makkelijkste is om dit probleem op te lossen door te werken met een 'number' inputtype en vervolgens met PHP te valideren, zodat ik zeker weet dat de notatie van de data goed is.Ik kom tot deze conclusie omdat oplossingen als Webshim, Modernizr en templates niet zijn toegestaan binnen de opdracht. (Webshim en Modernizr bevatten jQuery/Javascript en templates en frameworks zijn niet toegestaan). Maar zeker weten doe ik dit niet.

Mijn vragen zijn dus:
1) Als ik niks over het hoofd zie en mijn idee goed gaat werken, hoe kan ik controleren in welk format de datum gegeven wordt? Ik weet dat je met PHP kan controleren of er alleen numerieke karakters worden ingevuld, maar ik kan zo snel niet vinden hoe je op een goede notatie controleert. (lijkt me dat dit problemen kan opleveren in de database als dit niet goed geverifieerd wordt)
2) Als dit geen goed idee is, wat zijn relevante termen om op te googlen?

[ikvanwinsum]

is js wel toegestaan? In dat geval zou je met onsubmit een functie uit kunnen voeren die de input van je formulier test. Zie ook deze vraag op stackoverflow. Hier zou je de input bijvoorbeeld kunnen controleren d.m.v. een regular expression.

Vervolgens kun je als de invoer door de client-side validatie heen komt het nog een keer server-side (met PHP) valideren.

[Spinal]

Met een "number" inputtype gaat het sowieso niet werken, dan moet je gewoon "text" gebruiken. In PHP zou je kunnen kijken naar DateTime of een regex (in je HTML gebruik je de regex al)

[b2vjfvj75gjx7]

https://github.com/dxw/date-polyfill
https://github.com/jonstipe/date-polyfill
https://github.com/jcgertig/date-input-polyfill

http://caniuse.com/input-datetime/embed/

[hoi1234]

ikvanwinsum schreef op maandag 24 juli 2017 @ 16:12:
is js wel toegestaan? In dat geval zou je met onsubmit een functie uit kunnen voeren die de input van je formulier test. Zie ook deze vraag op stackoverflow. Hier zou je de input bijvoorbeeld kunnen controleren d.m.v. een regular expression.

Vervolgens kun je als de invoer door de client-side validatie heen komt het nog een keer server-side (met PHP) valideren.

Helaas... Alleen HTML 5, CSS 3 en later PHP. (Sorry als ik dat niet duidelijk heb opgeschreven) Daarnaast mag ik ook geen templates en frameworks gebruiken. De coursetrekker is helaas van mening dat je eerst HTML en CSS moet kunnen voordat je aan templates, frameworks en andere talen mag beginnen.

Spinal schreef op maandag 24 juli 2017 @ 16:14:
Met een "number" inputtype gaat het sowieso niet werken, dan moet je gewoon "text" gebruiken. In PHP zou je kunnen kijken naar DateTime of een regex (in je HTML gebruik je de regex al)

Nu je het zegt zie ik het pas. Als er geen betere voorstellen komen, denk ik dat dit de beste methode is.
Dan kan ik later met PHP een foutmelding gaan printen.

b2vjfvj75gjx7 schreef op maandag 24 juli 2017 @ 16:20:
https://github.com/dxw/date-polyfill
https://github.com/jonstipe/date-polyfill
https://github.com/jcgertig/date-input-polyfill

http://caniuse.com/input-datetime/embed/

Zoals ik al zei, heb ik hier helaas niks aan. Maar toch bedankt voor de moeite! caniuse kan ik daarentegen zeker wat mee en is eigenlijk altijd handig.

---

Misschien was het handig om er bij te vermelden dat het om een opdracht voor eerstejaars gaat. Vandaar dat we dus ook alleen HTML 5 en CSS 3 mogen gebruiken, omdat ze willen dat iedereen dat kan, voordat we beginnen aan andere talen en frameworks.

Voor de duidelijkheid: het is de bedoeling dat er eerst een statische website wordt opgeleverd. Daar heb je ongeveer vier weken de tijd voor en je mag alleen HTML 5 en CSS 3 gebruiken. Nadat je de statische website hebt opgeleverd, moet je verder gaan met de site dynamisch te maken met PHP. Daar heb je ook weer ongeveer vier weken de tijd voor.

[ Voor 7% gewijzigd door hoi1234 op 24-07-2017 17:34 ]

[Daos]

Kan je het niet met je docent bespreken? Dat het niet werkt onder IE lijkt mij namelijk niet zo'n groot probleem. Er zijn wel vaker hacks nodig om daar iets op te laten werken.

Bij geen reactie zou ik gewoon de type="date" laten staan. Is tenslotte html5 (al kan ik zo snel niet vinden of het een verplicht onderdeel is).

[hoi1234]

Daos schreef op maandag 24 juli 2017 @ 17:39:
Kan je het niet met je docent bespreken? Dat het niet werkt onder IE lijkt mij namelijk niet zo'n groot probleem. Er zijn wel vaker hacks nodig om daar iets op te laten werken.

Bij geen reactie zou ik gewoon de type="date" laten staan. Is tenslotte html5 (al kan ik zo snel niet vinden of het een verplicht onderdeel is).

Goed voorstel! Maar:
1) Het is vakantie en geloof mij maar, niemand die reageert.
2) Ik weet niet wie mijn docent is, omdat dit een herkansing is die ik alvast aan het maken ben, zodat ik later in het jaar niet meer in tijdsnood komt (dat was vorig jaar 1 van de redenen dat ik niet alles gehaald heb)

Natuurlijk heb je gelijk dat het niet percé iets uitmaakt. Dit zal natuurlijk wel aan de docent liggen. Maar als ik het niet hoef op te lossen dan ben ik wel weer zo iemand die dat wel wil zelf wilt oplossen. (En het is natuurlijk altijd leuk om met features op te scheppen bij je docent)

[b2vjfvj75gjx7]

Als de 'eis' is dat het puur HTML 5 en CSS 3 is, zit je goed toch?

Dat sommige browsers dat niet ondersteunen (en het date-object is daar onderdeel van), is een feit waar je dan niet omheen kan.

Met de eis van HTML 5 en CSS 3 is het logisch dat je alle devices die dat niet ondersteunen vanzelf niet support...

Enige wat je wellicht kan doen is van DD/MM/YYYY drie losse pulldowns (select) maken, zodat je een 'eigen' interpretatie geeft aan het date-object...

https://jsfiddle.net/ry8Lp2xv/

Willen ze HTML 5 en CSS 3 én backwards-compatible met alle browsers die dat niet supporten, dan kan je via gracefull degradation gewoon een polyfill gebruiken (daar zijn die dingen immers voor).

Soortgelijke discussie - https://stackoverflow.com...browsers-any-alternatives

[ Voor 9% gewijzigd door b2vjfvj75gjx7 op 24-07-2017 18:09 ]

[hoi1234]

b2vjfvj75gjx7 schreef op maandag 24 juli 2017 @ 18:07:
Als de 'eis' is dat het puur HTML 5 en CSS 3 is, zit je goed toch?

Dat sommige browsers dat niet ondersteunen (en het date-object is daar onderdeel van), is een feit waar je dan niet omheen kan.

Met de eis van HTML 5 en CSS 3 is het logisch dat je alle devices die dat niet ondersteunen vanzelf niet support...

Enige wat je wellicht kan doen is van DD/MM/YYYY drie losse pulldowns (select) maken, zodat je een 'eigen' interpretatie geeft aan het date-object...

https://jsfiddle.net/ry8Lp2xv/

Willen ze HTML 5 en CSS 3 én backwards-compatible met alle browsers die dat niet supporten, dan kan je via gracefull degradation gewoon een polyfill gebruiken (daar zijn die dingen immers voor).

Soortgelijke discussie - https://stackoverflow.com...browsers-any-alternatives

Dus als ik het goed begrijp is het niet logisch om dit met alleen maar CSS 3 en HTML 5 op te lossen? Ik weet in ieder geval nu voor het vervolg dat ik jQuery of JS nodig heb. Die eigen interpretatie zou ik nog kunnen implementeren, maar die is natuurlijk niet toekomstvast . (Er werkt een docent op school die nogal let op hoe toekomstvast een optie is)

[b2vjfvj75gjx7]

Als de eis is dat je een date-field maakt en enkel CSS3 en HTML5 gebruikt, is er geen andere optie;

Het date-field ís immers HTML5...

Als ze dan ook nog willen dat het buiten HTML5 om werkt, dan moet je het oplossen met een polyfill (maar als dat niet mag, kan het niet).

Feitelijk vragen ze jou een auto te bouwen die rijd op diesel, maar getankt moet worden met benzine... dat gaat niet

Als ze diesel willen, krijgen ze diesel... willen ze benzine, dan wordt het benzine.

Je kan geen HTML5 object op je pagina zetten door enkel gebruik te maken van HTML3 of 4...

[hoi1234]

b2vjfvj75gjx7 schreef op maandag 24 juli 2017 @ 19:07:
Als de eis is dat je een date-field maakt en enkel CSS3 en HTML5 gebruikt, is er geen andere optie;

Het date-field ís immers HTML5...

Als ze dan ook nog willen dat het buiten HTML5 om werkt, dan moet je het oplossen met een polyfill (maar als dat niet mag, kan het niet).

Feitelijk vragen ze jou een auto te bouwen die rijd op diesel, maar getankt moet worden met benzine... dat gaat niet

Als ze diesel willen, krijgen ze diesel... willen ze benzine, dan wordt het benzine.

Je kan geen HTML5 object op je pagina zetten door enkel gebruik te maken van HTML3 of 4...

Nu je het zo zegt klinkt het ook logisch voor mij...

[q-enf0rcer.1]

Wat je ook nog zou kunnen doen is drie number fields maken:

DD field
MM field
YYYY field

Zet je het standaard gekozen jaar op het jaar van je doelgroep, via de + en - knoppen kunnen de gebruikers dan vrij eenvoudig de datum invullen. En in PHP kun je dit dan omtoveren tot een correcte DATE.

[hoi1234]

q-enf0rcer.1 schreef op dinsdag 25 juli 2017 @ 20:02:
Wat je ook nog zou kunnen doen is drie number fields maken:

DD field
MM field
YYYY field

Zet je het standaard gekozen jaar op het jaar van je doelgroep, via de + en - knoppen kunnen de gebruikers dan vrij eenvoudig de datum invullen. En in PHP kun je dit dan omtoveren tot een correcte DATE.

Bedankt. Maar ik denk dat ik het maar zo laat...

[q-enf0rcer.1]

hoi1234 schreef op woensdag 26 juli 2017 @ 09:03:
[...]

Bedankt. Maar ik denk dat ik het maar zo laat...

Ook wel goed toch? Je hebt inmiddels in ieder geval genoeg onderzoek gedaan in wat er mogelijk is met puur HTML en CSS.