Hoe kan ik datums ouder dan vandaag grijs maken en niet clickable in deze kalender

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Java developer met testervaring

Java developer met testervaring Functieomschrijving "De drempel tussen de burger en de Belastingdienst zo laag mogelijk houden: dat is de belangrijke taak van ons team. Dit doen we door het burgerportaal Mijn Belastingdienst continu te verbeteren." René, Java-specialist bij de Belastingdienst. De keten Interactie is een samenwerkingsverband van alle dienstonderdelen binnen de Belastingdienst. Samen zorgen we dat het contact met burgers en bedrijven goed kan plaatsvinden. Onze belangrijkste opgave? Zoveel mogelijk digitaliseren. Dat doen we binnen het onderdeel Informatievoorzieningen (IV), de ICT-organisatie van de Belastingdienst. Denk bij de producten die IV-Interactie ontwikkelt en onderhoudt aan portalen, formulieren en authenticatie- en

Bekijk vacature »

Full Stack Developer Industriële Automatiseri

Raster wordt continu betrokken bij complexe en baanbrekende projecten in industriële automatisering. Ons team is gespecialiseerd in productie automatisering en proces automatisering projecten waarin procesveiligheid een belangrijk aspect is. Ons compact en groeiend OX (Operational Excellence) team ontwikkelt, configureert en levert support op zelfontwikkelde applicaties waarmee onze klanten hun productieprocessen slimmer, sneller, goedkoper en veiliger maken. Operational Excellence wordt zichtbaar gemaakt in resultaten. Bij bedrijven met dezelfde strategie, zal een operationeel excellent bedrijf een lager operationeel risico, lagere operationele kosten hebben en relatief meer winst maken. Het Raster OX team laat haar klanten de resultaten behalen door hun eigen procesdata

Bekijk vacature »

Snelle Jaap

Snelle Jaap

07/05/2018 16:08:35
Quote Anchor link
Ik gebruik zabuto calendar om een kalender weer te geven op mijn site.

Mensen kunnen hier een datum kiezen waarop hun product afgeleverd kan worden.

Graag zou ik zien dat vandaag en ouder dan vandaag niet clickable is en grijsgekleurd, maar ik kom er niet uit.

Om de datums allemaal gelijk te maken gebruik ik moments.js , dat werkt wel prima. Ik heb ook een alert die ervoor zorgt dat datums ouder dan vandaag niet clickable zijn maar dit is niet ideaal. Liever heb ik geen alert maar gewoon een niet clickable datum.

Hoe kan ik dat voor elkaar krijgen?

Mijn code:

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
tpj(document).ready(function () {
  // Set date locale to NL
  moment.locale('nl');
  // Create calendar
  tpj("#my-calendar").zabuto_calendar({
    cell_border: true,
    today: true,
    show_days: true,
    // Execute myDateFunction when a date is clicked
    action: function ()
    {
      return myDateFunction(this.id, false);
    },
    weekstartson: 0,
    language: "nl",
    show_previous: true,
    nav_icon: {
      prev: '<i class="fa fa-chevron-circle-left"></i>',
      next: '<i class="fa fa-chevron-circle-right"></i>'
    }
  });
   // Post date through ajax and display date with PHP script that is returned
   function myDateFunction(id) {
     var date = tpj("#" + id).data("date");
     var $tijdreken = moment(date).format('YYYY-MM-DD');
     var $tijd = moment(date).format('D MMMM YYYY');
     var $vandaag = moment().format('YYYY-MM-DD');
     var bgcolor = tpj("#" + id).addClass( "activedate" );
     var $leverdatum = $tijd;
     var url = 'includes/cartoverzicht.php';

     var posting = tpj.post( url, {
       leverdatum: $leverdatum,
       date: date
     });

     if(moment($tijdreken).isSameOrBefore($vandaag)){
       alert('Kies een datum na die van vandaag');
       tpj("#" + id).removeClass( "activedate" );
       return false;
     }else{
       // Post to cartoverzicht.php
       posting.done(function( returned ) {
         tpj( "#cartresult" ).empty().append( returned );
         tpj("#my-calendar").zabuto_calendar({
           cell_border: true,
           today: true,
           show_days: true,
           action: function ()
           {
             return myDateFunction(this.id, false);
           },
           weekstartson: 0,
           language: "nl",
           show_previous: true,
           nav_icon: {
             prev: '<i class="fa fa-chevron-circle-left"></i>',
             next: '<i class="fa fa-chevron-circle-right"></i>'
           }
         });
         // Add class for clicked date
         tpj("#" + id).addClass( "activedate" );
       });
     }

   }
});


Met de documentatie van zabuto kom ik er niet uit.

Eigenlijk zou ik een array moeten hebben met alle datums tot 1 maand terug (want de zabuto kalender kan niet verder terug dan 1 maand volgens mijn instellingen) en voor elke datum moeten kijken of deze ouder is dan vandaag. Maar hoe kom ik aan zo'n array? Volgens hun documentatie lukt het me alleen om een specifieke datum op te halen na een action (click op een datum) maar eigenlijk moet ik zonder iets uit te voeren al de gehele maand in een array hebben..

Wie kan mij helpen.
Gewijzigd op 08/05/2018 10:19:43 door Snelle Jaap
 
PHP hulp

PHP hulp

18/10/2021 00:58:36
 
Thomas van den Heuvel

Thomas van den Heuvel

07/05/2018 22:25:38
Quote Anchor link
Maak van de tekst "documentatie van zabuto" ff een linkje naar de documentatie van zabuto zodat we dit niet zelf nog een keer moeten zoeken svp.

Daarbij , waarom zabuto? Volgens mij heeft bijvoorbeeld de jquery datepicker functionaliteit om bijvoorbeeld bepaalde dagen van de week of dagen van of tot een datum inactief te maken.
 
Snelle Jaap

Snelle Jaap

08/05/2018 10:29:02
Quote Anchor link
Ik heb het linkje erin gezet.

In eerste instantie koos ik voor zabuto omdat ik een kalender wilde die gelijk te zien is en niet een datepicker in een inputveld maar ik zie nu dat die jquery datepicker ook een dergelijke optie heeft.

Is een poging wagen met die jquery datepicker.
 
Jan R

Jan R

08/05/2018 18:32:13
Quote Anchor link
Waarom ook niet de <input type="date"> gebruiken? Je kan hier min en max opgeven.
 



Overzicht Reageren

 
 

Om de gebruiksvriendelijkheid van onze website en diensten te optimaliseren maken wij gebruik van cookies. Deze cookies gebruiken wij voor functionaliteiten, analytische gegevens en marketing doeleinden. U vindt meer informatie in onze privacy statement.