Visualizzazione dei risultati da 1 a 4 su 4
  1. #1
    Utente di HTML.it L'avatar di allin81
    Registrato dal
    Mar 2011
    Messaggi
    1,660

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

    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

  2. #2
    Moderatore di CSS L'avatar di KillerWorm
    Registrato dal
    Apr 2004
    Messaggi
    5,048
    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.
    Prima di postare considera che tra i link utili puoi trovare il 75% delle risposte alle tue domande; il 20% tra i post del forum; il 15% sul web. Ti resta... humm spè
    Le cattive domande sono quelle che non meritano risposta, le buone domande sono quelle che non hanno risposta
    L'Itailano non e nu'opnioine. E' improntate uslaro correattemtne sul froum. Garize!

    "Mi son documentato"

  3. #3
    Utente di HTML.it L'avatar di allin81
    Registrato dal
    Mar 2011
    Messaggi
    1,660
    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>

  4. #4
    Moderatore di CSS L'avatar di KillerWorm
    Registrato dal
    Apr 2004
    Messaggi
    5,048
    Bene, buon proseguimento
    Prima di postare considera che tra i link utili puoi trovare il 75% delle risposte alle tue domande; il 20% tra i post del forum; il 15% sul web. Ti resta... humm spè
    Le cattive domande sono quelle che non meritano risposta, le buone domande sono quelle che non hanno risposta
    L'Itailano non e nu'opnioine. E' improntate uslaro correattemtne sul froum. Garize!

    "Mi son documentato"

Permessi di invio

  • Non puoi inserire discussioni
  • Non puoi inserire repliche
  • Non puoi inserire allegati
  • Non puoi modificare i tuoi messaggi
  •  
Powered by vBulletin® Version 4.2.1
Copyright © 2021 vBulletin Solutions, Inc. All rights reserved.