Bootstrap datepicker

Question

Açılış tarihi seçicide seçili tarihi vurgulamak için önyükleme tarihçisini almaya çalışıyorum. Şu anda bunu yapmıyor .. Neyi özlüyorum?

<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

Sen javascript $('#datepicker').datepicker();​ aracılığıyla datepicker aramak zorunda.

sadece datepicker.css

Code Example/Result

• u önyükleme-datepicker.js & ön yükleme alanı vardı zorunda bunun için

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 Güncelleme dahil, seçilen tarih hightlight için -datepicker.min.js files.U ayrıca $ ('# datePicke)' yi de arayabilir R ') datepicker (.); yöntem ancak kendi varsayılan ayarlarıyla birlikte gelir. Yani komut dosyasında, datepicker() yönteminde kendi kişiselleştirmeyi uygulamıştım. Daha sonra gövde etiketinde tanımlanmış div etiketinde bir datepicker girdi bileşeni yapıyorum, ancak kısaca ben de burayı alıyorum.

Soruların çözümü, span etiketleridir. Datepicker giriş bileşenindeki simgeleri uygulayan r. Glifikon glyphicon-calendar olan bir takvim simgesini seçtim. Ancak, tarayıcıya, benim metin girişi ile simge gruplamak için kullanılan span etiketine class = "input-group-addon add-on" yazarak bir simge yerleştirmek zorunda kalmadan önce söylemeliyim.