填写起始日期后仅启用日期[关闭]

Question

我正在使用bootstrap datepicker，我想知道有没有办法在填充From Date之后启用To Date.Before它将被禁用。欢迎javascript或jQuery解决方案。

我的HTML

<div id="div2" style="display: none">   
            <div class="row m-t-5">
            <div class="col-md-8">From Date </div>
            <div class="col-md-4"><input type="text" class="form-control datepicker" id="leave_from" onblur="checkDate();" name="leave_from" placeholder="dd/mm/yyyy"></div>
            </div>
            <div class="row m-t-5">
            <div class="col-md-8">To Date </div>
            <div class="col-md-4"><input type="text" class="form-control datepicker" id="leave_to" onblur="checkDate();" name="leave_to" placeholder="dd/mm/yyyy"></div>
            </div>
        </div>

<script>

我的javascript代码

function checkDate(){
var error;
var $validator = $("#myform").validate();
var date1      = document.getElementById('leave_from').value;
var date       = date1.substring(0, 2);
var month      = date1.substring(3, 5);
var year       = date1.substring(6, 10);
var FROM       = new Date(year, month - 1, date);

var date2       = document.getElementById('leave_to').value;
var date1       = date2.substring(0, 2);
var month1      = date2.substring(3, 5);
var year1       = date2.substring(6, 10);
var TO          = new Date(year1, month1 - 1, date1);

if(FROM > TO)
{
error = {leave_to:"Invalid Date!"};
$validator.showErrors(error);
$('#leave_to').val('');
  }
}

Answer 1

试试，

$(document).ready(function() {


  $('#datepicker1').datepicker({
format: "mm/dd/yyyy",
todayHighlight: true,


autoclose: true
  }).on("changeDate", function (e) {
   $('#datepicker2').prop('disabled',false);
});
  $('#datepicker2').datepicker({
format: "mm/dd/yyyy",
todayHighlight: true,

autoclose: true
  });
$('#datepicker2').prop('disabled',true);
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.5.1/js/bootstrap-datepicker.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.5.1/css/bootstrap-datepicker.min.css" />
<div class="row">
  <div class="col-lg-2">
<div class="panel">
  <fieldset>
    <div class="form-group">
      <label for="datepicker1">Date</label>
      <input type="text" class="form-control" id="datepicker1">
    </div>
  </fieldset>
  <fieldset>
    <div class="form-group">
      <label for="datepicker2">Date2</label>
      <input type="text" class="form-control" id="datepicker2">
    </div>
  </fieldset>
</div>
  </div>
</div>

这对你有什么帮助!! :)

Answer 2

检查此版本的代码。确保在前往第二个日期之前必须设置第一个日期。如果有人设置了第一个日期，那么第二个日期然后删除第一个日期，第二个日期也将被清除并再次禁用。

$(document).ready(function() {


  $('#datepicker1').datepicker({
format: "mm/dd/yyyy",
todayHighlight: true,


autoclose: true
  }).on("change", function (e) {
   if($('#datepicker1').val() == ""){
     $('#datepicker2').prop('disabled',true);
   }else{
     $('#datepicker2').val('');
     $('#datepicker2').prop('disabled',false);
   }
});
  $('#datepicker2').datepicker({
format: "mm/dd/yyyy",
todayHighlight: true,

autoclose: true
  });
$('#datepicker2').prop('disabled',true);
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.5.1/js/bootstrap-datepicker.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.5.1/css/bootstrap-datepicker.min.css" />
<div class="row">
  <div class="col-lg-2">
<div class="panel">
  <fieldset>
    <div class="form-group">
      <label for="datepicker1">Date</label>
      <input type="text" class="form-control" id="datepicker1">
    </div>
  </fieldset>
  <fieldset>
    <div class="form-group">
      <label for="datepicker2">Date2</label>
      <input type="text" class="form-control" id="datepicker2">
    </div>
  </fieldset>
</div>
  </div>
</div>