Bootstrap datepicker

Question

Sto cercando di ottenere datepicker di bootstrap per evidenziare la data selezionata nel selettore di selezione a discesa. Al momento non sta facendo questo .. Cosa mi manca?

<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

È necessario chiamare il datepicker tramite javascript $('#datepicker').datepicker();​.

Per hightlight la data selezionata, è sufficiente includere datepicker.css

Code Example/Result

• Aggiornato bootstrap.css

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> 

per questo u hanno a avuto bootstrap-datepicker.js & bootstrap -datepicker.min.js files.U può anche chiamare $ ('# datePicke r ') datepicker().; metodo ma viene fornito con le proprie impostazioni predefinite. Quindi nel tag script ho applicato la mia personalizzazione nel metodo datepicker(). Quindi ho appena creato un componente di input di datepicker nel tag div che è definito nel body tag, ma l'ho richiamato brevemente.

La soluzione di u r question è il tag span. Quale r applica le icone sul componente di input di DatePicker. Ho scelto un'icona calendario che è glyphicon glyphicon-calendar. Ma prima di dire al browser che sto andando a incorporare un'icona scrivendo class = "add-on di input-group-addon" nel tag span che viene usato per raggruppare l'icona con l'input di testo.