gpt4 book ai didi

javascript - 验证更改时的 bootstrap-datepicker 字段

转载 作者:行者123 更新时间:2023-11-28 06:20:34 24 4
gpt4 key购买 nike

我正在尝试在 bootstrap-datepicker 填充 order_datePicker 输入字段时对其进行验证。我已经在 stackoverflow 上找到了一些答案但不知怎的,我自己无法让它发挥作用。对于我正在使用的其他输入字段:

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

但是,这不适用于日期选择器输入字段,因为用户没有使用输入。

所以,正如 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");}
});

最佳答案

$('#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");}
});

});
<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>

尝试一下,已更新

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

请引用https://eonasdan.github.io/bootstrap-datetimepicker/Events/对于事件

关于javascript - 验证更改时的 bootstrap-datepicker 字段,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35573772/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com