Popup-kalender

Op veel invul-formulieren wordt gevraagd om een datum in te voeren. Dat gaat vaak fout door type-fouten of doordat de datum wordt ingevoerd op een manier waar JavaScript niet mee overweg kan.
Op deze bladzijde wordt een script beschreven dat die problemen niet heeft. De datum wordt gekozen uit een listbox, of kan worden gekozen in een pop-up kalender.

Hieronder zie je drie invoervelden die zijn ingesteld op de datum van vandaag. Je kunt hiermee een andere datum instellen om verder te gebruiken in je formulier.
Als je op het plaatje klikt verschijnt er een pop-up met daarin de kalender van de maand in het invoerveld. De aangegeven datum in de kalender is hetzelfde als in het invoerveld. In de kalender kun je van maand wisselen met de pijltjes en . Als je een datum uit de kalender kiest verschijnt deze in de invoervelden.

Als je op de knop onder de kalender klikt verschijnt er een alert. Die toont de datum die de popup-kalender heeft teruggegeven. Die zou je bijvoorbeeld kunnen gebruiken om in een e-mail bericht te zetten.
Op deze plaats wordt daarvoor het (Amerikaanse) format MM/DD/YYYY gebruikt, omdat je daarmee met de JavaScript opdracht new Date() een datum-object kunt maken om verder mee te werken. Zie verder de beschrijving op deze bladzijde.

Het hier beschreven script is een bewerking van een script dat is te vinden op Dynamic Drive. Voor deze website is een aantal aanpassingen gedaan:

• De volgorde van de invoervelden is aangepast aan de Nederlandse situatie (Dag-maand-jaar in plaats van maand-dag-jaar).
• Alle communicatie met de gebruiker is vertaald in het Nederlands.
• De commentaarregels in het script zijn vertaald in het Nederlands.
• Nieuwe commentaarregels zijn toegevoegd.
• Een bugje in de buttons "vorige" en "volgende" in de popup-kalender is gerepareerd.
• De mogelijkheid om de kleuren van de popup-kalender in te stellen is drastisch uitgebreid (Het origineel is op dit punt nogal beperkt).
• De opmaak (tekstkleur, font) van de drie invoervelden kan eenvoudig worden ingesteld (Heel lastig in het origineel).
• Van de maanden in het tweede invoerveld worden in het originele script altijd alleen de eerste drie karakters weergegeven. In deze versie van het script kunnen ook de volledige namen worden weergegeven.

Op deze bladzijde staat het gebruik van de aangepaste versie beschreven.

• Er worden twee items besproken:
  1. Gebruik van het script op je eigen website.
  2. Mogelijke instellingen.
   
• De code staat in de file kalenderinput.js. Deze hoef je niet te veranderen om hem te kunnen gebruiken, tenzij je de opmaak van de kalender wilt aanpassen. Plaats de verwijzing naar deze code in de HEAD.
• Het script bevat een heleboel functions, waarvan alleen DateInput() voor de webdesigner interessant is.
  De function DateInput() maakt de code, reserveert geheugen en stelt de kalender beschikbaar voor de bezoeker van de web-pagina.
• De aanroep van DateInput() is vanuit de BODY. Je plaatst de aanroep op de plaats waar de kalender op de bladzijde moet verschijnen.
• DateInput() is geschreven om te worden gebruikt als onderdeel van een formulier, dus omsloten door <form>...</form>-tags. Zonder deze tags werkt DateInput() niet!
  Ook als je géén toepassing voor een formulier op je bladzijde hebt en de kalender toch wilt gebruiken moet je dus <form>...</form>-tags gebruiken.
• DateInput() maakt binnen het formulier een verborgen veld aan, waarin de gekozen datum wordt geplaatst.
  Bij een 'submit'-actie op het formulier wordt het verborgen veld meegestuurd. Zie ook het item "'Verborgen' invoervelden".
• Het is voor de werking van DateInput() niet nodig dat het formulier een name, id, of andere attributen heeft.
• Het is mogelijk om meerdere kalenders op één bladzijde te hebben. Je kunt dat in verschillende formulieren doen, maar ook binnen één formulier. Zie de beschijvingen hier onder.
   
