Datepicker pour la page Web qui ne permet de cliquer que sur des dates spécifiques

Est-il un Javascript ou une bibliothèque qui permettrait de créer un datepicker pour une page web (similaire à Jquery UI DatePicker qui ne ferait que permettre à certaines dates, pour être cliquable et mis en évidence.

Par exemple sur le côté serveur, je pourrais spécifier un tableau des jours de façon à permettre d'être sélectionné.

source d'informationauteur The Unknown

Le Datepicker beforeShowDay() l'événement est prévu pour exactement cet effet. Voici un exemple où l'ensemble des permis de dates est relativement faible, pour les fins de l'illustration. En fonction du nombre de dates que vous avez et la façon dont ils sont choisis, vous pourriez écrire une méthode de programme pour les dates sélectionnées (dire en ignorant les week-ends, le 1er et le 15 de chaque mois, etc). Ou vous pouvez combiner les deux techniques, dire supprimer les week-ends et une liste fixe de vacances.

$(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'];
            }
        }
    });
});

Les valeurs de retour sont

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

Noter que la date de la variable dans la fonction de rappel est une instance d'un objet Date, représentant le jour, pas une version texte de cette date dans le format spécifié. Ainsi, par exemple, vous pouvez générer la liste des admissibles de dates dans un format lors de l'affichage des dates dans le datepicker dans un format différent (par exemple, de sorte que vous n'avez pas à transformer les dates à partir de la base de données lors de la génération de la page).

Voir aussi Peut la de jQuery UI Datepicker être fait pour désactiver le samedi et le dimanche (et jours fériés)?

L'élaboration de Rob Van Dam réponse, voici un exemple de code (à l'aide de jQuery UI datepicker) pour aller chercher des permis à des dates à l'aide d'AJAX. J'utilise AJAX pour interroger une page PHP qui retourne la date à partir d'une base de données (parce que je ne veux dates de spectacle où j'ai données réelles).

L'idée est de faire de l'AJAX requête à chaque fois que l'utilisateur de changer le mois et ensuite de stocker les dates pour ce mois-ci dans un tableau global (allowedDates) qui est ensuite utilisée par beforeShowDay.

Bien sûr, vous pourriez faire la requête AJAX dans beforeShowDay, mais ce serait tout à fait inneficient en raison du nombre élevé de requêtes AJAX (plus de 30 pour chaque mois).

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'];
} 
}
});

Dans cet exemple, la page PHP qui retourne un tableau JSON contenant quelque chose comme :

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

3

Vous pourriez commencer par l'aide de jquery ui datepicker. Télécharger la dernière version de développement du regroupement et le travail de ui.datepicker.js. Voir _generateHTML. Recherchez la variable ne peut pas être sélectionnée. Si votre serveur de code côté pourrait générer un script - il pourrait remplir certains nouveau réglage, vous pouvez prolonger le sélecteur de date à accepter. Puis d'ajouter une case à la liste des dates de validité de cette ligne où unselectable est réglé. Notez qu'il apparaît le sélecteur de date permet aux dates d'entrée par clavier en dehors de la plage valide.

Si vous êtes déjà à l'aide de jquery ui je serais probablement juste de remplacer le _generateHTML prototype après que vous avez chargé le script jquery UI.
2

Essayer bibliothèque dijit.Calendrier Il y a un isDisabledDate propriété que vous pouvez définir dans le balisage ou en JavaScript à une fonction. Voir le deuxième exemple. La méthode pour désactiver la dates est appelée pour chaque jour qu'il sera rendu. La fonction pourrait faire quelque chose comme de déterminer si une tendance est suivie (c'est un week-end?) ou recherchez-le à l'encontre de certaines statique tableau (Array) de vous fournir à partir du serveur, comme les jours de grande affluence ou les jours fériés. Le getClassForDate méthode peut être substituée pour renvoyer une classe CSS.
0

On pourrait peut-être étendre le DatePicker pour permettre désactivé/activé dates... je crois que vous pourriez supprimer le gestionnaire de clic pour les personnes handicapées dates, les rendant unclickable. Puis il suffit de bidouiller le CSS pour les personnes handicapées dates et ils peuvent être "grisé".
0

J'ai fait une application juste comme ça (un basé sur le web date-picker avec des dates différentes interdit) à l'aide de YUI Calendrier et un tas de code personnalisé. Cela étant dit, j'ai fait ça avant, j'ai découvert les merveilleuses joies de jQuery (et le "dieu, ce n'est pas à moitié aussi bon de jQuery, mais au moins, il utilise les méthodes jQuery" de jQuery UI). Si je devais le refaire, je serais certainement utiliser jQuery UI (en dépit de ses nombreux défauts) que ma base, le mélange des bibliothèques est plus de tracas que de traiter avec jQuery UI est de l'immaturité.
0

J'ai été en utilisant Le Plus Cool Javascript Calendrier depuis des années et il a la possibilité de désactiver certains jours du calendrier. Juste check it out, je l'utilise au sein d'al sortes de ASP.NET projets.

Plus d'informations sur la désactivation des dates peuvent être trouvés ici.

Vous devez vous connecter pour publier un commentaire.