부트 스트랩 날짜 선택기

Question

드롭 다운 날짜 선택 도구에서 선택한 날짜를 강조 표시하기 위해 부트 스트랩 datepicker를 가져 오려고합니다. 현재이 작업을 수행하고 있지 않습니다. 무엇이 누락 되었습니까?

<div class="input-append date" id="datepicker" data-date="dateValue: Customer.DateOfBirth" data-date-format="dd-mm-yyyy"> 
    <input class="span2" size="16" type="text" data-bind="value: Customer.DateOfBirth" readonly="readonly" /> 
    <span class="add-on"><i class="icon-calendar"></i></span> 
</div> 

Answer 1

자바 스크립트 $('#datepicker').datepicker();​을 통해 datepicker를 호출해야합니다.

은 datepicker.css

Code Example/Result

• 이 유 부트 스트랩 - datepicker.js에게 & 부트 스트랩을 가지고해야 이것에 대한

Answer 2

<linkrel="stylesheet"href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css"> 
<script src="//code.jquery.com/jquery-1.10.2.js"></script> 
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script> 

<meta name="viewport" content="width=device-width, initial-scale=1"> 
<link href="css/bootstrap.min.css" rel="stylesheet" type="text/css"/> 
<script src="js/bootstrap.min.js" type="text/javascript"></script> 

<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
<link href="http://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet"> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css"> 
<script src="js/bootstrap-datepicker.js" type="text/javascript"></script> 
<script src="js/bootstrap-datepicker.min.js" type="text/javascript"></script> 


<script> 

    $(document).ready(function() { 
     $('#datePicker') 
      .datepicker({ 
       format: 'mm/dd/yyyy' 
      }) 
      .on('changeDate', function(e) { 
       // Revalidate the date field 
       $('#eventForm').formValidation('revalidateField', 'date'); 
      }); 

     $('#eventForm').formValidation({ 
      framework: 'bootstrap', 
      icon: { 
       valid: 'glyphicon glyphicon-ok', 
       invalid: 'glyphicon glyphicon-remove', 
       validating: 'glyphicon glyphicon-refresh' 
      }, 
      fields: { 
       name: { 
        validators: { 
         notEmpty: { 
          message: 'The name is required' 
         } 
        } 
       }, 
       date: { 
        validators: { 
         notEmpty: { 
          message: 'The date is required' 
         }, 
         date: { 
          format: 'MM/DD/YYYY', 
          message: 'The date is not a valid' 
         } 
        } 
       } 
      } 
     }); 
    }); 

</script> 

<div class="form-group"> 
    <div class="date"> 
     <div class="input-group input-append date" id="datePicker"> 
      <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> 

bootstrap.css 업데이트 포함, 선택한 날짜를 hightlight하려면 -datepicker.min.js files.U는 $ ('# datePicke r '). datepicker(); 메서드가 있지만 자체 기본 설정이 제공됩니다. 그래서 스크립트 태그에서 나는 datepicker() 메서드에서 내 자신의 사용자 정의를 적용했습니다. 그러면 body 태그에 정의 된 div 태그에 datepicker 입력 구성 요소를 만들었지 만 간단히 말해서 meke가 있습니다.

질문의 해결책은 span 태그입니다. datepicker 입력 구성 요소에 아이콘을 적용하는 것은 어느 것입니까? glyphicon glyphicon-calendar 인 캘린더 아이콘을 선택했습니다. 그러나 브라우저에 텍스트 입력으로 아이콘을 그룹화하는 데 사용되는 span 태그에 class = "input-group-addon add-on"을 작성하여 아이콘을 embed 할 것이라고 말하기 전에.