• Van de viif parameters van de function DateInput(DateName, Required, AbbrevMonth, DateFormat, DefaultDate) mogen de laatste vier worden weggelaten.
• De onderstaande tabel beschrijft de invoer parameters:
   

  Naam	Betekenis
  DateName	Naam van het verborgen invoerveld waarin de gekozen datum wordt gezet. De waarde is een string; het moet tussen enkele of dubbele aanhalingstekens staan. Als er meerdere kalenders op dezelfde bladzijde staan moeten die allemaal een unieke waarde van DateName hebben.
  Required	Mogelijke waarden zijn "true" en "false". Als je hier "true" invult gedraagt het script zich zoals bovenaan deze bladzijde. Er wordt door DateInput() altijd een datum teruggegeven; de gebruiker kan dat niet beïnvloeden. Als je hier "false" invult wordt aan de lijst met maanden een blanco regel toegevoegd. Als de gebruiker dat kiest wordt er géén datum overgedragen, maar blijft het verborgen veld in het formulier leeg. Het script gedraagt zich ook wat anders, zie de voorbeelden verder op deze pagina.
  AbbrevMonth	Mogelijke waarden zijn "true" en "false". Als je hier "true" invult worden alleen de eerste drie karakters van de naam van de maand weergegeven in de listbox. Dat is de instelling die wordt gebruikt als deze parameter wordt weggelaten. Als je hier "false" invult worden de volledige namen van de maanden in de listbox getoond. N.B.: In de uitvoer van DateInput() wordt de naam van de maand altijd afgekort naar de eerste drie karakters.
  DateFormat	Hiermee wordt aangegeven hoe de uitvoer van DateInput() moet worden vormgegeven. De waarde is een string; het moet tussen enkele of dubbele aanhalingstekens staan. Er zijn vijf mogelijkheden: YYYYMMDD MM/DD/YYYY * DD/MM/YYYY * DD-MON-YYYY * MON-DD-YYYY * Hierin is: YYYY het jaartal; MM het maandnummer (1-12); MON de maandnaam (eerste 3 karakters, onafhankelijk van AbbrevMonth; DD de dag. Bij de mogelijkheden waar een * bij staat kan een 2-cijferige jaaraanduiding worden gebruikt, dus 05 in plaats van 2005. De waarde van Y2kPivotPoint (zie verder) bepaalt of dat jaartal in de 20e of in de 21e eeuw ligt. Als je deze waarde weglaat wordt DefaultDateFormat (zie verder)gebruikt.
  DefaultDate	Hier kun je aangeven met welke datum de kalender met beginnen. Je moet dit opgeven in hetzelfde format als DateFormat in de aanroep van DateInput(). Als je deze waarde weglaat wordt de systeemdatum gebruikt. De waarde is een string; het moet tussen enkele of dubbele aanhalingstekens staan.

   
• Merk op dat als je een parameter gebruikt, je óók de voorgaande parameters moet gebruiken. Een aanroep zoals DateInput('vandaag',,,'MM/DD/YYYY') is dus fout.
   
• De popup-kalender kan heel uitgebreid worden ingesteld. Ook aan de drie invoervelden kan het een en ander worden geregeld, zie onderstaande tabel. De variabelen staan in kalenderinput.js.
   

  Naam	Huidige waarde	Betekenis
  DefaultDateFormat	DD/MM/ YYYY	Default-instelling voor het datum formaat. Wordt gebruikt als de parameter DateFormat wordt weggelaten in de aanroep van DateInput(). Zie de beschrijving van de parameter DateFormat hierboven voor de waarden die deze parameter mag hebben.
  HideWait	3	Tijd (seconden) dat de popup blijft staan nadat deze is opgeroepen en de muis er niet boven zweeft.
  Y2kPivotPoint	76	Tweecijferige jaaraanduidingen die groter zijn dan Y2kPivotPoint worden in de twintigste eeuw geplaatst, anders in de een-en-twintigste eeuw.
  FontSize	13	Lettergrootte in de popup, in pixels (beeldpunten).
  FontFamily	Tahoma	Naam van het lettertype in de popup. In het programma wordt hier nog 'sans serif' aan toegevoegd.
  CellWidth	20	Breedte van de kolommen in de popup, in pixels.
  CellHeight	18	Hoogte van de rijen in de popup, in pixels.
  ImageURL	calendar .jpg	Plaatje, bevat icon naast de drie invoervelden. Als je dit wilt vervangen door een ander plaatje moet dat 16 × 15 pixels (width × height) zijn.
  NextURL	next .gif	Plaatje, pijltje naar rechts in de bovenbalk van de kalender. Als je dit wilt vervangen door een ander plaatje moet dat 5 × 9 pixels (width × height) zijn.
  PrevURL	prev .gif	Plaatje, pijltje naar links in de bovenbalk van de kalender. Als je dit wilt vervangen door een ander plaatje moet dat 5 × 9 pixels (width × height) zijn.
  CalBGColor	#FFFFD8	Achtergrondkleur van de kalender.
  TopRowBGColor	#0099CC	Achtergrondkleur van de kalender bovenbalk.
  TopTextColor	white	Tekstkleur in de kalender bovenbalk.
  DayBGColor	#C0C0C0	Highlighted achtergrondkleur van de gekozen dag.
  DaysTextColor	green	Tekstkleur van de dagnamen Z M D W D V Z.
  DaysRowColor	yellow	Kleur van de streep onder Z M D W D V Z.
  TableBorderColor	lime	Kleur van de rand rond de popup.
  TextNormalColor	navy	Tekstkleur van de dagnummers in de kalender.
  TextHighlightColor	red	Highlighted tekstkleur van de kalender.
  TodayMarkColor	blue	Kleur van de marker rond de systeemdatum.
  FormFontFamily	Verdana	Naam van het lettertype in de drie invoervelden. In het programma wordt hier nog 'sans serif' aan toegevoegd.
  FormFontSize	13	Lettergrootte in de drie invoervelden, in pixels.

   
• Merk op dat veel variabelen worden opgegeven als string. Dat betekent dat je er aanhalingstekens omheen moet zetten.
• De betekenis van de kleur-aanduidingen wordt uitgebreid besproken in het item "Kleurcodes voor tekst, links en achtergrond".
   
• Er is een aantal voorbeelden beschikbaar, druk op onderstaande knop:
  
  

Gebruik:

• De code staat gedeeltelijk in de <HEAD> en gedeeltelijk in de <BODY>.

De code ziet er als volgt uit:
 
(Zet dit in de <HEAD>).

<script src="kalenderinput.js">
</script>

<div align="center">
<form action="" name="Formulier1" id="Formulier1">
  <script>
    DateInput('vandaag',true,'MM/DD/YYYY',false)
  </script><p>
  <input type="button" name="alert1" id="alert1" value="Toon datum string" onClick="alert(this.form.vandaag.value)"></p>
</form>
</div>

Downloaden:
 
Druk op de knop:  File: voorb159.zip, 11 020 bytes.

Opmerking:
 
Er is ook een versie van deze kalender beschikbaar die in de pagina zelf wordt getoond. Zie het item "Maandkalender".