Jquery UI datepicker. Désactiver le tableau de dates


84

J'ai essayé de chercher une solution à mon problème de datepicker de l'interface utilisateur Jquery et je n'ai pas de chance. Voici ce que j'essaye de faire ...

J'ai une application dans laquelle je fais du PHP complexe pour renvoyer un tableau JSON de dates que je veux BLOQUER hors de l'interface utilisateur Jquery Datepicker. Je retourne ce tableau:

["2013-03-14","2013-03-15","2013-03-16"]

N'y a-t-il pas un moyen simple de dire simplement: bloquer ces dates dans le sélecteur de date?

J'ai lu la documentation de l'interface utilisateur et je ne vois rien qui m'aide. Quelqu'un a des idées?






Quelqu'un peut-il me signaler des questions similaires mais en utilisant le sélecteur de date de Materialise?
naz786

Réponses:


208

Vous pouvez utiliser beforeShowDay pour ce faire

L'exemple suivant désactive les dates du 14 mars 2013 au 16 mars 2013

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

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

Démo: Fiddle


1
JE VEUX voir où vous allez avec ça. Comment pourrais-je incorporer ma gamme de dates.
Daniel White

14
SENSATIONNEL. Vous êtes un freaking génie bro. Je ne sais pas pourquoi ce n'est pas déjà dans les messages de débordement de pile pour cette question car elle a été posée un million de fois. Tous les exemples postés ci-dessus sont trop compliqués, c'est sympa et simple. 5 étoiles. Merci.
Daniel White

J'ai téléchargé le code jqueryui.com/download/ ... mais lorsque j'intègre le code ci-dessus, son aide ne fonctionne pas
Sam

Un vote positif ne suffit pas. Certaines personnes rendent les choses bien plus compliquées qu'elles ne devraient l'être. Merci beaucoup pour cet extrait de code simple et fonctionnel. Très utile.
0112

4
Si vous souhaitez également exclure les week-ends en plus de ces dates personnalisées, remplacez la ligne de retour par ceci:return array.indexOf(string) != -1 ? [false] : $.datepicker.noWeekends(date);
Pablo SG Pacheco

20

IE 8 n'a pas de fonction indexOf, j'ai donc utilisé jQuery inArray à la place.

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

6
@ChristopherStrydom vous seriez surpris du nombre de personnes qui l'utilisent encore.
euther

3
En effet, IE8 est le dernier navigateur IE qui fonctionnera sous WinXP (SP3).
JosephK

Il prend cependant en charge la fonction indexOf () sur une chaîne pour trouver la position d'une sous-chaîne dans cette chaîne.
Wezy

9

Si vous souhaitez également bloquer les dimanches (ou autres jours) ainsi que le tableau des dates, j'utilise ce code:

jQuery(function($){

    var disabledDays = [
       "27-4-2016", "25-12-2016", "26-12-2016",
       "4-4-2017", "5-4-2017", "6-4-2017", "6-4-2016", "7-4-2017", "8-4-2017", "9-4-2017"
    ];

   //replace these with the id's of your datepickers
   $("#id-of-first-datepicker,#id-of-second-datepicker").datepicker({
      beforeShowDay: function(date){
         var day = date.getDay();
         var string = jQuery.datepicker.formatDate('d-m-yy', date);
         var isDisabled = ($.inArray(string, disabledDays) != -1);

         //day != 0 disables all Sundays
         return [day != 0 && !isDisabled];
      }
   });
});   

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

1

beforeShowDate n'a pas fonctionné pour moi, alors j'ai développé ma propre solution:

$('#embeded_calendar').datepicker({
               minDate: date,
                localToday:datePlusOne,
               changeDate: true,
               changeMonth: true,
               changeYear: true,
               yearRange: "-120:+1",
               onSelect: function(selectedDateFormatted){

                     var selectedDate = $("#embeded_calendar").datepicker('getDate');

                    deactivateDates(selectedDate);
                   }

           });


              var excludedDates = [ "10-20-2017","10-21-2016", "11-21-2016"];

              deactivateDates(new Date());

            function deactivateDates(selectedDate){
                setTimeout(function(){ 
                      var thisMonthExcludedDates = thisMonthDates(selectedDate);
                      thisMonthExcludedDates = getDaysfromDate(thisMonthExcludedDates);
                       var excludedTDs = page.find('td[data-handler="selectDay"]').filter(function(){
                           return $.inArray( $(this).text(), thisMonthExcludedDates) >= 0
                       });

                       excludedTDs.unbind('click').addClass('ui-datepicker-unselectable');
                   }, 10);
            }

            function thisMonthDates(date){
              return $.grep( excludedDates, function( n){
                var dateParts = n.split("-");
                return dateParts[0] == date.getMonth() + 1  && dateParts[2] == date.getYear() + 1900;
            });
            }

            function getDaysfromDate(datesArray){
                  return  $.map( datesArray, function( n){
                    return n.split("-")[1]; 
                });
             }

Pouvons-nous faire la même chose sur dateRangePicker ??
Sunil Rawat

1

Pour JJ-MM-AA, utilisez ce code:

var array = ["03-03-2017 ', '03 -10-2017', '03 -25-2017"]

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

function highlightDays(date) {
    for (var i = 0; i < dates.length; i++) {
    if (new Date(dates[i]).toString() == date.toString()) {
        return [true, 'highlight'];
    }
}
return [true, ''];
}

Est-il possible pour daterangepicker, je veux désactiver un tableau de dates sur date-range-picker ??
Sunil Rawat

Pouvez-vous définir votre question?
Dierig Patrick

J'ai un sélecteur de plage de dates: 01/01/2017 - 31/03/2017. Je veux mettre en évidence certaines dates d'un tableau de dates personnalisées entre cette plage. sur le calendrier à plage de dates. $ dates = ['02 /01/2017','03/01/2017'...jusqu'à] ces dates. est-ce possible?
Sunil Rawat

comme dans datepicker, nous pouvons utiliser: la fonction beforeShowDay à cette fin, ce qui est là dans le sélecteur de plage de dates
Sunil Rawat

1

Si vous souhaitez désactiver des dates particulières dans jquery datepicker, voici la démo simple pour vous.

<script type="text/javascript">
    var arrDisabledDates = {};
    arrDisabledDates[new Date("08/28/2017")] = new Date("08/28/2017");
    arrDisabledDates[new Date("12/23/2017")] = new Date("12/23/2017");
    $(".datepicker").datepicker({
        dateFormat: "dd/mm/yy",
        beforeShowDay: function (date) {
            var day = date.getDay(),
                    bDisable = arrDisabledDates[date];
            if (bDisable)
                return [false, "", ""]
        }
    });
</script>
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.