Datepicker toevoegen aan formulierveld

Met onderstaand script kan je een 'normaal' inputveld veranderen in een datumveld met datepicker.

Voorbeeld

Bij deze uitleg gaan we ervanuit dat je al in een eerder stadiums eerder een van de contactformulier-scripts uit de library  in de html-hoofdtekst hebt geplaatst.

De contactformulier-scripts  zorgen ervoor dat elk formulier-label en het bijbehorende inputveld in een <div> met  class .formWrap worden geplaatst.

Als je al een van de twee contactformulier-scripts in je html-hoofdtekst hebt staan kan je meteen door naar stap 1.

Als je nog niet een van deze scripts in je html-hoofdtekst hebt geplaatst kan je er door middel van het script hiernaast voor zorgen dat alle formulier-label en het bijbehorende inputvelden alsnog in een <div> met  class .formWrap worden geplaatst.

Stap 1: Plak onderstaand script in de html-hoofdtekst

  • in het onderstaande script staat bovenaan de volgende regel:
    $('.formWrap:nth-child() input').attr('id', 'datepicker01');
  • Controleer via element inspector in de hoeveelste .formWrap de datepicker 
  • Vul dit nummer in tussen de haakjes() die staan achter .formWrap:nth-child, zoals hieronder:
    $('.formWrap:nth-child([VUL HIER IN]) input').attr('id', 'datepicker01');

Gefeliciteerd, het meeste werk zit er nu op! Ga nu naar stap 2 om de datepicker werkend te krijgen. Daarna alleen nog door naar stap 3 voor de CSS styling.

Stap 2: Plak onderstaand script op in een htmlmodule op de pagina waar het formulier staat.

Stap 3: Plak onderstaande CSS in je CSS stylesheet en pas eventueel de styling aan.