Share
In deze snelle tip laat ik u zien hoe u de nieuwe HTML5-datuminvoer gebruikt en vervolgens een fallback-jQuery UI-oplossing biedt voor de browsers die dit nieuwe invoertype nog niet ondersteunen.
We zijn er allemaal geweest. U hebt een formulier gemaakt en nu heeft u de gebruiker nodig om een datum in te voeren. Maar hoe bepaal je in welke indeling ze de datum invoeren? Zou het niet eenvoudiger zijn als we een kalenderbesturing of een datepicker konden gebruiken? Absoluut! Helaas ondersteunen slechts enkele browsers de nieuwe HTML5 datum invoertype. Dat is oke, we zullen de gebruikersinterface van jQuery gebruiken om een terugval te bieden!
Laten we eerst plannen voor de toekomst en aannemen dat de gebruiker werkt in een moderne browser die een datepicker ondersteunt.
Datumkiezer
Op het moment van schrijven ondersteunen alleen Webkit en Opera dit invoertype. In Firefox en Internet Explorer zal de browser standaard een eenvoudig tekstvak gebruiken - niet ideaal!
Laten we de gebruikersinterface van jQuery gebruiken om te compenseren.
De datapicker-tool voor jQuery UI werkt wonderwel en is een makkie om te "installeren". Eerst downloaden we een aangepaste versie van de gebruikersinterface van jQuery, ga naar de downloadpagina en vink alleen de items 'Kern' en 'Datepicker' aan. Laat al het andere ongecontroleerd.
Klik op downloaden en je ontvangt een zip met de benodigde bestanden. Overdracht via het jQuery UI-bestand en de CSS-map naar uw project.
Met jQuery UI geïmporteerd in onze mappenboom, moeten we vervolgens de nodige bestanden opnemen, met name de CSS- en JavaScript-bestanden.
Datumkiezer
Merk op hoe we onze aangepaste jQuery UI-stylesheet hebben toegevoegd, de jQuery-bibliotheek - momenteel bij versie 1.6 - en het aangepaste jQuery UI-script, dat ik heb hernoemd naar jquery-ui.js.
Accentsconagua
datumkiezer Methode Onze basis is ingesteld; nu moeten we de DOM ondervragen voor het gewenste invoerelement en de datumkiezer() methode erop.
Deze paar karakters alleen zullen het lukken. Als we nu de pagina in Firefox bekijken en op het invoerelement klikken, ziet u de datepicker die van kracht is.
Wat we hier hebben, werkt, maar er is één probleem. Als we terugkeren naar een geavanceerde browser zoals Chrome, hebben we nu een dubbele taak. Zowel de native en fallback datepickers zijn tegelijkertijd van kracht. We hebben een manier nodig om dat op te geven, als de browser het ondersteunt datum invoertype, doe niets. Dat is eenvoudig!
Datumkiezer
In een realistisch project zou je dit waarschijnlijk abstraheren testing code naar zijn eigen methode, of gebruik Modernizr, maar dit zal de truc zijn voor testdoeleinden.
In de bovenstaande code maken we eerst een invoerelement en proberen het vervolgens in te stellen type attribuut gelijk aan datum. Nu, als de browser hierin faalt - wat betekent dat het niet begrijpt wat de datum type is - we kunnen dan aannemen dat het een oudere browser is, en bieden in plaats daarvan de jQuery UI fallback. Eenvoudig!
De datepicker-tool wordt geleverd met een verscheidenheid aan overschrijvingen; u kunt hier de volledige lijst bekijken.
Laten we samen een paar onderzoeken. Wat als u een specifiek datumformaat wilt opgeven. Liever dan Y / M / D, we gebruiken liever Y-M-D. Om dit te doen, gebruiken we de datumnotatie eigendom.
$ ('# date'). datepicker (dateFormat: 'yy-mm-dd'); Nou dat was makkelijk. Laten we vervolgens zeggen dat we alleen willen dat de gebruiker vanaf nu een datum tussen nu en vier dagen kan selecteren. Dit is een makkie als we de maxDate keuze. Een handige dandy-functie is dat we relatieve termen, zoals +4, voor vier dagen vanaf nu kunnen gebruiken.
$ ('# date'). datepicker (maxDate: +4); We krabben hier alleen maar, maar hiermee moet je aan de slag! Cross-browser datepickers binnen enkele minuten!
