web-dev-qa-db-fra.com

Désactiver / Activer la plage de dates sélectionnée sur l'interface utilisateur jQuery datepicker

J'ai donc la démo suivante http://dev.driz.co.uk/week.html qui montre un sélecteur de date jQuery UI qui a plusieurs instances pour chaque mois de l'année.

Je l'ai modifié pour que l'utilisateur sélectionne des semaines entières, puis les dates de début et de fin de ces semaines sont stockées dans la barre latérale droite avec un numéro de semaine.

Ce que je veux faire, c'est désactiver les dates une fois que l'utilisateur les a sélectionnées afin qu'elles puissent voir sur le sélecteur de calendrier quelles dates ont été sélectionnées (et également les empêcher d'ajouter la même plage de dates plus d'une fois).

Cependant, je ne sais pas par où commencer ... J'ai créé des fonctions d'activation et de désactivation de la date, mais je ne sais pas comment désactiver les dates à l'aide de la méthode beforeShowDay.

Par exemple:

var array = ["2013-03-14","2013-03-15","2013-03-16"]

$('.week-picker').datepicker({
    beforeShowDay: function(date){
        var string = jQuery.datepicker.formatDate('yy-mm-dd', date);
        return [ array.indexOf(string) == -1 ]
    }
});

Mais comment désactiver une plage de dates? Comme je n'ai que les dates de début et de fin. Et puis-je appeler le beforeShowDay APRÈS le sélecteur de date est sur la page comme dans mon exemple? ET comment puis-je réactiver les dates?

Voici le code:

$(function() {

    var startDate;
    var endDate;

    var selectCurrentWeek = function() {
        window.setTimeout(function () {
            $('.week-picker').find('.ui-datepicker-current-day a').addClass('ui-state-active');
        }, 1);
    }

    $('.week-picker').datepicker( {
        defaultDate: '01/01/2014',
        minDate: '01/01/2013',
        maxDate: '01/01/2015',
        changeMonth: false,
        changeYear: true,
        showWeek: true,
        showOtherMonths: true,
        selectOtherMonths: true,
        numberOfMonths: 12,
        onSelect: function(dateText, inst) { 
            var date = $(this).datepicker('getDate');
            startDate = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay());
            endDate = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay() + 6);
            var dateFormat = inst.settings.dateFormat || $.datepicker._defaults.dateFormat;

            addWeek($.datepicker.iso8601Week(new Date(dateText)), $.datepicker.formatDate( dateFormat, startDate, inst.settings ), $.datepicker.formatDate( dateFormat, endDate, inst.settings ));

            disableDates( $.datepicker.formatDate( dateFormat, startDate, inst.settings ), $.datepicker.formatDate( dateFormat, endDate, inst.settings ));

            selectCurrentWeek();
        },
        beforeShowDay: function(date) {
            var cssClass = '';
            if(date >= startDate && date <= endDate)
                cssClass = 'ui-datepicker-current-day';
            return [true, cssClass];
        },
        onChangeMonthYear: function(year, month, inst) {
            selectCurrentWeek();
        }
    });

    $('.week-picker .ui-datepicker-calendar tr').live('mousemove', function() { $(this).find('td a').addClass('ui-state-hover'); });
    $('.week-picker .ui-datepicker-calendar tr').live('mouseleave', function() { $(this).find('td a').removeClass('ui-state-hover'); });

    $('.remove').live('click', function(e){

        enableDates($(this).attr('data-startdate'), $(this).attr('data-enddate'));

        $(this).parent('div').remove();
    });

});

// adds the week to the sidebar
function addWeek(weekNum, startDate, endDate){

    $('.weeks-chosen').append('<div data-startdate="'+startDate+'" data-enddate="'+endDate+'"><span class="weekNum">Week '+ (weekNum - 1) +'</span> - <span class="startDate">'+startDate+'</span> - <span class="endDate">'+endDate+'</span> | <span class="remove">X Remove</span></div>');

}

// disable the dates on the calendar
function disableDates(startDate, endDate){


}

// enable the dates on the calendar
function enableDates(startDate, endDate){


}

En bref, il y a deux questions ici ... Comment puis-je désactiver les dates APRÈS que le sélecteur de date soit ajouté à la page. Et deuxièmement, comment désactiver une plage entre deux dates, car il semble que la méthode beforeShowDay attend un tableau de dates plutôt qu'une plage.

