Question

我有一个问题......

我想要一个带输入框的日历。

如果我点击它将在该输入框中显示的任何日期。

此日历选择多个日期。

所有日期都应显示在输入框中..

我正在附上2张图片

这就是我得到的东西

这就是我想要的

我的代码如下

HTML

$('.datepicker').datepicker({
	multidate:true,
});

<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.7.1/css/bootstrap-datepicker.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.7.1/js/bootstrap-datepicker.js"></script>

<div class="col-md-4 div-margin">
	<div class="datepicker"></div>
</div>

Answer 1

试试这段代码：我觉得这段代码很有用

<html>
<head>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.7.1/css/bootstrap-datepicker.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.7.1/js/bootstrap-datepicker.js"></script>
<script>

$(document).ready(function(){
$(".DateField").datepicker({
multidate:true,
});
     
$(".table-condensed tbody").click(function(){
setTimeout(function(){ $('.abc').val($('.DateField[type=hidden]').val()); }, 1000)


});

     
});

</script>

</head>
<body>

<div class="col-md-4 div-margin">
	<div class="DateField" value='' type='text'><input type='hidden' class='DateField' value=''></div>
	
	<input type='text' class='abc' value='' />
</div>
</body>
</html>

如何通过Bootstrap Datepicker显示带有输入框的日历

1 个答案: