- Dit artikel is geschreven door Chrome-softwareontwikkelaar Kent Tamura.
Zoals u wellicht al heeft opgemerkt, ondersteunt Google Chrome een datumkiezer sinds Chrome 20. Door simpelweg het type -attribuut van het input in te stellen op date , kan de gebruiker op de pijlknop klikken en Chrome zal een mooie kalenderwidget openen.
Omdat we veel feedback van ontwikkelaars hebben ontvangen, willen we in dit artikel graag een paar dingen verduidelijken over hoe u de datumkiezer optimaal kunt gebruiken.
Hoe beïnvloedt de landinstelling de datumnotatie van de invoerwaarde?
Gebruikers kunnen een datumwaarde in het tekstveld van een input[type=date] typen, waarbij de datumnotatie in het vak als grijze tekst wordt weergegeven. Deze notatie wordt bepaald door de instellingen van het besturingssysteem.
Webauteurs hebben geen mogelijkheid om de datumnotatie te wijzigen, omdat er momenteel geen standaarden zijn om de notatie te specificeren.
Hoe wordt de invoerwaarde weergegeven bij verzending naar een server?
De datumwaarde die wordt geïnterpreteerd vanuit input[type=date] in de HTTP-aanvraag, bijvoorbeeld GET/POST, wordt geformatteerd als yyyy-mm-dd .
Welk formaat retourneert de invoerwaarde?
De input.value wordt altijd geretourneerd als yyyy-mm-dd ongeacht het presentatieformaat.
Welk formaat wordt geaccepteerd voor de invoerwaarde?
Wanneer u de input.value programmatisch instelt, accepteert de waarde alleen de stijl yyyy-mm-dd ongeacht de presentatieopmaak voor zowel de beginwaarde als de in JavaScript geïnjecteerde waarde.
Hoe verander ik het uiterlijk van de datumkiezer?
U kunt momenteel de weergave van de datumkiezer niet stylen. In WebKit hebben we eerder manieren geboden om formulierbesturingselementen te stylen met de CSS-eigenschap -webkit-appearance of de pseudo-klasseselector ::-webkit-foo . De kalenderpop-up biedt dergelijke mogelijkheden echter niet in WebKit, omdat deze losstaat van het document, net als een pop-upmenu voor <select> , en er is momenteel geen standaard voor het bepalen van de styling van de subelementen.
Hoe voorkom ik conflicten tussen de jQuery Datepicker en de native datumkiezer?
Als je jQuery Datepicker hebt geprobeerd op input[type=date] in Google Chrome, heb je mogelijk overlappende kalenders opgemerkt in zowel de jQuery-gebruikersinterface als de native agenda-popup. Als je jQuery Datepicker op alle platforms wilt gebruiken, gebruik input[type=text] in plaats van input[type=date] . Niet alleen Google Chrome, maar ook iOS Safari, de BlackBerry-browser en Opera hebben hun eigen gebruikersinterface voor input[type=date] , en er is momenteel geen manier om een uniforme gebruikersinterface op alle platforms te bereiken met input[type=date] . Als je jQuery Datepicker alleen wilt gebruiken op platforms zonder input[type=date] -ondersteuning, kun je Modernizr gebruiken of de volgende code gebruiken:
var isDateInputSupported = function(){
var elem = document.createElement('input');
elem.setAttribute('type','date');
elem.value = 'foo';
return (elem.type == 'date' && elem.value != 'foo');
}
if (!isDateInputSupported()) // or.. !Modernizr.inputtypes.date
$('input[type="date"]').datepicker();