Nascondere i giorni in jQuery UI Datepicker

Mattepuffo's logo
Nascondere i giorni in jQuery UI Datepicker

Nascondere i giorni in jQuery UI Datepicker

jQuery UI Datepicker fa parte del framework jQuery UI e in pratica è un calendario da piazzare in una textbox o in div se volete fisso e non a comparsa.

Per questo esempio, che prendo da un caso reale di un sito che sto sviluppando, lo metteremo in un div:

<div id="datepicker_wizard"></div>

Un div vuoto nel quale impostate un id.

Quello che vogliamo fare è nascondere determinati giorni (Lunedì, Venerdì, Domenica.....); nello specifico li prenderemo da database e dovranno avere questo formato:

var arrGiorniEscludere = ["Domenica","Giovedi","Venerdi"];

Li prendiamo da db perchè è più facile come scenario; ad esempio nel mio caso non è possibile effettuare prenotazioni nei ristoranti in determinati giorni, e questi giorni li prendo da db.

Avremo quindi bisogno di una pagina PHP che effettua la query e che dentro ha una funzione JS che prende il risultato e lo usa.

Poi vi accorgerete del perchè mettiamo tutto in una pagina.

Create quindi il file PHP ed in alto predisponete il tutto per effettuare la query.

Vi posto il mio esempio per farvi vedere in che formato deve essere rappresentato il risultato:

<?php
$dayEsc = '';
foreach ($conn->vostraFunzionePerLaQuery() as $var) {
    $dayEsc .= '"' . $var['giorno'] . '",';
}
?>

La parte in PHP è tutta qua; ripeto che qua la cosa importante è il formato del risultato, la connessione e relativa query la potete fare come volete.

Adesso passiamo alla funzione in Javascript, che deve poi essere richiamata in apertura di pagina:

<script type="text/javascript">
    function datePickerWizard() {
        var arrGiorniEscludere = [<?php echo $dayEsc; ?>];
        var arrGiorniSettimana = ["Domenica","Lunedi","Martedi","Mercoledi","Giovedi","Venerdi","Sabato"];
        $('#datepicker_wizard').datepicker({
            beforeShowDay: function(date){
                return [$.inArray(arrGiorniSettimana[date.getDay()],arrGiorniEscludere) == -1,""];
            }
        });
    }
</script>

La variabile arrGiorniEscludere è un array che si valorizza con l'output della query.

Poi inizializiamo il Datepicker chiamando l'evento beforeShowDay; qui dentro controlliamo i giorni che restituisce la query con quelli della settimana.

Se tutto è ok dovremo ritrovarci con le colonne dei giorni oscurate.

Ricordo che così facendo escludiamo interi giorni: Lunedì, Giovedì,......

Può sembrare complicato, ma non lo è così tanto.

Dovete stare attenti alla query visto che non ho molto specificato.


Condividi

Commentami!