jQuery Date Picker - désactiver les dates passées


89

J'essaie de sélectionner une plage de dates à l'aide du sélecteur de dates de l'interface utilisateur.

dans le champ de / à, les personnes ne doivent pas pouvoir afficher ou sélectionner des dates antérieures à aujourd'hui.

Voici mon code:

$(function() {
    var dates = $( "#from, #to" ).datepicker({
        defaultDate: "+1w",
        changeMonth: true,
        numberOfMonths: 1,
        onSelect: function( selectedDate ) {
            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", option, date );
        }
    });
});

Quelqu'un peut-il me dire comment désactiver les dates antérieures à la date actuelle.

Réponses:


112

Vous devez créer un nouvel objet de date et le définir comme minDatelorsque vous initialisez les sélecteurs de date

<label for="from">From</label> <input type="text" id="from" name="from"/> <label for="to">to</label> <input type="text" id="to" name="to"/>

var dateToday = new Date();
var dates = $("#from, #to").datepicker({
    defaultDate: "+1w",
    changeMonth: true,
    numberOfMonths: 3,
    minDate: dateToday,
    onSelect: function(selectedDate) {
        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", option, date);
    }
});

Modifier - à partir de votre commentaire, cela fonctionne maintenant comme prévu http://jsfiddle.net/nicolapeluchetti/dAyzq/1/


2
Je veux mettre en œuvre une manière que les gens ne devraient pas être en mesure de choisir une date qui a été passée .. comme hier, avant, etc. Seulement à partir d'aujourd'hui et en avant.
Harsha MV

1
@HarshaMV j'ai mis à jour ma réponse, vous devriez simplement définir minDate lorsque vous initialisez les sélecteurs de date
Nicola Peluchetti

Vous pouvez ajouter showAnim:"",aux paramètres de datepicker pour supprimer le changement de mois et d'année ennuyeux lorsque vous faites votre sélection.
Misiu

J'ai utilisé votre script, mais j'obtiens l'erreur "Uncaught ReferenceError: $ is not defined". comment vais-je résoudre ce problème?
mable george

@NicolaPeluchetti C'est exactement ce dont j'ai besoin, mais cela peut-il être utilisé dans asp: Textbox? J'ai essayé mais ça ne fonctionne pas, y a-t-il des changements spécifiques que je devrais faire? Merci d'avance
wolfQueen

74

Déclarez la variable dateToday et utilisez la fonction Date () pour la définir .. puis utilisez cette variable pour l'assigner à minDate qui est le paramètre de datepicker.

var dateToday = new Date(); 
$(function() {
    $( "#datepicker" ).datepicker({
        numberOfMonths: 3,
        showButtonPanel: true,
        minDate: dateToday
    });
});

C'est tout ... La réponse ci-dessus était vraiment utile ... continuez comme ça les gars ...


Réponse claire et directe .. Merci
ASD

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

minDate:0 travaille pour moi.


20

Utilisez l'option "minDate" pour limiter la date autorisée la plus ancienne. La valeur "0" signifie aujourd'hui (0 jour à compter d'aujourd'hui):

    $(document).ready(function () {
        $("#txtdate").datepicker({
            minDate: 0,
            // ...
        });
    });

Docs ici: http://api.jqueryui.com/datepicker/#option-minDate


8

Juste pour ajouter à ceci:

Si vous devez également empêcher l'utilisateur de saisir manuellement une date dans le passé, c'est une solution possible. C'est ce que nous avons fini par faire (basé sur la réponse de @Nicola Peluchetti)

var dateToday = new Date();

$("#myDatePickerInput").change(function () {
    var updatedDate = $(this).val();
    var instance = $(this).data("datepicker");
    var date = $.datepicker.parseDate(instance.settings.dateFormat || $.datepicker._defaults.dateFormat, updatedDate, instance.settings);

    if (date < dateToday) {
        $(this).datepicker("setDate", dateToday);
    }
});

Cela change la valeur de la date du jour si l'utilisateur tape manuellement une date dans le passé.


6

Démo en direct , essayez ceci,

    $('#from').datepicker(
     { 
        minDate: 0,
        beforeShow: function() {
        $(this).datepicker('option', 'maxDate', $('#to').val());
      }
   });
  $('#to').datepicker(
     {
        defaultDate: "+1w",
        beforeShow: function() {
        $(this).datepicker('option', 'minDate', $('#from').val());
        if ($('#from').val() === '') $(this).datepicker('option', 'minDate', 0);                             
     }
   });

