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

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

dans le champ de / vers, les personnes ne devraient pas être en mesure de voir ou de sélectionner les dates antérieures à la journée.

Ceci est 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.

    Vous devez créer un nouvel object date et le définir comme minDate lorsque vous initialisez les datpickers

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

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

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

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

    Ca y est … La réponse ci-dessus était vraiment utile … continuez les gars ..

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

    minDate:0 travaille pour moi.

    Utilisez l’option “minDate” pour restreindre la première date autorisée. La valeur “0” signifie aujourd’hui (0 jour à partir d’aujourd’hui):

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

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

    Juste pour append à ceci:

    Si vous devez également empêcher l’utilisateur de saisir manuellement une date dans le passé, il s’agit d’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 permet de changer la valeur à la date d'aujourd'hui si l'utilisateur tape manuellement une date dans le passé.

    Live Demo , 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); } }); 

    Documentation de l’API jQuery – Datepicker

    La date minimum sélectionnable. Lorsqu’il est défini sur null , il n’y a pas de minimum.

    Plusieurs types pris en charge:

    Date: object date contenant la date minimale.
    Nombre: nombre de jours à partir d’aujourd’hui. Par exemple 2 représente two days partir d’aujourd’hui et -1 représente yesterday .
    Ssortingng: Chaîne au format défini par l’option dateFormat ou une date relative.
    Les dates relatives doivent contenir des paires valeur et période; les périodes valides sont y pour les years , m pour les months , w pour les weeks et d pour les days . Par exemple, +1m +7d représente one month and seven days partir d’ today .

    Afin de ne pas afficher les dates précédentes autre que aujourd’hui

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

    L’ atsortingbut ” 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}); }); 

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

    définir l’atsortingbut startDate de datepicker, cela fonctionne, ci-dessous est le code de travail

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

    C’est un moyen facile de le faire

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

    nous pouvons également désactiver les prochains jours

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

    vous devez déclarer la date actuelle en 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) }); }) 
     $( "#date" ).datetimepicker({startDate:new Date()}).datetimepicker('update', new Date()); 

    new Date() : la fonction permet de verrouiller la date du jour précédent. 100% de travail

    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.

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