2013-08-29 21 views
16

Ok, quindi sono nuovo nell'usare framework e librerie js e sto cercando di usarlo bootstrap e bootstrap datepicker per un modulo e non ho idea se ho l'ordine dei file corretto ma i link è come sono impostati i file, e so molto poco di javascript, praticamente tutto quello che ho in codice è php ma ho bisogno di questo per un modulo.Come usare bootstrap datepicker

Ecco il mio modulo di prova per la datepicker bootstrap:

<!DOCTYPE html> 
<html> 
<head> 
<title>Testing</title> 
<meta charset="utf-8"> 

<link rel="stylesheet" href="_css/datepicker.css"> 
<link rel="stylesheet" href="_css/bootstrap.css"> 
<link rel="stylesheet" href="_css/bootstrap-responsive.css"> 
<script type="text/javascript" src="datepicker/bootstrap-datepicker.js"></script> 
</head> 
<body> 
<center> 
     <h1>BootStrap Datepicker</h1> 
    <form> 
    <div class="well span12 main"> 
    <input type="text" id="dp1" class="span2 datepicker" placeholder="Date..." 
      name="date"> <br> 
     </div> 
     <input type="submit" value="Search" class="btn"> 
    </form> 
</center> 

<!-- JAVAscript -----------------------------------------------------------------> 
<script type="text/javascript" src="jquery.js"></script> 
<script type="text/javascript" src="_js/bootstrap-datepicker.js"></script> 
<script type="text/javascript" src="_js/bootstrap.js"></script> 
</body> 
</html> 

Che cosa sto facendo di sbagliato?

+4

hai un tag di script 'bootstrap-datepicker.js' in testa, anche bootstrap.js dovrebbe essere caricato prima del plugin e devi inizializzare il plugin sul tuo elemento, non funzionerà solo perché hai impostato la classe Datepicker –

risposta

24

È necessario includere bootstrap-datepicker.js dopo bootstrap.js e si dovrebbe associare il datepicker al vostro controllo.

$(function(){ 
    $('.datepicker').datepicker({ 
     format: 'mm-dd-yyyy' 
    }); 
}); 
+0

Che cosa è esattamente il controllo e come legare il DatePicker, e anche da dove viene il codice che hai scritto qui? È andare nei suoi tag di script con l'html e se sì dove nel html? – user2701687

+2

Aggiungi il codice di esempio nella risposta al tuo tag script dopo che js include. Dovrebbe funzionare e potreste voler modificare le impostazioni per datepicker –

+0

c'è un modo per ottenere ciò tramite java-script .. no jquery – NMathur

2

credo che bisogna fare riferimento bootstrap.js prima bootstrap-datepicker.js

2

uomo è possibile utilizzare la base Bootstrap Datepicker questo modo:

<!DOCTYPE html> 
<head runat="server"> 
<title>Test Zone</title> 
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"/> 
<link rel="stylesheet" type="text/css" href="Css/datepicker.css" /> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script> 
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
<script src="../Js/bootstrap-datepicker.js"></script> 
<script type="text/javascript"> 
    $(document).ready(function() { 
     $('#pickyDate').datepicker({ 
      format: "dd/mm/yyyy" 
     }); 
    }); 
</script> 

e all'interno del corpo:

<body> 
<div id="testDIV"> 
    <div class="container"> 
     <div class="hero-unit"> 
      <input type="text" placeholder="click to show datepicker" id="pickyDate"/> 
     </div> 
    </div> 
</div> 

datepicker .css e bootstrap-datepicker.js è possibile scaricare da here sul pulsante di download sotto "Informazioni" sul lato sinistro. Spero che questo aiuti qualcuno, saluti.

+1

funziona bene – user3098137

Problemi correlati