web-dev-qa-db-fra.com

désactiver les dates passées sur datepicker

Comment désactiver les dates passées de la date actuelle sur un datetimepicker? J'ai essayé quelques articles pour une question similaire, mais j'étais incapable de l'obtenir. Voici ce que j'ai essayé.

<link href="http://netdna.bootstrapcdn.com/Twitter-bootstrap/2.2.2/css/bootstrap-combined.min.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" media="screen"
 href="http://tarruda.github.com/bootstrap-datetimepicker/assets/css/bootstrap-datetimepicker.min.css">
<script type="text/javascript"
 src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.3/jquery.min.js">
</script> 
<script type="text/javascript"
 src="http://netdna.bootstrapcdn.com/Twitter-bootstrap/2.2.2/js/bootstrap.min.js">
</script>
<script type="text/javascript"
 src="http://tarruda.github.com/bootstrap-datetimepicker/assets/js/bootstrap-datetimepicker.min.js">
</script>
<script type="text/javascript"
 src="http://tarruda.github.com/bootstrap-datetimepicker/assets/js/bootstrap-datetimepicker.pt-BR.js">
</script>
<script type="text/javascript">
$(function() {
  $('#datetimepicker2').datetimepicker({
    language: 'en',
    pick12HourFormat: true
  });
});
</script>

<div id="datetimepicker2" class="input-append">
<input data-format="MM/dd/yyyy" type="text"/>
<span class="add-on">
  <i  data-date-icon="icon-calendar">
  </i>
</span>

J'ai aussi essayé 

$("datetimepicker2").datepicker({ changeYear: true, dateFormat: 'dd/mm/yy', showOn: 'none', showButtonPanel: true,  minDate:'0d' });

et 

$("#datetimepicker2").datepicker({ minDate: 0 });
jqueryjquery-mobiletwitter-bootstrap
19
Anna

Donnez zéro à mindate et cela supprimera les dates passées.

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

voici une Live fiddle exemple de travail http://jsfiddle.net/mayooresan/ZL2Bc/

La documentation officielle est disponible ici

48
Jay Mayu

minDate: dateToday ou minDate: '0' est la clé ici. Essayez de définir la propriété minDate.

$(function() {
    $( "#datepicker" ).datepicker({
        numberOfMonths: 2,
        showButtonPanel: true,
        minDate: dateToday // minDate: '0' would work too
    });
});

Lire la suite

13
Techie

Problème résolu :) 

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

})
12
Anna
$(function () {
    $("#date").datepicker({ minDate: 0 });
});
8
Rama Krishna

essaye ça,

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

Ici, nouvelle date () implique la date du jour ....

8
Annonymous programmer

Cela fonctionnera: 

 var dateToday = new Date();    
 $(function () {
     $("#date").datepicker({ 
         minDate: dateToday 
     });
 });
6
VIPIN A ROY

Essaye ça,

$("#datetimepicker2").datepicker({ startDate: "+0d" });
3
Pabari Mohit
var dateToday = new Date();

$('#datepicker').datepicker({                                     
    'startDate': dateToday
});
2
pralhad bulange
<div class="input-group date" data-provide="datepicker" data-date-start-date="0d">
    <input type="text" class="form-control" id="input_id" name="input_name" />
    <div class="input-group-addon">
        <span class="glyphicon glyphicon-calendar"></span>
    </div>
</div>
2
Shahid Ahmed

Si vous souhaitez définir la date de chargement de la page, utilisez ceci:

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

Cela définira la date du jour comme date de début lors du chargement de la page et désactivera toutes les dates précédentes.
Mais si vous voulez définir la date au clic d'une zone de texte particulière au lieu de la définir au chargement de la page, utilisez ceci: $('#datetimepicker1').datetimepicker(); $("#datetimepicker1").on("click", function (e) { $('#datetimepicker1').data("DateTimePicker").minDate(new Date()); });

Au lieu de new Date (), nous pouvons utiliser n'importe quelle chaîne spécifiant Date dans un format que nous spécifions si nous ne voulons pas définir la date actuelle comme date minimale . E.g:

$('#datetimepicker1').data("DateTimePicker").minDate("10/15/2018");
1
Deepak Jha

vous venez d'introduire le paramètre startDate comme mentionné ci-dessous. 

var todaydate = new Date();
    $(".leave-day").datepicker({
        autoclose: true,
        todayBtn: "linked",
        todayHighlight: true,
        startDate: todaydate     
      }
    ).on('changeDate', function (e) {
        var dateCalendar = e.format();
        dateCalendar = moment(dateCalendar, 'MM/DD/YYYY').format('YYYY-MM-DD');
        $("#date-leave").val(dateCalendar);
    });
1
Swapnil Nath

ça marche pour moi 

$('#datetimepicker2').datetimepicker({
    startDate: new Date()
  });
