使用datepicker

Question

在那里我想在日期小于当前日期时禁用我的日期选择器。

这个链接我用的是什么：

<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
    <link rel="stylesheet" href="https://formden.com/static/cdn/bootstrap-iso.css" />
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.1/js/bootstrap-datepicker.min.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.1/css/bootstrap-datepicker3.css"/>

这是我的javascript：

<script>
    $(document).ready(function(){
      var date_input=$('input[name="date"]'); //our date input has the name "date"
      var container=$('.bootstrap-iso form').length>0 ? $('.bootstrap-iso form').parent() : "body";
      var options={
        format: 'yyyy/mm/dd',
        container: container,
        todayHighlight: true,
        autoclose: true,
      };
      date_input.datepicker(options);
    })
</script>

我一直尝试在我的javascript中添加minDate:'0'，但它仍然无效。

有人帮助我在我的代码中需要改进吗？

Answer 1

你需要做这样的事情：

$(document).ready(function(){
    var date_input=$('input[name="date"]'); //our date input has the name "date"
    var container=$('.bootstrap-iso form').length>0 ? $('.bootstrap-iso form').parent() : "body";
    var options={
        format: 'yyyy/mm/dd',
        container: container,
        todayHighlight: true,
        autoclose: true
    };
    date_input.datepicker(options).change(dateChanged).on('changeDate', dateChanged);
    function dateChanged(ev) {
        var $this = $(this);
        $this.datepicker('hide');
        var now = new Date();
        var today = new Date(now.getFullYear(), now.getMonth(), now.getDate());
        var selectedDate = Date.parse($this.val());
        if (selectedDate < today) {
            $this.attr('disabled', true);
        } else {
            $this.removeAttr('disabled');
        }
    }

})

<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<link rel="stylesheet" href="https://formden.com/static/cdn/bootstrap-iso.css" />
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.1/js/bootstrap-datepicker.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.1/css/bootstrap-datepicker3.css"/>

<input name="date">

Answer 2

使用minDate

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

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

或

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

  $(document).ready(function(){
  var date_input=$('input[name="date"]'); //our date input has the name "date"
  var container=$('.bootstrap-iso form').length>0 ? $('.bootstrap-iso form').parent() : "body";
  var options={
    format: 'yyyy/mm/dd',
    container: container,
    todayHighlight: true,
    autoclose: true,
    minDate: today
  };
  date_input.datepicker(options);
})

Answer 3

$(document).ready(function() {
$('#Date').datepicker({
    onSelect: function(dateText, inst) {
        //Get today's date at midnight
        var today = new Date();
        today = Date.parse(today.getMonth()+1+'/'+today.getDate()+'/'+today.getFullYear());
        //Get the selected date (also at midnight)
        var selDate = Date.parse(dateText);

        if(selDate < today) {
            //If the selected date was before today, continue to show the datepicker
            $('#Date').val('');
            $(inst).datepicker('show');
        }
    }
  });
});

Demo