javascriptjqueryjquery-uidatepicker
9
Cameron

Mais comment désactiver une plage de dates? Comme je n'ai que les dates de début et de fin.

Une façon pourrait être de créer un tableau de dates en fonction des dates de début et de fin que vous avez. Utilisez ce tableau dans beforeShowDay pour désactiver la plage.

Démo: http://jsfiddle.net/abhitalks/FAt66/1/

Par exemple, les parties pertinentes de JS:

var startDate = "2014-06-15", // some start date
    endDate  = "2014-06-21",  // some end date
    dateRange = [];           // array to hold the range

// populate the array
for (var d = new Date(startDate); d <= new Date(endDate); d.setDate(d.getDate() + 1)) {
    dateRange.Push($.datepicker.formatDate('yy-mm-dd', d));
}

// use this array 
beforeShowDay: function (date) {
    var dateString = jQuery.datepicker.formatDate('yy-mm-dd', date);
    return [dateRange.indexOf(dateString) == -1];
}

Maintenant, vous pouvez définir startDate et endDate chaque fois qu'une date est sélectionnée. Dans l'exemple de violon que j'ai lié à ci-dessus, les dates de début et de fin sont définies chaque fois qu'une date est sélectionnée dans les deux entrées supérieures. Le tableau de données est rempli lorsque la date est sélectionnée dans la deuxième entrée.

Remarque : l'exemple ci-dessus est additif, c'est-à-dire que chaque fois que vous sélectionnez une nouvelle plage, elle est ajoutée en tant que dates désactivées dans la cible. Si vous souhaitez effacer la plage désactivée existante avant de spécifier une nouvelle plage, vous pouvez alors faire un destroy et rattacher le sélecteur de date. (Et aussi réinitialiser le tableau dateRange)

Démo 2: http://jsfiddle.net/abhitalks/FAt66/3/

Partie pertinente de JS:

$("#dt").datepicker("destroy");
$("#dt").datepicker({ 
    dateFormat : 'yy-mm-dd',
    beforeShowDay: disableDates
});

var disableDates = function(dt) {
    var dateString = jQuery.datepicker.formatDate('yy-mm-dd', dt);
    return [dateRange.indexOf(dateString) == -1];
}

En regardant votre code actuel, tout ce dont vous avez besoin est le suivant:

onSelect: function(dateText, inst) { 
    var date = $(this).datepicker('getDate');
    startDate = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay());
    endDate = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay() + 6);
    var dateFormat = inst.settings.dateFormat || $.datepicker._defaults.dateFormat;

    addWeek($.datepicker.iso8601Week(new Date(dateText)), $.datepicker.formatDate( dateFormat, startDate, inst.settings ), $.datepicker.formatDate( dateFormat, endDate, inst.settings ));

    for (var d = new Date(startDate);
        d <= new Date(endDate);
        d.setDate(d.getDate() + 1)) {
            dateRange.Push($.datepicker.formatDate('dd/mm/yyyy', d));
    }

    selectCurrentWeek();
},
beforeShowDay: disableDates,
    ...

Cela continuera à ajouter les plages de dates nouvellement sélectionnées au tableau et continuera à désactiver. Mais, soyez averti que vous aurez besoin d'une voie d'évacuation lorsqu'une semaine déjà sélectionnée est supprimée. Dans ce cas, vous pouvez travailler avec plusieurs baies qui peuvent être fusionnées en une seule matrice principale.

14
Abhitalks

S'il est nécessaire de désactiver une liste de dates ou comme dans tout type de réservation de projets où nous devons désactiver certaines dates tout au long du processus. Vous pouvez donc utiliser le code suivant,

$(function() {
    //This array containes all the disabled array
      datesToBeDisabled = ["2019-03-25", "2019-03-28"];

        $("#datepicker").datepicker({
          changeMonth: true,
          changeYear: true,
          minDate : 0,
          todayHighlight: 1,
          beforeShowDay: function (date) {
              var dateStr = jQuery.datepicker.formatDate('yy-mm-dd', date);
                  return [datesToBeDisabled.indexOf(dateStr) == -1];
          },

        });
});
0
S Debasish Nayak