在更改时验证 bootstrap-datepicker 字段

Posted

技术标签:

【中文标题】在更改时验证 bootstrap-datepicker 字段【英文标题】:Validate bootstrap-datepicker field on change 【发布时间】:2016-06-05 01:37:25 【问题描述】:

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

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

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

因此,正如documentation 和 *** 链接中所述,我正在尝试捕获 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");
    elseinput.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");
    elseinput.removeClass("valid").addClass("invalid");
);

【问题讨论】:

$('#order_datePicker').datepicker().on('changeDate',function());这是你需要使用的对吗? 你实例化了.datepicker()吗? 是的,我也试过了。没有运气 你知道你不只是尝试,它是必需的! 您的问题有一个问题:***.com/a/17429056/4274373 【参考方案1】:

$('#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");
elseinput.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/

【讨论】:

你在哪里找到dp.change 我在我的项目中使用了它..因为我遇到了同样的问题并且它已经出现在 datepicker 事件中 在提到的引导日期选择器 OP 上没有 dp.change 你访问过提到的网站吗? @A1rPun 是的,它是一个不同的引导日期选择器,您访问过 OP 提到的网站吗?

以上是关于在更改时验证 bootstrap-datepicker 字段的主要内容,如果未能解决你的问题,请参考以下文章

减小 bootstrap-datepicker 字段的大小并更改文本颜色

使用带有 HTMX 的 bootstrap-datepicker

如何使用 bootstrap-datepicker 更新多个输入

bootstrap-datepicker 在点击时没有响应

滚动模式时,bootstrap-datepicker 不滚动

使用 bootstrap-datepicker 时如何不显示移动键盘?