- Dit artikel is geschreven door Chrome-software-ingenieur Kent Tamura.
Zoals je misschien al gemerkt hebt, ondersteunt Google Chrome een datepicker 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 weergeven.
Omdat we veel feedback van ontwikkelaars hebben ontvangen, willen we in dit artikel enkele zaken verduidelijken over hoe u het beste uit het gebruik van de datumkiezer kunt halen.
Welke invloed heeft de landinstelling op de datumnotatie van de invoerwaarde?
Gebruikers kunnen een datumwaarde typen in het tekstveld van een input[type=date] waarbij de datumnotatie in het vak wordt weergegeven als grijze tekst. Dit formaat wordt verkregen uit de instellingen van het besturingssysteem.
Webauteurs kunnen het datumformaat niet wijzigen, omdat er momenteel geen standaarden zijn om het formaat te specificeren.
Hoe wordt de invoerwaarde weergegeven bij verzending naar een server?
De datumwaarde die wordt geïnterpreteerd vanuit input[type=date] in het HTTP-verzoek, zoals GET / POST, wordt opgemaakt als yyyy-mm-dd .
Welk formaat retourneert de invoerwaarde?
De input.value retourneert altijd als yyyy-mm-dd ongeacht het presentatieformaat.
Welk soort formaat accepteert de invoerwaarde?
Wanneer u de input.value programmatisch instelt, accepteert de waarde alleen de stijl yyyy-mm-dd ongeacht het presentatieformaat voor zowel de initiële waarde als de door JavaScript geïnjecteerde waarde.
Hoe wijzig ik het uiterlijk van de datumkiezer?
U kunt momenteel het uiterlijk van de datumkiezer niet stylen. In WebKit hebben we eerder manieren geboden om formulierbesturingselementen op te maken met de CSS-eigenschap -webkit-appearance of de ::-webkit-foo pseudo-klasseselector. De kalenderpop-up biedt dergelijke manieren echter niet in WebKit, omdat deze los staat van het document, zoals een pop-upmenu voor <select> , en er momenteel geen standaard is voor het beheren van de stijl van de subelementen.
Hoe voorkom ik conflicten tussen de jQuery Datepicker en de native datumkiezer?
Als u jQuery Datepicker op input[type=date] in Google Chrome hebt geprobeerd, heeft u mogelijk overlappende agenda's opgemerkt van zowel de jQuery-gebruikersinterface als de native agenda-pop-up. Als u jQuery Datepicker op alle platforms wilt toepassen, gebruikt u 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 realiseren met behulp van input[type=date] . Als u jQuery Datepicker alleen wilt toepassen op platforms zonder ondersteuning input[type=date] , kunt u Modernizr 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();