试图在行内同时显示两个日历,并且在单击输入时不弹出。 Using bootstrap slider
$('.input-daterange input').each(function() {
$(this).datepicker({
format: "yyyy",
viewMode: "years",
minViewMode: "years",
updateViewDate: false
});
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.7.1/css/bootstrap-datepicker.min.css" rel="stylesheet" type="text/css" media="screen">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.7.1/js/bootstrap-datepicker.min.js"></script>
<div class="input-group input-daterange">
<input type="text" class="form-control" value="2012-04-05">
<div class="input-group-addon">to</div>
<input type="text" class="form-control" value="2012-04-19">
</div>
这是我在单个日历中使用内联的方式,但是我无法在日期范围和两个日历中使用它:
<div id="sandbox-container"><div></div></div>
$('#sandbox-container div').datepicker({
format: "yyyy",
viewMode: "years",
minViewMode: "years",
updateViewDate: false
});
我尝试了以下操作,但是它放置了三个日历,第一个div相邻两个,第二个div仅有一个日历
$('.input-daterange div').each(function() {
$(this).datepicker({
format: "yyyy",
viewMode: "years",
minViewMode: "years",
updateViewDate: false
});
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.7.1/css/bootstrap-datepicker.min.css" rel="stylesheet" type="text/css" media="screen">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.7.1/js/bootstrap-datepicker.min.js"></script>
<div class="input-group input-daterange">
<div></div>
<div></div>
<input type="hidden" class="form-control" value="2012-04-05">
<div class="input-group-addon">to</div>
<input type="hidden" class="form-control" value="2012-04-19">
</div>
答案 0 :(得分:2)
希望这会有所帮助。缺少一些CSS文件。
注意:如果有帮助,请see my answer here在单个日期选择器中选择一个范围。
$('.input-daterange input').each(function() {
$(this).datepicker({
format: "yyyy",
viewMode: "years",
minViewMode: "years",
updateViewDate: false
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.8.0/js/bootstrap-datepicker.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://uxsolutions.github.io/bootstrap-datepicker/bootstrap-datepicker/css/bootstrap-datepicker3.min.css" rel="stylesheet"/>
<div class="input-group input-daterange">
<input type="text" class="form-control" value="2012-04-05">
<div class="input-group-addon">to</div>
<input type="text" class="form-control" value="2012-04-19">
</div>
答案 1 :(得分:0)
这是我最终对其改版的方式:
$('#sandbox-container').datepicker({
format: "yyyy",
startView: 1,
viewMode: "years",
minViewMode: "years",
minViewMode: "years",
multidate: true,
multidateSeparator: ", ",
autoClose: true,
}).on("changeDate",function(event){
var dates = event.dates, elem = $('#sandbox-container');
if(elem.data("selecteddates") == dates.join(",")) return; //To prevernt recursive call, that lead to lead the maximum stack in the browser.
if(dates.length>2) dates=dates.splice(dates.length-1);
dates.sort(function(a,b){return new Date(a).getTime() - new Date(b).getTime()});
elem.data("selecteddates",dates.join(",")).datepicker('setDates', dates);
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.7.1/css/bootstrap-datepicker.min.css" rel="stylesheet" type="text/css" media="screen">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.7.1/js/bootstrap-datepicker.min.js"></script>
<div id="sandbox-container">
<input name="usp-custom-14" id="usp-custom-14" type="text">
</div>