日期选择器范围不起作用
Datepicker range is not working
我正在尝试创建一个日期范围,在选择 start_date
之后,end_date
将只允许用户选择 start_date 之后的日期,反之亦然。这是一个代码片段:
main.js
function set_parameters() {
var date_start_input=$('#start_date');
var date_end_input=$('#end_date');
var container=$('.bootstrap-iso form').length>0 ? $('.bootstrap-iso form').parent() : "body";
var options_start={
format: 'MM dd, yyyy',
container: container,
todayHighlight: true,
autoclose: true,
orientation: 'top left',
onSelect: function(selectedDate) {
date_end_input.datepicker("option", "maxDate", selectedDate);
}
};
var options_end={
format: 'MM dd, yyyy',
container: container,
todayHighlight: true,
autoclose: true,
orientation: 'top left',
onSelect: function(selectedDate) {
date_start_input.datepicker("option", "minDate", selectedDate);
}
};
date_start_input.datepicker(options_start);
date_end_input.datepicker(options_end);
};
$(document).ready(function() {
set_parameters();
});
index.html
<head>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<link rel="stylesheet" href="https://formden.com/static/cdn/bootstrap-iso.css" />
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.1/js/bootstrap-datepicker.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.1/css/bootstrap-datepicker3.css"/>
</head>
...
<input class="form-control" id="start_date" name="start_date" placeholder="MM DD, YYYY" type="text" style="border-radius: 0;"/>
<input class="form-control" id="end_date" name="end_date" placeholder="MM DD, YYYY" type="text" style="border-radius: 0;"/>
...
我尝试了几个主题的解决方案,但 none 对我有用。我认为最重要的是在更改日期时设置最大和最小日期。
我想你需要的代码是这样的:
<div class="container">
<div class='col-md-5'>
<div class="form-group">
<div class='input-group date' id='datetimepicker6'>
<input type='text' class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
<div class='col-md-5'>
<div class="form-group">
<div class='input-group date' id='datetimepicker7'>
<input type='text' class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
</div>
<script type="text/javascript">
$(function () {
$('#datetimepicker6').datetimepicker();
$('#datetimepicker7').datetimepicker({
useCurrent: false //Important! See issue #1075
});
$("#datetimepicker6").on("dp.change", function (e) {
$('#datetimepicker7').data("DateTimePicker").minDate(e.date);
});
$("#datetimepicker7").on("dp.change", function (e) {
$('#datetimepicker6').data("DateTimePicker").maxDate(e.date);
});
});
</script>
这不是我的代码。我在这里找到它:https://eonasdan.github.io/bootstrap-datetimepicker/#linked-pickers.
看起来您可能只是在文档就绪函数中缺少右括号
$(document).ready(function() {
set_parameters();
}
function set_parameters() {
var date_start_input=$('#start_date');
var date_end_input=$('#end_date');
var container=$('.bootstrap-iso form').length>0 ? $('.bootstrap-iso form').parent() : "body";
var options_start={
format: 'MM dd, yyyy',
container: container,
todayHighlight: true,
autoclose: true,
orientation: 'top left',
onSelect: function(selectedDate) {
date_end_input.datepicker("option", "maxDate", selectedDate);
}
};
var options_end={
format: 'MM dd, yyyy',
container: container,
todayHighlight: true,
autoclose: true,
orientation: 'top left',
onSelect: function(selectedDate) {
date_start_input.datepicker("option", "minDate", selectedDate);
}
};
date_start_input.datepicker(options_start);
date_end_input.datepicker(options_end);
};
$(document).ready(function() {
set_parameters();
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<head>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<link rel="stylesheet" href="https://formden.com/static/cdn/bootstrap-iso.css" />
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.1/js/bootstrap-datepicker.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.1/css/bootstrap-datepicker3.css"/>
</head>
...
<input class="form-control" id="start_date" name="start_date" placeholder="MM DD, YYYY" type="text" style="border-radius: 0;"/>
<input class="form-control" id="end_date" name="end_date" placeholder="MM DD, YYYY" type="text" style="border-radius: 0;"/>
如果您还不知道 jQuery UI Datepicker here,您还可以阅读更多内容。
您的代码中有几个错误:
- 日期选择器没有选项
onSelect
,您必须监听 changeDate
事件
- 日期选择器既没有
minDate
也没有maxDate
option/method,你必须使用setStartDate
and setEndDate
这是一个工作示例:
function set_parameters() {
var date_start_input = $('#start_date');
var date_end_input = $('#end_date');
var container = $('.bootstrap-iso form').length>0 ? $('.bootstrap-iso form').parent() : "body";
var options = {
format: 'MM dd, yyyy',
container: container,
todayHighlight: true,
autoclose: true,
orientation: 'top left'
};
date_start_input.datepicker(options).on('changeDate', function(e){
date_end_input.datepicker("setStartDate", e.date);
});
date_end_input.datepicker(options).on('changeDate', function(e){
date_start_input.datepicker("setEndDate", e.date);
});
};
$(document).ready(function() {
set_parameters();
});
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/js/bootstrap.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.1/js/bootstrap-datepicker.min.js"></script>
<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.css" rel="stylesheet"/>
<link rel="stylesheet" href="https://formden.com/static/cdn/bootstrap-iso.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.1/css/bootstrap-datepicker3.css"/>
<input class="form-control" id="start_date" name="start_date" placeholder="MM DD, YYYY" type="text" style="border-radius: 0;"/>
<input class="form-control" id="end_date" name="end_date" placeholder="MM DD, YYYY" type="text" style="border-radius: 0;"/>
我正在尝试创建一个日期范围,在选择 start_date
之后,end_date
将只允许用户选择 start_date 之后的日期,反之亦然。这是一个代码片段:
main.js
function set_parameters() {
var date_start_input=$('#start_date');
var date_end_input=$('#end_date');
var container=$('.bootstrap-iso form').length>0 ? $('.bootstrap-iso form').parent() : "body";
var options_start={
format: 'MM dd, yyyy',
container: container,
todayHighlight: true,
autoclose: true,
orientation: 'top left',
onSelect: function(selectedDate) {
date_end_input.datepicker("option", "maxDate", selectedDate);
}
};
var options_end={
format: 'MM dd, yyyy',
container: container,
todayHighlight: true,
autoclose: true,
orientation: 'top left',
onSelect: function(selectedDate) {
date_start_input.datepicker("option", "minDate", selectedDate);
}
};
date_start_input.datepicker(options_start);
date_end_input.datepicker(options_end);
};
$(document).ready(function() {
set_parameters();
});
index.html
<head>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<link rel="stylesheet" href="https://formden.com/static/cdn/bootstrap-iso.css" />
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.1/js/bootstrap-datepicker.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.1/css/bootstrap-datepicker3.css"/>
</head>
...
<input class="form-control" id="start_date" name="start_date" placeholder="MM DD, YYYY" type="text" style="border-radius: 0;"/>
<input class="form-control" id="end_date" name="end_date" placeholder="MM DD, YYYY" type="text" style="border-radius: 0;"/>
...
我尝试了几个主题的解决方案,但 none 对我有用。我认为最重要的是在更改日期时设置最大和最小日期。
我想你需要的代码是这样的:
<div class="container">
<div class='col-md-5'>
<div class="form-group">
<div class='input-group date' id='datetimepicker6'>
<input type='text' class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
<div class='col-md-5'>
<div class="form-group">
<div class='input-group date' id='datetimepicker7'>
<input type='text' class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
</div>
<script type="text/javascript">
$(function () {
$('#datetimepicker6').datetimepicker();
$('#datetimepicker7').datetimepicker({
useCurrent: false //Important! See issue #1075
});
$("#datetimepicker6").on("dp.change", function (e) {
$('#datetimepicker7').data("DateTimePicker").minDate(e.date);
});
$("#datetimepicker7").on("dp.change", function (e) {
$('#datetimepicker6').data("DateTimePicker").maxDate(e.date);
});
});
</script>
这不是我的代码。我在这里找到它:https://eonasdan.github.io/bootstrap-datetimepicker/#linked-pickers.
看起来您可能只是在文档就绪函数中缺少右括号
$(document).ready(function() {
set_parameters();
}
function set_parameters() {
var date_start_input=$('#start_date');
var date_end_input=$('#end_date');
var container=$('.bootstrap-iso form').length>0 ? $('.bootstrap-iso form').parent() : "body";
var options_start={
format: 'MM dd, yyyy',
container: container,
todayHighlight: true,
autoclose: true,
orientation: 'top left',
onSelect: function(selectedDate) {
date_end_input.datepicker("option", "maxDate", selectedDate);
}
};
var options_end={
format: 'MM dd, yyyy',
container: container,
todayHighlight: true,
autoclose: true,
orientation: 'top left',
onSelect: function(selectedDate) {
date_start_input.datepicker("option", "minDate", selectedDate);
}
};
date_start_input.datepicker(options_start);
date_end_input.datepicker(options_end);
};
$(document).ready(function() {
set_parameters();
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<head>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<link rel="stylesheet" href="https://formden.com/static/cdn/bootstrap-iso.css" />
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.1/js/bootstrap-datepicker.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.1/css/bootstrap-datepicker3.css"/>
</head>
...
<input class="form-control" id="start_date" name="start_date" placeholder="MM DD, YYYY" type="text" style="border-radius: 0;"/>
<input class="form-control" id="end_date" name="end_date" placeholder="MM DD, YYYY" type="text" style="border-radius: 0;"/>
如果您还不知道 jQuery UI Datepicker here,您还可以阅读更多内容。
您的代码中有几个错误:
- 日期选择器没有选项
onSelect
,您必须监听changeDate
事件 - 日期选择器既没有
minDate
也没有maxDate
option/method,你必须使用setStartDate
andsetEndDate
这是一个工作示例:
function set_parameters() {
var date_start_input = $('#start_date');
var date_end_input = $('#end_date');
var container = $('.bootstrap-iso form').length>0 ? $('.bootstrap-iso form').parent() : "body";
var options = {
format: 'MM dd, yyyy',
container: container,
todayHighlight: true,
autoclose: true,
orientation: 'top left'
};
date_start_input.datepicker(options).on('changeDate', function(e){
date_end_input.datepicker("setStartDate", e.date);
});
date_end_input.datepicker(options).on('changeDate', function(e){
date_start_input.datepicker("setEndDate", e.date);
});
};
$(document).ready(function() {
set_parameters();
});
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/js/bootstrap.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.1/js/bootstrap-datepicker.min.js"></script>
<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.css" rel="stylesheet"/>
<link rel="stylesheet" href="https://formden.com/static/cdn/bootstrap-iso.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.1/css/bootstrap-datepicker3.css"/>
<input class="form-control" id="start_date" name="start_date" placeholder="MM DD, YYYY" type="text" style="border-radius: 0;"/>
<input class="form-control" id="end_date" name="end_date" placeholder="MM DD, YYYY" type="text" style="border-radius: 0;"/>