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

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

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

28/03/2024 21:53:09
 
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.