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

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Technisch Ontwerper / Applicatie Ontwikkelaar

Technisch Ontwerper / Applicatie Ontwikkelaar Actief Wat ga je doen? Als Technisch Ontwerper / Applicatie Ontwikkelaar kom je te werken bij onze gerenommeerde klanten op projecten of opdrachten van omvang en formaat. Je bent verantwoordelijk voor het omzetten van functionele specificaties naar een technisch ontwerp, het ontwerp van programmaspecificaties voor toepassingen, de realisatie van (gewijzigde) programmaonderdelen en databestanden van toepassingen en de technische systeemtest van applicatietoepassingen. Daarnaast geef je vorm aan webpagina’s en applicaties, stel je gebruikersdocumentatie op en verleen je ondersteuning bij het oplossen van productiefouten. Tevens ben je verantwoordelijk voor het samenstellen en onderhouden van de applicatie c.q.

Bekijk vacature »

Senior DevOps-ontwikkelaar eIDAS

Functie­omschrijving Burgers en bedrijven veilig en betrouwbaar digitaal toegang geven tot diensten en producten van het ministerie van Economische Zaken en Klimaat. Als senior DevOps-ontwikkelaar bouw je daar letterlijk aan mee. En dat doe je bij DICTU: een van de grootste en meest vooruitstrevende ICT-dienstverleners van de Rijksoverheid. Jij werkt mee aan de doorontwikkeling van eIDAS, dat staat voor Electronic IDentification Authentication and trust Services. Deze koppeling maakt de grensoverschrijdende authenticatie op overheidswebsites binnen de Europese Unie mogelijk. Het ministerie van Economische Zaken en Klimaat heeft één moderne toegangspoort voor zijn diensten en inspecties. Enkele daarvan zijn dankzij eIDAS inmiddels

Bekijk vacature »

Technisch Ontwerper / Applicatie Ontwikkelaar

Technisch Ontwerper / Applicatie Ontwikkelaar Actief Wat ga je doen? Als Technisch Ontwerper / Applicatie Ontwikkelaar kom je te werken bij onze gerenommeerde klanten op projecten of opdrachten van omvang en formaat. Je bent verantwoordelijk voor het omzetten van functionele specificaties naar een technisch ontwerp, het ontwerp van programmaspecificaties voor toepassingen, de realisatie van (gewijzigde) programmaonderdelen en databestanden van toepassingen en de technische systeemtest van applicatietoepassingen. Daarnaast geef je vorm aan webpagina’s en applicaties, stel je gebruikersdocumentatie op en verleen je ondersteuning bij het oplossen van productiefouten. Tevens ben je verantwoordelijk voor het samenstellen en onderhouden van de applicatie c.q.

Bekijk vacature »

Technisch Ontwerper / Applicatie Ontwikkelaar

Technisch Ontwerper / Applicatie Ontwikkelaar Actief Wat ga je doen? Als Technisch Ontwerper / Applicatie Ontwikkelaar kom je te werken bij onze gerenommeerde klanten op projecten of opdrachten van omvang en formaat. Je bent verantwoordelijk voor het omzetten van functionele specificaties naar een technisch ontwerp, het ontwerp van programmaspecificaties voor toepassingen, de realisatie van (gewijzigde) programmaonderdelen en databestanden van toepassingen en de technische systeemtest van applicatietoepassingen. Daarnaast geef je vorm aan webpagina’s en applicaties, stel je gebruikersdocumentatie op en verleen je ondersteuning bij het oplossen van productiefouten. Tevens ben je verantwoordelijk voor het samenstellen en onderhouden van de applicatie c.q.

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

26/09/2020 00:04:23
 
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.