bootstrap datepicker不能在javascript裏工作

爲什麼bootstrap不能在JavaScript裏面工作，而是在外面工作。bootstrap datepicker不能在javascript裏工作

這裏是我的代碼：

var date = new Date(); 
 
\t \t date.setDate(date.getDate()); 
 

 
$('.datepicker').datepicker({ 
 
    \t startDate: date, 
 
     autoclose: true, 
 
     format: "mm-dd-yyyy", 
 
     todayHighlight: true, 
 
     orientation: "top auto", 
 
     todayBtn: true, 
 
     todayHighlight: true, 
 
    }); 
 
var rowCount = 1; 
 

 
function removeRow(removeNum) { 
 
jQuery('#rowCount'+removeNum).remove(); 
 
rowCount --; 
 
rcount(); 
 
} 
 

 
function addMoreRows(frm) { 
 
rowCount ++; 
 
var recRow = '<p id="rowCount'+rowCount+'"><tr><td><input id="datepkr" class="form-control datepicker" style="width:60%; float:left;" name="" type="text"/></td><td><a style="float:left;" href="javascript:void(0);" onclick="removeRow('+rowCount+');"><i class="glyphicon glyphicon-remove" style="color:red;"></i></a></td></tr></p>'; 
 
jQuery('#addedRows').append(recRow); 
 

 
\t \t if (rowCount>15){ 
 
\t \t \t $('#btnAdd').prop('disabled', true); 
 
\t \t } 
 

 
} 
 
function rcount(){ 
 
\t if (rowCount==3){ 
 
\t \t jQuery('#x2').hide('slow'); 
 
\t \t jQuery('#x3').show('slow'); \t 
 
\t \t } 
 
\t \t if (rowCount==4){ 
 
\t \t jQuery('#x3').hide('slow'); 
 
\t \t jQuery('#x4').show('slow'); \t 
 
\t \t } 
 
\t \t if (rowCount==5){ 
 
\t \t jQuery('#x4').hide('slow'); 
 
\t \t jQuery('#x5').show('slow'); \t 
 
\t \t } 
 
\t \t if (rowCount==6){ 
 
\t \t jQuery('#x5').hide('slow'); 
 
\t \t jQuery('#x6').show('slow'); \t 
 
\t \t } 
 
\t \t if (rowCount==7){ 
 
\t \t jQuery('#x6').hide('slow'); 
 
\t \t jQuery('#x7').show('slow'); \t 
 
\t \t } 
 
\t \t if (rowCount==8){ 
 
\t \t jQuery('#x7').hide('slow'); 
 
\t \t jQuery('#x8').show('slow'); \t 
 
\t \t } 
 
\t \t if (rowCount==9){ 
 
\t \t jQuery('#x8').hide('slow'); 
 
\t \t jQuery('#x9').show('slow'); \t 
 
\t \t } 
 
\t \t if (rowCount==10){ 
 
\t \t jQuery('#x9').hide('slow'); 
 
\t \t jQuery('#x10').show('slow'); \t 
 
\t \t } 
 
\t \t if (rowCount==11){ 
 
\t \t jQuery('#x10').hide('slow'); 
 
\t \t jQuery('#x11').show('slow'); \t 
 
\t \t } 
 
\t \t if (rowCount==12){ 
 
\t \t jQuery('#x11').hide('slow'); 
 
\t \t jQuery('#x12').show('slow'); \t 
 
\t \t } 
 
\t \t if (rowCount==13){ 
 
\t \t jQuery('#x12').hide('slow'); 
 
\t \t jQuery('#x13').show('slow'); \t 
 
\t \t } 
 
\t \t if (rowCount==14){ 
 
\t \t jQuery('#x13').hide('slow'); 
 
\t \t jQuery('#x14').show('slow'); \t 
 
\t \t } 
 
\t \t if (rowCount==15){ 
 
\t \t jQuery('#x14').hide('slow'); 
 
\t \t jQuery('#x15').show('slow'); \t 
 
\t \t } 
 
\t \t if (rowCount==16){ 
 
\t \t jQuery('#x15').hide('slow'); 
 
\t \t jQuery('#x16').show('slow'); \t 
 
\t \t } 
 
\t \t 
 
\t \t if (rowCount>14){ 
 
\t \t \t $('#btnAdd').prop('disabled', true); 
 
\t \t } 
 
\t \t else{ 
 
\t \t \t $('#btnAdd').prop('disabled', false); 
 
\t \t } 
 
}

<script src="https://code.jquery.com/jquery-3.1.0.js" integrity="sha256-slogkvB1K3VOkzAI8QITxV3VzpOnkeNVsKvtkYLMjfk=" crossorigin="anonymous"></script> 
 

 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"> 
 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css"> 
 
    <script src="http://code.jquery.com/jquery-1.11.1.js"></script> 
 
    <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script> 
 
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script> 
 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script> 
 
    <script type="text/javascript" src="js/blogController.js"></script> 
 

 
<table> \t 
 
\t <tr id="rowId"> 
 
\t <td><input name="" type="text" value="" class="datepicker"/></td> 
 
\t <td><button type="button" id="btnAdd" onclick="addMoreRows()" class="btn btn-primary"><i class="glyphicon glyphicon-plus"></i>ADD</button></td> 
 
\t </table> 
 
\t <div id="addedRows"></div> 
 
</td> 
 
</tr>

Here it is Showing the Datepicker but in a javascript generated input its not showing

希望有人幫助。謝謝。

來源

2016-09-09 Johnine

我不能完全肯定我明白你的意思是不是顯示「裏面的javascript」。裏面在哪裏，JavaScript的外部在哪裏？ – AgataB

您需要動態添加新行後重新初始化DatePicker。我認爲@Hardik Patel的答案將起作用。祝你好運。 – Qutayba

首先，您的第一行被錯誤地初始化。具體來說，這個：'$（'datepicker'）'..什麼是datepicker？一個類（在它之前添加一個）或一個ID（在它之前添加一個＃）？ –

您需要更正您的JS代碼。請嘗試下面的代碼。

$(document).ready(function() { 
    bindDatePicker($('.datepicker')); 

    $('button#btnAdd').click(function() { 
    var recRow = '<tr><td><input class="form-control datepicker" style="width:60%; float:left;" name="" type="text"/></td></tr>'; 
    alert(recRow); 
     jQuery('#addedRows').append(recRow); 
     bindDatePicker($('.datepicker')); 
     if (rowCount>15){ 
      $('#btnAdd').prop('disabled', true); 
     } 
    }); 
}); 

function bindDatePicker(element) { 
     $(element).datepicker({   
      autoclose: true, 
      format: "mm-dd-yyyy", 
      todayHighlight: true, 
      orientation: "top auto", 
      todayBtn: true, 
      todayHighlight: true, 
     }); 
}

您可以在這裏獲得演示：JSFIDDLE

來源

2016-09-09 10:08:32

謝謝哈迪克:)。我會嘗試你的代碼。 – Johnine

謝謝！它的工作現在！ – Johnine

bootstrap datepicker不能在javascript裏工作

回答

相關問題