web-dev-qa-db-fra.com

Bootstrap datepicker désactivant les dates antérieures sans date actuelle

Je voulais désactiver toutes les dates antérieures à la date actuelle, pas avec la date actuelle. J'essaie par la bibliothèque d'amorçage datepicker " bootstrap-datepicker " et en utilisant le code suivant:

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

Ça fonctionne bien. Mais c'est la date invalidante jusqu'à aujourd'hui. 

Par exemple, si aujourd'hui est le 20/04/2013 et que je désactive les dates antérieures en définissant startDate: new Date (). mais je suis en mesure de choisir la date du 21/04/2013.

MISE À JOUR: je peux le résoudre comme suit pour la zone UTC:

var d = new Date();
options["startDate"] = new Date(d.setDate(d.getDate() - 1));

ou startDate: "+0d"

Mais ces méthodes ne fonctionnent pas quand UTC a un jour d'avance. Pour mon client californien, cela signifie qu'à 17h00, mon client ne peut plus choisir sa date du jour locale comme date valide. Afin de résoudre ce problème, j'utilise temporairement startDate: "-1d", mais bien sûr, avant 5, cela signifie que hier est visible. 

Quelqu'un a-t-il proposé une meilleure méthode pour le moment, car je ne veux pas dire aux utilisateurs d'indiquer une date UTC?

Merci d'avance.

javascriptjquerytwitter-bootstrap
23
itskawsar
var date = new Date();
date.setDate(date.getDate()-1);

$('#date').datepicker({ 
    startDate: date
});
47
Tom Hartman

HTML

<input type="text" name="my_date" value="4/26/2015" class="datepicker">

JS

jQuery(function() {
  var datepicker = $('input.datepicker');

  if (datepicker.length > 0) {
    datepicker.datepicker({
      format: "mm/dd/yyyy",
      startDate: new Date()
    });
  }
});

Cela mettra en évidence la date par défaut 4/26/2015 (26 avril 2015) dans le calendrier à l'ouverture et le .__ désactivera toutes les dates antérieures à la date actuelle.

19
Jignesh Gohel

Utilisez minDate

var date = new Date();
var today = new Date(date.getFullYear(), date.getMonth(), date.getDate());

$('#date').datepicker({ 
    minDate: today
});
18
Sebastian

utilisation 

startDate: '-0d'

Comme 

$("#datepicker").datepicker({
    startDate: '-0d',
    changeMonth: true
});
13
Ryan Knol

Vous pouvez utiliser l'attribut de données:

<div class="datepicker" data-date-start-date="+1d"></div>
8
dcalvert

var nowDate = new Date();
var today = new Date(nowDate.getFullYear(), nowDate.getMonth(), nowDate.getDate(), 0, 0, 0, 0);
	$('#date').datetimepicker({
		startDate: today
	});

7
cfprabhu

C'est ici 

 <script>
          $(function () {
              var date = new Date();
              date.setDate(date.getDate() - 7);

            $('#datetimepicker1').datetimepicker({
                maxDate: 'now',
                showTodayButton: true,
                showClear: true,
                minDate: date
            });
        });
    </script>
4
Academy of Programmer
<script type="text/javascript">
$('.datepicker').datepicker({
    format: 'dd/mm/yyyy',
    todayHighlight:'TRUE',
    startDate: '-0d',
    autoclose: true,
})
4
Chaitanya K

Veuillez vous référer au violon http://jsfiddle.net/Ritwika/gsvh83ry/

**With three fields having date greater than the **
<input type="text" type="text" class="form-control datepickstart" />
<input type="text" type="text" class="form-control datepickend" />
<input type="text" type="text" class="form-control datepickthird" />

var date = new Date();
 date.setDate(date.getDate()-1);
