Toevoegen van een datum veld met datepicker in Magento

Wanneer je een invoerveld in Magento hebt waar je een datum in wilt gaan opslaan is het veel handiger voor de gebruiker om dit te doen met behulp van een datepicker. In dit artikel laat ik je zien hoe je een datumveld met datepicker kunt aanmaken in Magento.

photo credit: magro_kr via photopin cc

photo credit: magro_kr via photopin cc

Magento heeft standaard een bibliotheek aan boord met een datepicker voor zowel de backend als frontend. Om deze kalender aan de frontend ( bijvoorbeeld in een contactformulier ) te tonen voeg je onderstaande XML tags toe aan je local.xml van je thema:

De bovenstaande XML tags voegen de benodigde javascript en CSS bestanden toe aan de <head> van je template. Je kunt spelen met de stijl ( of je maakt er zelf 1 aan ) door een andere CSS in te laden. Welke er standaard beschikbaar zijn kun je zien in de map: magento_root/js/calendar/

Voeg onderstaande code toe aan een .phtml bestand waar je een datum veld wil tonen:

Voeg onderstaande javascript code toe aan het einde van je formulier:

Magento datepicker

Magento datepicker

Wanneer je je een datepicker over de gehele webshop wil plaatsen dan plaats je bovenstaande code in het bestand: magento_root/js/calendar-setup.js Kies een classname ( bijvoorbeeld .datepicker ) die je makkelijk kunt onthouden en op die manier ook kunt doorvoeren op de webwinkel.

Geef een reactie

Het e-mailadres wordt niet gepubliceerd. Vereiste velden zijn gemarkeerd met *