1
salamflamo
$("#datetimepicker2").datepicker({ 
  dateFormat: "mm/dd/yy", 
  minDate: new Date()
});
0
Nikhil Gyan
Try this'
 <link rel="stylesheet" href="//code.jquery.com/ui/1.12.0/themes/base/jquery-ui.css">
    <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
    <script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>

    <!-- table -->
    <link rel="stylesheet" href="https://cdn.datatables.net/1.10.12/css/dataTables.bootstrap.min.css">
    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
    <script src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>
    <script src="https://cdn.datatables.net/1.10.12/js/dataTables.bootstrap.min.js"></script>
    <!-- end table -->

    <script>
       $(function() {
        $('#example').DataTable();
        $("#from_date").datepicker({
            dateFormat: "mm/d/yy",
            maxDate: 0,

            onSelect: function () {



                var minDate = $(this).datepicker('getDate');

                $('#to_date').datepicker('setDate', minDate);
                $('#to_date').datepicker('option', 'maxDate', 0);
                $('#to_date').datepicker('option', 'minDate', minDate);
            }
        });
        $('#to_date').datepicker({
            dateFormat: "mm/d/yy"
        });

       });
       </script><link rel="stylesheet" href="//code.jquery.com/ui/1.12.0/themes/base/jquery-ui.css">
    <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
    <script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>

    <!-- table -->
    <link rel="stylesheet" href="https://cdn.datatables.net/1.10.12/css/dataTables.bootstrap.min.css">
    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
    <script src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>
    <script src="https://cdn.datatables.net/1.10.12/js/dataTables.bootstrap.min.js"></script>
    <!-- end table -->

    <script>
       $(function() {
        $('#example').DataTable();
        $("#from_date").datepicker({
            dateFormat: "mm/d/yy",
            maxDate: 0,

            onSelect: function () {



                var minDate = $(this).datepicker('getDate');

                $('#to_date').datepicker('setDate', minDate);
                $('#to_date').datepicker('option', 'maxDate', 0);
                $('#to_date').datepicker('option', 'minDate', minDate);
            }
        });
        $('#to_date').datepicker({
            dateFormat: "mm/d/yy"
        });

       });
       </script><link rel="stylesheet" href="//code.jquery.com/ui/1.12.0/themes/base/jquery-ui.css">
    <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
    <script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>

    <!-- table -->
    <link rel="stylesheet" href="https://cdn.datatables.net/1.10.12/css/dataTables.bootstrap.min.css">
    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
    <script src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>
    <script src="https://cdn.datatables.net/1.10.12/js/dataTables.bootstrap.min.js"></script>
    <!-- end table -->

    <script>
       $(function() {
        $('#example').DataTable();
        $("#from_date").datepicker({
            dateFormat: "mm/d/yy",
            maxDate: 0,

            onSelect: function () {



                var minDate = $(this).datepicker('getDate');

                $('#to_date').datepicker('setDate', minDate);
                $('#to_date').datepicker('option', 'maxDate', 0);
                $('#to_date').datepicker('option', 'minDate', minDate);
            }
        });
        $('#to_date').datepicker({
            dateFormat: "mm/d/yy"
        });

       });
       </script><link rel="stylesheet" href="//code.jquery.com/ui/1.12.0/themes/base/jquery-ui.css">
    <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
    <script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>

    <!-- table -->
    <link rel="stylesheet" href="https://cdn.datatables.net/1.10.12/css/dataTables.bootstrap.min.css">
    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
    <script src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>
    <script src="https://cdn.datatables.net/1.10.12/js/dataTables.bootstrap.min.js"></script>
    <!-- end table -->

    <script>
       $(function() {
        $('#example').DataTable();
        $("#from_date").datepicker({
            dateFormat: "mm/d/yy",
            maxDate: 0,

            onSelect: function () {



                var minDate = $(this).datepicker('getDate');

                $('#to_date').datepicker('setDate', minDate);
                $('#to_date').datepicker('option', 'maxDate', 0);
                $('#to_date').datepicker('option', 'minDate', minDate);
            }
        });
        $('#to_date').datepicker({
            dateFormat: "mm/d/yy"
        });

       });
       </script><link rel="stylesheet" href="//code.jquery.com/ui/1.12.0/themes/base/jquery-ui.css">
    <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
    <script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>

    <!-- table -->
    <link rel="stylesheet" href="https://cdn.datatables.net/1.10.12/css/dataTables.bootstrap.min.css">
    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
    <script src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>
    <script src="https://cdn.datatables.net/1.10.12/js/dataTables.bootstrap.min.js"></script>
    <!-- end table -->

    <script>
       $(function() {
        $('#example').DataTable();
        $("#from_date").datepicker({
            dateFormat: "mm/d/yy",
            maxDate: 0,

            onSelect: function () {



                var minDate = $(this).datepicker('getDate');

                $('#to_date').datepicker('setDate', minDate);
                $('#to_date').datepicker('option', 'maxDate', 0);
                $('#to_date').datepicker('option', 'minDate', minDate);
            }
        });
        $('#to_date').datepicker({
            dateFormat: "mm/d/yy"
        });

       });
       </script>
0
SMS

Définir une date de fin basée sur la date de début à l'aide de datepicker

  $("#AddEvent_txtStartDate").datepicker({
        onSelect: function () {
            minDate = $("#AddEvent_txtStartDate").datepicker("getDate");
            var mDate = new Date(minDate.setDate(minDate.getDate()));
            $("#AddEvent_txtEndDate").datepicker("setDate", mDate);
            $("#AddEvent_txtEndDate").datepicker("option", "minDate", mDate);
        }
    });  
    $("#AddEvent_txtEndDate").datepicker();
0
A.M. Patel

Vous pouvez utiliser 

$('#li_from_date').appendDtpicker({
    "dateOnly": true,
    "autodateOnStart": false,
    "dateFormat": "DD/MM/YYYY",
    "closeOnSelected": true,
    "futureonly": true
});
0
Ramakrishnan Ramar

** cela a fonctionné dans mon plugin wordpress ** 

 jQuery(document).ready(function($) {
           $("#datepicker").datepicker({ minDate: 0});
        });
0
anuj rajak