输入不会在更改时提交表单

I have a problem with "on change" input. What it's supposed to do is that on click it shows datepicker, but when you pick a date to submit, input change function does not work. Please, run a code snippet below.

我对“on change”输入有疑问。它应该做的是点击它显示datepicker,但是当你选择提交日期时,输入更改功能不起作用。请在下面运行代码段。

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>

2 个解决方案

#1

The problem is your input doesn't fire the change() function when you select the date. What you can do is use the events for the datepicker in this case the changeDate

问题是当您选择日期时,您的输入不会触发change()函数。你可以做的是在这种情况下使用datepicker的事件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>

#2

Simple you can use this code:

很简单,您可以使用此代码:

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

#1