5

C'est un moyen facile de le faire

$('#datepicker').datepicker('setStartDate', new Date());

nous pouvons également désactiver les jours futurs

$('#datepicker').datepicker('setEndDate', new Date());

1
Je vous remercie! Vous avez arrêté des heures de frustration.
lmiguelvargasf

4

définir l'attribut startDate de datepicker, cela fonctionne, voici le code de travail

$(function(){
$('#datepicker').datepicker({
    startDate: '-0m'
    //endDate: '+2d'
}).on('changeDate', function(ev){
    $('#sDate1').text($('#datepicker').data('date'));
    $('#datepicker').datepicker('hide');
});
})

2

Documentation de l'API jQuery - datepicker

La date minimale sélectionnable. Lorsqu'il est réglé sur null, il n'y a pas de minimum.

Plusieurs types pris en charge:

Date: un objet de date contenant la date minimale.
Nombre: un certain nombre de jours à partir d'aujourd'hui. Par exemple 2représente à two dayspartir d'aujourd'hui et -1représente yesterday.
Chaîne: une chaîne au format défini par l' dateFormatoption ou une date relative.
Les dates relatives doivent contenir des paires valeur et période; les périodes valides sont ypour years, mpour months, wpour weekset dpour days. Par exemple, +1m +7dreprésente one month and seven daysde today.

Afin de ne pas afficher les dates précédentes autres que celles d'aujourd'hui

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

2

L' attribut " mindate " doit être utilisé pour désactiver les dates passées dans jquery datepicker.

minDate: new Date () Ou minDate: '0' est la clé pour cela.

Ex:

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

OU

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

2

remplacez simplement votre code:

ancien code:

$("#dateSelect").datepicker({
    showOtherMonths: true,
    selectOtherMonths: true,
    changeMonth: true,
    changeYear: true,
    showButtonPanel: true,
    dateFormat: 'yy-mm-dd'

});

nouveau code:

$("#dateSelect").datepicker({
    showOtherMonths: true,
    selectOtherMonths: true,
    changeMonth: true,
    changeYear: true,
    showButtonPanel: true,
    dateFormat: 'yy-mm-dd',
    minDate: 0
});

2

En définissant startDate: new Date()

$('.date-picker').datepicker({
    defaultDate: "+1w",
    changeMonth: true,
    numberOfMonths: 1,
    ...
    startDate: new Date(),
});

1

J'ai créé une fonction pour désactiver la date précédente, désactiver les jours de week-end flexibles (comme samedi, dimanche)

Nous utilisons la méthode beforeShowDay du plugin jQuery UI datepicker.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
var NotBeforeToday = function(date) {
		var now = new Date(); //this gets the current date and time
		if (date.getFullYear() == now.getFullYear() && date.getMonth() == now.getMonth() && date.getDate() >= now.getDate() && (date.getDay() > 0 && date.getDay() < 6) )
			return [true,""];
		if (date.getFullYear() >= now.getFullYear() && date.getMonth() > now.getMonth() && (date.getDay() > 0 && date.getDay() < 6))
			return [true,""];
		if (date.getFullYear() > now.getFullYear() && (date.getDay() > 0 && date.getDay() < 6))
			return [true,""];
		return [false,""];
	}


jQuery("#datepicker").datepicker({
		beforeShowDay: NotBeforeToday
    });

entrez la description de l'image ici

Ici, la date d'aujourd'hui est le 15 septembre. J'ai désactivé samedi et dimanche.


0

vous devez déclarer la date actuelle dans des variables comme celle-ci

 $(function() {
    var date = new Date();
    var currentMonth = date.getMonth();
    var currentDate = date.getDate();
    var currentYear = date.getFullYear();
    $('#datepicker').datepicker({
    minDate: new Date(currentYear, currentMonth, currentDate)
    });
})

0
$( "#date" ).datetimepicker({startDate:new Date()}).datetimepicker('update', new Date());

new Date(): fonction obtenir la date d'aujourd'hui la date précédente sont verrouillées. 100% de travail


0

vous pouvez simplement utiliser

startDate: 'today'

cela fonctionne bien pour moi.

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.