$('.datepickstart').datepicker({
 autoclose: true,
 todayHighlight: true,
 format: 'dd/mm/yyyy',
  startDate: date
});
$('.datepickstart').datepicker().on('changeDate', function() {
    var temp = $(this).datepicker('getDate');
    var d = new Date(temp);
  d.setDate(d.getDate() + 1);
  $('.datepickend').datepicker({
 autoclose: true,
 format: 'dd/mm/yyyy',
 startDate: d
}).on('changeDate', function() {
    var temp1 = $(this).datepicker('getDate');
    var d1 = new Date(temp1);
   d1.setDate(d1.getDate() + 1);
  $('.datepickthird').datepicker({
 autoclose: true,
 format: 'dd/mm/yyyy',
 startDate: d1
});
});
});
3
Ritwika Das

Essayez le:

$(function () {
     $('#datetimepicker').datetimepicker({  minDate:new Date()});
});
3
Lakhan

Désactiver toutes les dates passées

<script type="text/javascript">
        $(function () {
            /*--FOR DATE----*/
            var date = new Date();
            var today = new Date(date.getFullYear(), date.getMonth(), date.getDate());

            //Date1
            $('#ctl00_ContentPlaceHolder1_txtTranDate').datepicker({
              format: 'dd-mm-yyyy',
              todayHighlight:'TRUE',
              startDate: today,
              endDate:0,
              autoclose: true
            });

        });
</script>

Désactiver toutes les dates futures

 var date = new Date();
 var today = new Date(date.getFullYear(), date.getMonth(), date.getDate());

   //Date1
   $('#ctl00_ContentPlaceHolder1_txtTranDate').datepicker({
       format: 'dd-mm-yyyy',
       todayHighlight:'TRUE',
       minDate: today,
       autoclose: true
   });
3
Drago Pun

Pour désactiver les dates antérieures et mettre en surbrillance la date du jour:

$(function () {
    $('.input-daterange').datepicker({
        startDate : new Date(),
        todayHighlight : true
    });
});

Pour désactiver les dates futures et mettre en surbrillance la date du jour:

$(function () {
    $('.input-daterange').datepicker({
        endDate : new Date(),
        todayHighlight : true
    });
});

Pour plus de détails, consultez ceci https://bootstrap-datepicker.readthedocs.io/en/latest/options.html?highlight=startdate#quick-reference

1
Manjunath Bilwar

En html 

<input class="required form-control" id="d_start_date" name="d_start_date" type="text" value="">

Côté Js 

<script type="text/javascript">
        $(document).ready(function () {
        var dateToday = new Date();
        dateToday.setDate(dateToday.getDate());

        $('#d_start_date').datepicker({
            autoclose: true,
            startDate: dateToday
        })

    });
1
Brijesh Mavani

Cela dépend du format que vous avez mis sur le sélecteur de dateAlors nous lui avons d'abord donné le format.

    var today = new Date();
    var dd = today.getDate();
    var mm = today.getMonth()+1; //January is 0!

    var yyyy = today.getFullYear();
    if(dd<10){
        dd='0'+dd;
    } 
    if(mm<10){
        mm='0'+mm;
    } 
    var today = yyyy+'-'+mm+'-'+dd; //Here you put the format you want

Ensuite, passez le datepicker (dépend de la version que vous utilisez, il peut s'agir de startDate ou minDate, ce qui est mon cas)

    //Datetimepicker
    $(function () {
        $('#datetimepicker1').datetimepicker({
            minDate: today, //pass today's date
            daysOfWeekDisabled: [0],
            locale: 'es',
            inline: true,
            format: 'YYYY-MM-DD HH:mm', //format of my datetime (to save on mysqlphpadmin)
            sideBySide: true
        });
    });
0
stupidboyRG

pour désactiver la date passée, utilisez simplement:

  $('.input-group.date').datepicker({
       format: 'dd/mm/yyyy',
       startDate: 'today'
  });
0
Shaurya

Vous pouvez simplement ajouter un attribut de données dans une balise HTML :

Dans Rails html:

<%= form.text_field :appointment_date, 'data-provide': 'datepicker', 'data-date-start-date': "+0d" %>

HTML:

<input data-provide="datepicker" data-date-start-date="+0d" type="text" name="appointment_date" id="appointment_date">
0
Sanjay Choudhary