datepicker jquery: come rendere cliccabili solo i giorni che indico in un pannello di controllo?

**allin81** · 16-11-2021, 21:06

Salve a tutti

vorrei utilizzare un calendario di jquery e rendere cliccabili solo i giorni che indico io.
Le date in questione le inserisco tramite un pannello di controllo in php in un database mysql
Come potrei fare?

Esiste qualche esempio che mi possa aiutare a fare questa cosa?

Al momento, invece del calendario, sto utilizzando una select che mostra in ordine cronologico tutte le date disponibili

In questo link inserisco una immagine per rendere meglio l'idea di quello che vorrei fare

https://pasteboard.co/ukvWjXBtVMo5.gif

Grazie

**KillerWorm** · 16-11-2021, 23:41

Ciao, puoi usare l'opzione beforeShowDay() per definire quali date rendere cliccabili e quali no.

La serie di date da considerare dovresti magari passarla al JavaScript in qualche modo, ad esempio sotto forma di array.
A quel punto, dentro la funzione definita per beforeShowDay(), vai a verificare se la data corrente è contenuta dentro l'array.

Potrebbe essere una cosa del genere:

codice:

var arrDateConsentite = [
   '21/11/2021'
  ,'28/11/2021'
  ,'05/12/2021'
  ,'12/12/2021'
  ,'19/12/2021'
  ,'09/01/2022'
  ,'16/01/2022'
  ,'23/01/2022'
  ,'06/02/2022'
  ,'13/02/2022'
  ,'20/02/2022'
  ,'27/02/2022'
]
$('#datepicker').datepicker({
   minDate: new Date()
  ,beforeShowDay: function(d) {
    var disponibile = arrDateConsentite.includes(
      ('0'+d.getDate()).slice(-2)+'/'
      +('0'+(d.getMonth()+1)).slice(-2)+'/'
      +d.getFullYear()
    )
    return [
       disponibile
      // Aggiungi le seguenti righe per definire classi e tooltip personalizzati
      //,(disponibile ? 'data-dispo' : 'data-no-dispo')
      //,(disponibile ? 'Data disponibile' : 'Data non disponibile')
    ]
  }
});

.
Vedi se può funzionare, fai sapere.

**allin81** · 17-11-2021, 12:49

spettacolo, funziona alla grande, ancora non ho fatto l'estrazione dal database, ho inserito le date fisse ma funziona, ecco il tuo esempio messo in una pagina completa, magari può servire a qualcuno

codice:

<!doctype html>
<html lang="it">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Datepicker con date personalizzate</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.13.0/themes/redmond/jquery-ui.css">
  <link rel="stylesheet" href="/resources/demos/style.css">
  <script src="https://code.jquery.com/jquery-3.6.0.js"></script>
  <script src="https://code.jquery.com/ui/1.13.0/jquery-ui.js"></script>
  <script>
  var arrDateConsentite = [
    '21/11/2021',
    '25/11/2021',
    '28/11/2021',
    '01/12/2021',
    '05/12/2021',
    '09/12/2021',
    '16/12/2021',
    '18/12/2021',
    '25/12/2021',
    '31/12/2021',
    '02/01/2022',
    '06/01/2022',
    '05/04/2022',
  ]
    $( function() {
      $( "#datepicker" ).datepicker({
        numberOfMonths: 1,
        minDate: +0,
        dateFormat: 'dd/mm/yy',
    		firstDay: 1,
        beforeShowDay: function(d) {
    var disponibile = arrDateConsentite.includes(
      ('0'+d.getDate()).slice(-2)+'/'
      +('0'+(d.getMonth()+1)).slice(-2)+'/'
      +d.getFullYear()
    )
    return [
       disponibile
      // Aggiungi le seguenti righe per definire classi e tooltip personalizzati
      //,(disponibile ? 'data-dispo' : 'data-no-dispo')
      //,(disponibile ? 'Data disponibile' : 'Data non disponibile')
    ]
  }
      });
    } );
    </script>
</head>
<body>
<p>Scegli la data: <input type="text" id="datepicker"></p>
</body>
</html>

**KillerWorm** · 17-11-2021, 14:29

Bene, buon proseguimento

Discussione: datepicker jquery: come rendere cliccabili solo i giorni che indico in un pannello di controllo?

Strumenti discussione

Ricerca discussione

Visualizza

datepicker jquery: come rendere cliccabili solo i giorni che indico in un pannello di controllo?

Permessi di invio