web-dev-qa-db-fra.com

jQuery datepicker pour éviter la date passée

Comment désactiver les dates passées sur jQuery datepicker? J'ai cherché des options, mais rien ne semble indiquer la possibilité de désactiver les dates antérieures. 

UPDATE: Merci à vous tous pour cette réponse rapide. J'ai essayé ça sans chance. Les jours n'étaient toujours pas grisés comme prévu et j'accepte toujours la date passée sélectionnée. 

J'ai essayé ceci:

$('#datepicker').datepicker({ minDate: '0' });

Ça ne marche pas.

J'ai essayé ceci:

$('#datepicker').datepicker({ minDate: new Date() });

Ne fonctionne toujours pas non plus. 

Il affiche le widget de calendrier très bien. Cela ne va tout simplement pas griser ou empêcher la saisie des jours passés. J'ai déjà essayé minDate et maxDate sans aucune chance, alors je me suis dit que ce ne devait pas être eux. 

javascriptjqueryjquery-uidatedatepicker
73
netrox

Essaye ça:

$("#datepicker").datepicker({ minDate: 0 });

Supprimez les guillemets de 0.

136
Khawar

Vous devez simplement spécifier une date minimale - la définir sur 0 signifie que la date minimale est 0 jour à compter d’aujourd’hui, c’est-à-dire aujourd’hui. Vous pouvez passer la chaîne '0d' à la place (l'unité par défaut est le nombre de jours).

$(function () {
    $('#date').datepicker({ minDate: 0 });
});
34
Russ Cam

Supprimez les guillemets entourant 0 et cela fonctionnera.

Extrait de code de travail: 

// set minDate to 0 for today's date
$('#datepicker').datepicker({ minDate: 0 });
body {
    font-size: 12px; /* just so that it doesn't default to 16px (which is kinda huge) */
}
<!-- load jQuery and jQuery UI -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>

<!-- load jQuery UI CSS theme -->
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">

<!-- the datepicker input -->
<input type='text' id='datepicker' placeholder='Select date' />

23
Rahul Desai

Si vous avez affaire à un sélecteur de date lié précédemment, définissez

$("#datepicker").datepicker({ minDate: 0 });

ne fonctionnera pas. Cette syntaxe n'est applicable que lorsque vous créez le widget.

Pour définir la date minimale pour un sélecteur de date lié, utilisez les éléments suivants:

$("#datePicker").datepicker("option", "minDate", 0);
23
Noel Abrahams

Utilisez l'option minDate pour définir la date minimale possible . http://jqueryui.com/demos/datepicker/#option-minDate

14
Bill

Donnez zéro à mindate et il désactivera les dates passées.

$( "#datepicker" ).datepicker({ minDate: 0});

Exemple live

lisez plus ici

10
Sonu Sindhu

Cela marche:

$("#datepicker").datepicker({ minDate: +0 });
9
Anwasha Dhar

// désactiver les dates futures

$('#datetimepicker1').datetimepicker({
            format: 'DD-MM-YYYY',
            maxDate: new Date
        });

// désactiver les dates passées

 $('#datetimepicker2').datetimepicker({
        format: 'DD-MM-YYYY',
        minDate: new Date
    });
7
Anto

$("#datePicker").datePicker({startDate: new Date() });. Cela fonctionne pour moi

5
Akhil Yadav

J'utilise le code suivant pour formater la date et afficher 2 mois dans le calendrier ...

<script>
$(function() {

    var dates = $( "#from, #to" ).datepicker({

        showOn: "button",
        buttonImage: "imgs/calendar-month.png",
        buttonImageOnly: true,                           
        defaultDate: "+1w",
        changeMonth: true,
        numberOfMonths: 2,

        onSelect: function( selectedDate ) {




            $( ".selector" ).datepicker({ defaultDate: +7 });
            var option = this.id == "from" ? "minDate" : "maxDate",


                instance = $( this ).data( "datepicker" ),
                date = $.datepicker.parseDate(
                    instance.settings.dateFormat ||
                    $.datepicker._defaults.dateFormat,
                    selectedDate, instance.settings );

            dates.not( this ).datepicker( "option", "dateFormat", 'yy-mm-dd' );


        }
    });
});

</script>

Le problème est que je ne sais pas comment limiter la sélection de dates précédentes.

2
HeySingapore

Assurez-vous de mettre plusieurs propriétés dans la même ligne (puisque vous n’avez montré qu’une ligne de code, vous avez peut-être eu le même problème que moi).

Le mien définirait la date par défaut, mais n'a pas grisé les anciennes dates. Cela ne marche pas:

$('#date_end').datepicker({ defaultDate: +31 })
$('#date_end').datepicker({ minDate: 1 })

Cela fait à la fois:

$('#date_end').datepicker({ defaultDate: +31, minDate: 1 })

1 et +1 fonctionnent de la même manière (ou 0 et +0 dans votre cas).

Moi: Windows 7 x64, Rails 3.2.3, Ruby 1.9.3

1
Ed Birm
var givenStartDate = $('#startDate').val();
        alert('START DATE'+givenStartDate);
        var givenEndDate = $('#endDate').val();
        alert('END DATE'+givenEndDate);
        var date = new Date();
        var month = date.getMonth()+1;
        var day = date.getDate();
        var currentDate = date.getFullYear() + '-' +
            (month<10 ? '0' : '') + month + '-' +
            (day<10 ? '0' : '') + day;
        if(givenStartDate < currentDate || givenEndDate < currentDate)
         { 
        $("#updateButton").attr("disabled","disabled"); 
         }
         if(givenStartDate < currentDate && givenEndDate > currentDate)
            {
            $("#updateButton").attr("enabled","enabled");
            }
         if(givenStartDate > currentDate || givenEndDate > currentDate) { 
        $("#updateButton").attr("enabled","enabled"); 
         }

Essaye ça. En cas d'erreur, corrigez-moi s'il vous plaît :) Merci à tous.

1
MeowRude

Essayez de définir startDate à la date actuelle. Par exemple:

$('.date-pick').datePicker({startDate:'01/01/1996'});
0
user217467

J'ai utilisé l'attribut min: min="' + (new Date()).toISOString().substring(0,10) + '"

Voici mon code et cela a fonctionné. 

<input type="date" min="' + (new Date()).toISOString().substring(0,10) + '" id="' + invdateId + '" value="' + d.Invoice.Invoice_Date__c + '"/>

 enter image description here

0
Louis HM