Question

我正在使用引导日期选择器，我想知道是否有一种方法可以仅在填充自日期之后启用到日期。在此之前它将被禁用。不论是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>

Ho，这将帮助您！：）

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>

仅在填写起始日期后启用日期

2 个答案: