Question

我正在尝试通过bootstrap-datepicker填充order_datePicker输入字段。我已经在stackoverflow找到了一些答案，但不知怎的，我不能让它自己工作。使用我正在使用的其他输入字段：

$('#order_emailadres').on('input', function() {

但是这不适用于datepicker输入字段，因为用户没有使用输入。

因此，正如documentation和stackoverflow链接中所提到的，我正在尝试捕获changeDate事件，以便可以通过以下代码验证输入：

HTML：

<div id=sandbox-container>
  <div id="datepicker"></div>
    <input type="text" id="order_datePicker" name=order_datePicker>
  </div>
</div>

JS：

$('#order_datePicker').on('changeDate', function () {
    var input=$(this);
    var re = /^[0-9]{2}-[0-9]{2}-[0-9]{4}$/;
    var is_valid=re.test(input.val());
    if(is_valid){input.removeClass("invalid").addClass("valid");}
    else{input.removeClass("valid").addClass("invalid");}
});

可悲的是，这不起作用。我做错了什么？

更新

使用下面的代码，但现在将类添加到div而不是输入字段。但是原来的问题得到了回答。感谢

$('#datepicker').datepicker().on('changeDate',function(){
    $('#order_datePicker').val($('#datepicker').datepicker('getFormattedDate'));
    var input=$(this);
    var re = /^[0-9]{2}-[0-9]{2}-[0-9]{4}$/;
    var is_valid=re.test(input.val());
    if(is_valid){input.removeClass("invalid").addClass("valid");}
    else{input.removeClass("valid").addClass("invalid");}
});

Answer 1

＆＃13;

$('#order_datePicker').datepicker();
$('#order_datePicker').change(function() {
  alert("date change");
$('#order_datePicker').datepicker();
$('#order_datePicker').change(function() {
 $('#order_datePicker').val($('#datepicker').datepicker('getFormattedDate'));
var input=$(this);
var re = /^[0-9]{2}-[0-9]{2}-[0-9]{4}$/;
var is_valid=re.test(input.val());
if(is_valid){input.removeClass("invalid").addClass("valid");}
else{input.removeClass("valid").addClass("invalid");}
});

});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="http://code.jquery.com/ui/1.8.21/themes/base/jquery-ui.css" rel="stylesheet"/>
<link href="http://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/css/datepicker3.css" rel="stylesheet"/>
<script src="http://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/js/bootstrap-datepicker.js"></script>

<div id=sandbox-container>
  <div id="datepicker"></div>
  <input type="text" id="order_datePicker" name=order_datePicker/>
</div>
</div>

＆＃13;

尝试， <强>已更新

  $("#StateDatePicker").on("dp.change", function(e) { alert(); });
or 
$("#StateDatePicker").change( function(e) { alert(); });

请参阅https://eonasdan.github.io/bootstrap-datetimepicker/Events/了解活动

在更改

1 个答案: