bootstrapValidator日期选择器
bootstrapValidator datepicker
我有一个包含两个日期选择器的页面，我必须验证它们。这是index.html:的演示代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<script src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<!-- ###DatePicker### -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.bootstrapvalidator/0.4.5/js/bootstrapValidator.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/jquery.bootstrapvalidator/0.4.5/css/bootstrapValidator.min.css" rel="stylesheet"/>
<script src="http://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/js/bootstrap-datepicker.min.js"></script>
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/css/datepicker.min.css" />
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/css/datepicker3.min.css" />
<!-- ################ -->
<!-- ####Bootstrap### -->
<script src="bootstrap-3.3.6-dist/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="bootstrap-3.3.6-dist/css/bootstrap.min.css" />
<!-- ################ -->
<!-- #####Custom##### -->
<script src="Scripts/datepicker.js"></script>
<link rel="stylesheet" href="CSS/dashboard.css" />
<!-- ################ -->
</head>
<body>
<!-- Top bar -->
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">TEST PAGE</a>
</div>
</div>
</nav>
<!-- Content -->
<div class="container-fluid">
<!-- Right Panel -->
<div class="row">
<div class="col-sm-3 col-md-2 sidebar">
<!-- Start Date -->
<form id="startDate" method="post" class="dateRangeForm form-vertical">
<div class="form-group">
<label class="control-label">Start Date:</label>
<br></br>
<div class="date">
<div class="input-group input-append date dateRangePicker">
<input type="text" class="form-control" name="date" />
<span class="input-group-addon add-on">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
<!-- End Date -->
<div class="form-group">
<label class="control-label">End Date:</label>
<br></br>
<div class="date">
<div class="input-group input-append date dateRangePicker">
<input type="text" class="form-control" name="date" />
<span class="input-group-addon add-on">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
<div class="form-group">
<button type="button" class="btn btn-default">Update Data</button>
</div>
</form>
</div>
</div>
</body>
</html>
这是日期选择器.js：
// http://formvalidation.io/examples/bootstrap-datepicker/
$(document).ready(function()
{
$('.dateRangePicker').datepicker({ dateFormat: 'mm/dd/yyyy'}).datepicker("setDate", new Date());
var today = new Date();
var dd = today.getDate();
var mm = today.getMonth()+1; //January is 0!
var yyyy = today.getFullYear();
if (dd < 10)
dd='0'+dd
if (mm < 10)
mm='0'+mm
today = mm+'/'+dd+'/'+yyyy;
$('.dateRangePicker')
.datepicker({
format: 'mm/dd/yyyy',
startDate: '01/01/2010',
endDate: today
})
.on('changeDate', function(e) {
// Revalidate the date field
$('.dateRangeForm').bootstrapValidator('revalidateField', 'date');
});
$('.dateRangeForm').bootstrapValidator({
framework: 'bootstrap',
icon: {
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
fields: {
date: {
validators: {
notEmpty: {
message: 'Required field'
},
date: {
format: 'MM/DD/YYYY',
min: '01/01/2010',
max: today,
message: 'Invalid date'
}
}
}
}
});
});
当我尝试运行页面时，在选择日期时出现以下错误：
TypeError: undefined is not an object (evaluating 'f[c].apply')
(anonymous function)bootstrapValidator.min.js:11:12426
eachjquery-2.1.0.min.js:1:2881
eachjquery-2.1.0.min.js:1:822
bootstrapValidatorbootstrapValidator.min.js:11:12269
(anonymous function)datepicker.js:28
dispatchjquery-2.1.0.min.js:2:6060
handlejquery-2.1.0.min.js:2:2835
triggerjquery-2.1.0.min.js:2:5168
(anonymous function)jquery-2.1.0.min.js:2:11007
eachjquery-2.1.0.min.js:1:2881
eachjquery-2.1.0.min.js:1:822
triggerjquery-2.1.0.min.js:2:10980
_triggerbootstrap-datepicker.min.js:1:5750
_setDatebootstrap-datepicker.min.js:1:17438
clickbootstrap-datepicker.min.js:1:16930
fjquery-2.1.0.min.js:1:3717
dispatchjquery-2.1.0.min.js:2:6060
handlejquery-2.1.0.min.js:2:2835
我该如何解决此问题？
谢谢。
更改：
$('.dateRangeForm').bootstrapValidator('revalidateField', 'date');
收件人：
$('.dateRangeForm').bootstrapValidator('updateStatus', 'date', 'NOT_VALIDATED')
.bootstrapValidator('validateField', 'date');
Js报价：https://jsfiddle.net/n6hgwq5h/1/
相关文章：
- keith wood日期选择器日期格式和语言
- 如何将日期选择器日期转换为JSON对象以用于AJAX请求
- 如何使用下拉菜单修复jquery日期选择器日期计算功能
- jQuery:检索日期选择器日期，检查是否在日期范围内，显示/隐藏字段
- 存储日期选择器日期并保存在数据库中
- 基于Select值更改禁用jQueryUI日期选择器日期
- 从替代字段填充 jquery UI 日期选择器日期字段
- 如何获取引导时间选择器日期对象
- 角度材料的日期选择器日期错误
- Jquery日期选择器日期格式
- 启动日期选择器日期比较错误(英国/美国格式错误）
- 日期选择器日期空间问题
- 更改beforeShowDay函数中的日期选择器日期格式
- 如何使用jQuery比较两个日期选择器日期
- 日期选择器日期未定义
- 启动日期选择器日期范围和默认日期
- Bootstrap日期选择器日期(带或不带日期）
- 分析javascript中的日期选择器日期"dd月字符串，yyyy”;
- 通过输入字段中的天数更新日期选择器日期
- 显示2个日期选择器日期之间的天数
