Datepicker per la pagina web che può consentire solo date specifiche per essere cliccati

Question

v'è un JavaScript o qualche libreria che creerebbe un datepicker per una pagina web (simile a Jquery UI DatePicker che consentono solo alcune date di essere cliccabile ed evidenziate.

Ad esempio sul lato server, potrei specificare una serie di giorni per abilitare la selezione

Answer 1

L'evento Datepicker beforeShowDay() è destinato esattamente a questo scopo. Ecco un esempio in cui il set di date consentite è relativamente piccolo per scopi illustrativi. A seconda di quanti date che hai e come vengono scelti, si potrebbe invece scrivere un metodo che le date di programmazione selezionate (dicono dal fine settimana ignorando, il 1 ° e il 15 di ogni mese, ecc). Oppure puoi combinare entrambe le tecniche, ad esempio rimuovi i fine settimana e un elenco fisso di vacanze.

$(function() { 
    // this could be a static hash, generated by the server, or loaded via ajax 
    // if via ajax, make sure to put the remaining code in a callback instead. 
    var dates_allowed = { 
      '2009-12-01': 1, 
      '2009-12-25': 1, 
      '2010-09-28': 1, 
      '2011-10-13': 1 
    }; 

    $('#datepicker').datepicker({ 
     // these aren't necessary, but if you happen to know them, why not 
     minDate: new Date(2009, 12-1, 1), 
     maxDate: new Date(2010, 9-1, 28), 

     // called for every date before it is displayed 
     beforeShowDay: function(date) { 

      // prepend values lower than 10 with 0 
      function addZero(no) { 
       if (no < 10){ 
        return "0" + no; 
       } else { 
        return no; 
       } 
      } 

      var date_str = [ 
       addZero(date.getFullYear()), 
       addZero(date.getMonth() + 1), 
       addZero(date.getDate())  
      ].join('-'); 

      if (dates_allowed[date_str]) { 
       return [true, 'good_date', 'This date is selectable']; 
      } else { 
       return [false, 'bad_date', 'This date is NOT selectable']; 
      } 
     } 
    }); 
}); 

I valori di ritorno sono

[0]: boolean selectable or not, 
[1]: CSS class names to apply if any (make sure to return '' if none), 
[2]: Tooltip text (optional) 

nota che la variabile data indicata nel callback è un'istanza di un oggetto Date che rappresenta il giorno dato, non una versione del testo di tale data nel formato specificato . Ad esempio, è possibile generare l'elenco di date consentite in un formato mentre si visualizzano le date in DatePicker in un formato diverso (ad esempio in modo da non dover trasformare le date da un DB durante la generazione della pagina).

Vedi anche Can the jQuery UI Datepicker be made to disable Saturdays and Sundays (and holidays)?

Answer 2

È possibile iniziare utilizzando jquery ui datepicker, scaricare l'ultimo pacchetto di sviluppo e lavorare da ui.datepicker.js. Vedere _generateHTML Cerca la variabile non selezionabile Se il tuo codice server può generare qualche script, potrebbe popolare alcune nuove impostazioni per estendere il selettore di date da accettare. a quell'elenco di date valide in questa riga in cui è impostato non selezionabile. Si noti che sembra che il selezionatore di date consenta date inserite da tastiera al di fuori dell'intervallo valido.

Se stai già utilizzando jQuery UI mi sarebbe probabilmente solo ignorare il prototipo _generateHTML dopo aver caricato lo script jQuery UI.

Answer 3

Forse si potrebbe estendere il DatePicker per consentire disabili/date abilitati ... Credo che si potrebbe rimuovere il gestore clicca per le date disabili, che li rende cliccabile. Quindi basta modificare il CSS per le date disabilitate e possono essere "disattivate".

Answer 4

ho fatto un app proprio come quella (data-raccoglitrice web-based con varie date proibito) utilizzando YUI Calendario e un mucchio di codice personalizzato. Detto questo, ho fatto questo prima di aver scoperto le gioie meravigliose di jQuery (e il "dio, questo non è la metà buona di jQuery, ma almeno utilizza metodi jQuery" di jQuery UI). Se dovessi farlo di nuovo, utilizzerei sicuramente l'interfaccia utente di jQuery (nonostante molti errori) come base; mescolare le librerie è più complicato che affrontare l'immaturità di jQuery UI.

Answer 5

Prova dijit.Calendar Esiste una proprietà isDisabledDate che è possibile impostare in markup o in JavaScript per una funzione. Vedi il secondo esempio. Il metodo per disabilitare le date viene chiamato per ogni giorno mentre viene reso. La funzione potrebbe fare qualcosa di simile a determinare se un modello è seguito (si tratta di un fine settimana?) O guardare in su contro alcuni tabella statica (Array) da Lei forniti dal server, come giorni di grande affluenza o le vacanze. Il metodo getClassForDate può essere sovrascritto per restituire una classe CSS.

Answer 6

Sto usando The Coolest Javascript Calendar per anni e ha la possibilità di disabilitare alcuni giorni di calendario. Basta verificarlo, lo sto usando in tutti i tipi di progetti ASP.NET.

È possibile trovare ulteriori informazioni sulle date di disattivazione here.

Answer 7

Elaborando la risposta di Rob Van Dam, ecco un esempio di codice (utilizzando jQuery UI datepicker) per il recupero delle date abilitate utilizzando AJAX. Io uso AJAX per interrogare una pagina PHP che restituisce la data abilitata da un database (perché voglio solo mostrare le date in cui ho dati reali).

L'idea è di eseguire la query AJAX ogni volta che l'utente cambia mese e quindi di memorizzare le date abilitate per questo mese in un array globale (allowedDates) che verrà utilizzato in seguito da beforeShowDay.

Ovviamente, è possibile eseguire la query AJAX in beforeShowDay, ma questo sarebbe abbastanza inefficiente a causa dell'elevato numero di query AJAX (più di 30 per ogni mese).

var allowedDates = new Object(); 

function queryAllowedDates (year, month, id) { 
    $.ajax({ 
    type: 'GET', 
    url: 'calendar_days.php', 
    dataType: 'json', 
    success: function(response) { 
     allowedDates[id] = response.allowedDates; 
    }, 
    data: {year:year,month:month}, 
    async: false 
    }); 
} 

$("#datepicker1").datepicker({ 
    dateFormat: 'dd.mm.yy', 
    changeMonth: true, 
    changeYear: true , 
    beforeShow: function (input) { 
    var currentDate = $(input).datepicker('getDate'); 
    var id = $(input).attr('id'); 
    queryAllowedDates(currentDate.getFullYear(), currentDate.getMonth()+1,id); 
    }, 
    onChangeMonthYear: function (year, month, inst) { 
    queryAllowedDates(year, month, inst.input.attr('id')); 
    }, 
    beforeShowDay: function (day) { 
    var id = $(this).attr('id'); 

    var date_str = [ 
     day.getFullYear(), 
     day.getMonth() + 1, 
     day.getDate() 
    ].join('-'); 

    if (allowedDates[id] != undefined && allowedDates[id][date_str]) { 
     return [true, 'good_date', 'This date is selectable']; 
    } else { 
     return [false, 'bad_date', 'This date is NOT selectable']; 
    } 
    } 
}); 

In questo esempio, la pagina PHP restituisce una matrice JSON contenente qualcosa come:

{"allowedDates":{"2008-12-04":1,"2008-12-11":1}}