2017-10-30 6 views
0

하나의 문제가 있습니다 ...부트 스트랩 Datepicker로 입력 상자가있는 캘린더를 표시하는 방법

입력 상자가있는 캘린더가 필요합니다.

날짜를 클릭하면 해당 입력란에 표시됩니다.

이 캘린더는 여러 날짜를 선택합니다.

모든 날짜

내가이 내가

를 원하는 것입니다

Thats what I'm getting

받고 있어요 그게 문제

나는이 개 이미지

를 부착하고있어 .. 입력 상자에 표시해야

This is what I want

다음과 같이

내 코드는

HTML

$('.datepicker').datepicker({ 
 
\t 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"> 
 
\t <div class="datepicker"></div> 
 
</div>

+0

사용 입력 난을 생각한다 div의 nstead –

+0

캘린더도 표시하고 싶습니다 ..... – GYaN

답변

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"> 
 
\t <div class="DateField" value='' type='text'><input type='hidden' class='DateField' value=''></div> 
 
\t 
 
\t <input type='text' class='abc' value='' /> 
 
</div> 
 
</body> 
 
</html> \t

+1

No ............. – GYaN