输入不提交更改表单

Question

我对“on change”输入有疑问。 它应该做的是单击它会显示日期选择器，但是当您选择要提交的日期时，输入更改功能不起作用。 请在下面运行代码 sn-p。

if (top.location != location) {
  top.location.href = document.location.href;
}
$(function() {
  window.prettyPrint && prettyPrint();
  $('#dp1').datepicker({
    format: 'yyyy-mm-dd'
  });

  $('#dpYears').datepicker();
  $('#dpMonths').datepicker();
});

<link href="http://www.eyecon.ro/bootstrap-datepicker/css/bootstrap.css" rel="stylesheet" />
<link href="http://www.eyecon.ro/bootstrap-datepicker/css/datepicker.css" rel="stylesheet" />

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://www.eyecon.ro/bootstrap-datepicker/js/bootstrap-datepicker.js"></script>

<div data-date-format="yyyy-mm-dd">
  <form id="date" method="POST" action="index.php">
    <input type="text" name="date" class="span2" value="2016-08-07" id="dp1" style="text-align: center; width: 50%; background-color: #5a95f5; border: none;">
  </form>
</div>

<script>
  $('input[id="dp1"]').change(function() {
    $('#date1').submit();
  });
</script>

Answer 1

简单的你可以使用这个代码：

$('#input-date')
.datepicker()   
.on('changeDate', function(e){    
    $('#formID').submit();
});

Answer 2

问题是当您选择日期时，您的输入不会触发change() 函数。您可以做的是在这种情况下使用日期选择器的事件changeDate

if (top.location != location) {
  top.location.href = document.location.href;
}
$(function() {
  window.prettyPrint && prettyPrint();
  $('#dp1').datepicker({
    format: 'yyyy-mm-dd'
  });

  $('#dpYears').datepicker();
  $('#dpMonths').datepicker();
});

<link href="http://www.eyecon.ro/bootstrap-datepicker/css/bootstrap.css" rel="stylesheet" />
<link href="http://www.eyecon.ro/bootstrap-datepicker/css/datepicker.css" rel="stylesheet" />

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://www.eyecon.ro/bootstrap-datepicker/js/bootstrap-datepicker.js"></script>

<div data-date-format="yyyy-mm-dd">
  <form id="date" method="POST" action="index.php">
    <input type="text" name="date" class="span2" value="2016-08-07" id="dp1" style="text-align: center; width: 50%; background-color: #5a95f5; border: none;">
  </form>
</div>

<script>
  $('#dp1').on('changeDate', function () {
    console.log('Date Selected')
  })
</script>