如果克隆，则bootstrap datepicker不工作

时间：2017-01-30 11:00:57

标签： javascript jquery twitter-bootstrap datepicker

通过使用jquery clone（）我重复我的文档的div部分。这个div还包含bootstrap datepicker。但是，克隆的div's datepicker不起作用。我正在使用此日期选择器https://eonasdan.github.io/bootstrap-datetimepicker/

注意：在代码段中，在选择文件选项中添加多个文件，然后只会看到额外的日期选择器。

＆＃13;
＆＃13; 
/* Depending on number of documents description box and datepicker will repeat */

$("#docsUpload").change(function() {
   $("#multiShow").empty();                 // removes child elements
    var ele = document.getElementById($(this).attr('id'));
    var result = ele.files;
    var ff = result[0];
    $("#ff").html("<strong> File Name : </strong>"+ ff.name);

    for(var x = 0;x< result.length-1;x++){
       var fle = result[x+1];
       $('#multiShow').append("<div class='row'> <div class='col-sm-3'></div> <div class='col-sm-6'><hr>");
       $('#multiShow').append("&nbsp;<strong> File Name : </strong>"+fle.name);
       $('#multiShow').append("</div><div class='col-sm-3'></div></div>");
       $("#selectAll").clone(true).prop({ id:'thisisid_'+x}).appendTo('#multiShow');
    }
});


/* depending on selection box type of date changes */
$(document).ready(function(){
   $(".static").show();  // always display on page load
   $(".period").on('change',function(changeEvent){  //selection box value changed
    // var realId = $(".period").closest("div[id]").attr("id"); //get id
    var realId = $(changeEvent.target).closest("div[id]").attr("id");
    $('#'+realId+' .dateSelector').hide();
    //alert('#'+realId+' '+'.dateSelector');  // display id only show 'selectAll'

     var operation = '.'+this.value;
     $('#'+realId+' '+operation).show();

   });           // on period change
});     // document ready state


/* Format of datepicker */
$(document).ready(function(){
    $('.datetimepicker1').datetimepicker({
      format : "DD/MM/YYYY"
    });
    $('.datetimepicker2').datetimepicker({
      format : "MM/YYYY"
    });
    $('.datetimepicker3').datetimepicker({
      format : 'YYYY'
    });
    $('.datetimepicker5').datetimepicker({
      format : 'YYYY'
    });
    $('.datetimepicker7').datetimepicker({
     format : 'YYYY'
    });
    $('.datetimepicker9').datetimepicker({
      format : "DD/MM/YYYY"
    });
    $('.datetimepicker10').datetimepicker({
     format : "DD/MM/YYYY"
    });
});
＆＃13; 
.dateSelector{
    display: none;
  }

  h1{
    color:#2F4F4F;
  }
＆＃13; 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.45/css/bootstrap-datetimepicker.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.17.1/moment.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.45/js/bootstrap-datetimepicker.min.js"></script>


<div class="container-fluid">




<form name="dataSubmit" action="<?php echo base_url('client/store'); ?>"
   method="POST" enctype="multipart/form-data" onsubmit="return validateForm()">
<hr/>

<div class="row">
<div class="col-sm-3"></div>
<div class="col-sm-6">
  <div class="form-group has-feedback">
  <label for="upload">Upload Files : </label>
  <input type="file" name="docs[]" id="docsUpload" class="" multiple="multiple" required="" />
  </div>
</div>
<div class="col-sm-3"></div>
</div><!-- .row -->

<div class="row">
<div class="col-sm-3"></div>
<div class="col-sm-6">
  <div class="form-group has-feedback">
    <span id="ff"></span>
  </div>
</div>
<div class="col-sm-3"></div>
</div><!-- .row -->


<div id="selectAll">
<div class="row">
<div class="col-sm-3"></div>
<div class="col-sm-6">
  <div class="form-group has-feedback">
  <input type="text" style="margin:5px 0px;" name="describe[]" class="form-control" placeholder="What this file about?" required="" />
  </div>
</div>
<div class="col-sm-3"></div>
</div><!-- .row -->

<div class="row">
<div class="col-sm-3"></div>
<div class="col-sm-6">
  <div class="form-group">
  <label for="upload"> Select Type & Date of document below:  </label>
  </div>
</div>
<div class="col-sm-3"></div>
</div> <!-- .row -->

<div class="row">
<div class="col-sm-3"></div>
<div class="col-sm-2">
  <div class="form-group">
  <select name="period" class="period">
    <option value="static" selected="selected">Static</option>
    <option value="monthly">Monthly</option>
    <option value="quaterly">Quaterly</option>
    <option value="semester">Semester</option>
    <option value="yearly">Yearly</option>
    <option value="other">Other</option>
  </select>
  </div>
</div>

<!-- begin : datepicker -->
<div  class="col-sm-4 dateSelector static">
    <div class="input-group date datetimepicker1">
      <input type="text" name="staticDate[]" class="form-control"  />	<span class="input-group-addon"><span class="glyphicon-calendar glyphicon"></span></span>
    </div>
</div>

<div class="col-sm-4 dateSelector monthly">
<div class="input-group date datetimepicker2">
    <input type="text" name="monthlyDate[]" class="form-control"  />	<span class="input-group-addon"><span class="glyphicon-calendar glyphicon"></span></span>
</div>
</div>

<div class="dateSelector quaterly">
<div class="col-sm-2">
<select name="periodQuater[]">
  <option value="first">January - March</option>
  <option value="second">April - June</option>
  <option value="third">July - September</option>
  <option value="fourth">October - December</option>
</select><br/><br/>
</div>
<div class="col-sm-2">
<div class="input-group date datetimepicker3">
    <input type="text" name="quaterlyDate" class="form-control"  />	<span class="input-group-addon"><span class="glyphicon-calendar glyphicon"></span></span>
</div>
</div>
</div>

<div class="dateSelector semester">
<div class="col-sm-2">
<select name="periodSemester[]">
  <option value="semfirst">April - September </option>
  <option value="semsecond">October - March</option>
</select><br/><br/>
</div>

<div class="col-sm-2">
<div class="input-group date datetimepicker5">
  <input type="text" name="semesterDate[]" class="form-control"  />	<span class="input-group-addon"><span class="glyphicon-calendar glyphicon"></span></span>
</div>
</div>
</div>

<div class="dateSelector yearly">
<div class="col-sm-2">
<div class="input-group date datetimepicker7">
    <input type="text" name="yearDate[]" class="form-control"  />	<span class="input-group-addon"><span class="glyphicon-calendar glyphicon"></span></span>
</div>
</div>
</div>

<div class="dateSelector other">
<div class="col-sm-2">
<div class="input-group date datetimepicker9">
    <input type="text" name="otherDateF[]" class="form-control"  />	<span class="input-group-addon"><span class="glyphicon-calendar glyphicon"></span></span>
</div> <br/></div>
<div class="col-sm-2">
<div class="input-group date datetimepicker10">
    <input type="text" name="otherDateS[]" class="form-control"  />	<span class="input-group-addon"><span class="glyphicon-calendar glyphicon"></span></span>
</div></div>
</div>


<div class="col-sm-3"></div>
</div> <!-- .row for selector-->
</div> <!-- #selectAll -->

<div id="multiShow"> </div>

<!-- end : datepicker -->
<div class="row">
<div class="col-sm-3"></div>
<div class="col-sm-6 form-group">
<br/>
<button type="submit" class="btn btn-primary form-control"> Submit </button>
</div>
<div class="col-sm-3"></div>
</div>
</form>
</div> <!-- .container -->
＆＃13;
＆＃13;
＆＃13;

3 个答案:

答案 0 :(得分：1)

将日期选择器克隆到DOM后，您必须执行以下操作才能将日期选择器绑定到新创建的元素，我建议将相同的class应用于所有日期选择器inputs与以下相同的方法绑定datepicker。

您还可以阅读此documentation了解更多信息

$('.datepicker').datepicker('update');

答案 1 :(得分：1)

$("#docsUpload").change(function() {
debugger;
   $("#multiShow").empty();                 // removes child elements
    var ele = document.getElementById($(this).attr('id'));
    var result = ele.files;
    var ff = result[0];
    $("#ff").html("<strong> File Name : </strong>"+ ff.name);

    for(var x = 0;x< result.length-1;x++){
       var fle = result[x+1];
       $('#multiShow').append("<div class='row'> <div class='col-sm-3'></div> <div class='col-sm-6'><hr>");
       $('#multiShow').append("&nbsp;<strong> File Name : </strong>"+fle.name);
       $('#multiShow').append("</div><div class='col-sm-3'></div></div>");
       $("#selectAll").clone().prop({ id:'thisisid_'+x}).appendTo('#multiShow');
    }

        $('.dpstatic').datetimepicker({
      format : "DD/MM/YYYY"
    });
    $('.dpmonthly').datetimepicker({
      format : "MM/YYYY"
    });
    $('.dpquaterly').datetimepicker({
      format : 'YYYY'
    });
    $('.dpsemester').datetimepicker({
      format : 'YYYY'
    });
    $('.dpyearly').datetimepicker({
     format : 'YYYY'
    });
    $('.dpother').datetimepicker({
      format : "DD/MM/YYYY"
    });
    $('.dpother').datetimepicker({
     format : "DD/MM/YYYY"
    });



});


/* depending on selection box type of date changes */
$(document).ready(function(){
   $(".static").show();  // always display on page load
   $("body").on('change','.period',function(changeEvent){  //selection box value changed
    // var realId = $(".period").closest("div[id]").attr("id"); //get id
    var realId = $(changeEvent.target).closest("div[id]").attr("id");
    $('#'+realId+' .dateSelector').hide();
    //alert('#'+realId+' '+'.dateSelector');  // display id only show 'selectAll'

     var operation = '.'+this.value;
     $('#'+realId+' '+operation).show();

   });           // on period change
});     // document ready state


$(document).ready(function(){
     $('.dpstatic').datetimepicker({
      format : "DD/MM/YYYY"
    });
    $('.dpmonthly').datetimepicker({
      format : "MM/YYYY"
    });
    $('.dpquaterly').datetimepicker({
      format : 'YYYY'
    });
    $('.dpsemester').datetimepicker({
      format : 'YYYY'
    });
    $('.dpyearly').datetimepicker({
     format : 'YYYY'
    });
    $('.dpother').datetimepicker({
      format : "DD/MM/YYYY"
    });
    $('.dpother').datetimepicker({
     format : "DD/MM/YYYY"
    });

});
  .dateSelector{
    display: none;
  }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.45/css/bootstrap-datetimepicker.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.17.1/moment.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.45/js/bootstrap-datetimepicker.min.js"></script>



<div class="container-fluid">

<form name="dataSubmit" action="<?php echo base_url('client/store'); ?>"
   method="POST" enctype="multipart/form-data" onsubmit="return validateForm()">
<hr/>

<div class="row">
<div class="col-sm-3"></div>
<div class="col-sm-6">
  <div class="form-group has-feedback">
  <label for="upload">Upload Files : </label>
  <input type="file" name="docs[]" id="docsUpload" class="" multiple="multiple" required="" />
  </div>
</div>
<div class="col-sm-3"></div>
</div><!-- .row -->

<div class="row">
<div class="col-sm-3"></div>
<div class="col-sm-6">
  <div class="form-group has-feedback">
    <span id="ff"></span>
  </div>
</div>
<div class="col-sm-3"></div>
</div><!-- .row -->


<div id="selectAll">
<div class="row">
<div class="col-sm-3"></div>
<div class="col-sm-6">
  <div class="form-group has-feedback">
  <input type="text" style="margin:5px 0px;" name="describe[]" class="form-control" placeholder="What this file about?" required="" />
  </div>
</div>
<div class="col-sm-3"></div>
</div><!-- .row -->

<div class="row">
<div class="col-sm-3"></div>
<div class="col-sm-6">
  <div class="form-group">
  <label for="upload"> Select Type & Date of document below:  </label>
  </div>
</div>
<div class="col-sm-3"></div>
</div> <!-- .row -->

<div class="row">
<div class="col-sm-3"></div>
<div class="col-sm-2">
  <div class="form-group">
  <select name="period" class="period">
    <option value="static" selected="selected">Static</option>
    <option value="monthly">Monthly</option>
    <option value="quaterly">Quaterly</option>
    <option value="semester">Semester</option>
    <option value="yearly">Yearly</option>
    <option value="other">Other</option>
  </select>
  </div>
</div>

<!-- begin : datepicker -->
<div  class="col-sm-4 dateSelector static">
    <div class="input-group date datetimepicker dpstatic">
      <input type="text" name="staticDate[]" class="form-control"  />	<span class="input-group-addon"><span class="glyphicon-calendar glyphicon"></span></span>
    </div>
</div>

<div class="col-sm-4 dateSelector monthly">
<div class="input-group date datetimepicker dpmonthly">
    <input type="text" name="monthlyDate[]" class="form-control"  />	<span class="input-group-addon"><span class="glyphicon-calendar glyphicon"></span></span>
</div>
</div>

<div class="dateSelector quaterly">
<div class="col-sm-2">
<select name="periodQuater[]">
  <option value="first">January - March</option>
  <option value="second">April - June</option>
  <option value="third">July - September</option>
  <option value="fourth">October - December</option>
</select><br/><br/>
</div>
<div class="col-sm-2">
<div class="input-group date datetimepicker dpquaterly">
    <input type="text" name="quaterlyDate" class="form-control"  />	<span class="input-group-addon"><span class="glyphicon-calendar glyphicon"></span></span>
</div>
</div>
</div>

<div class="dateSelector semester">
<div class="col-sm-2">
<select name="periodSemester[]">
  <option value="semfirst">April - September </option>
  <option value="semsecond">October - March</option>
</select><br/><br/>
</div>

<div class="col-sm-2">
<div class="input-group date datetimepicker dpsemester">
  <input type="text" name="semesterDate[]" class="form-control"  />	<span class="input-group-addon"><span class="glyphicon-calendar glyphicon"></span></span>
</div>
</div>
</div>

<div class="dateSelector yearly">
<div class="col-sm-2">
<div class="input-group date datetimepicker dpyearly">
    <input type="text" name="yearDate[]" class="form-control"  />	<span class="input-group-addon"><span class="glyphicon-calendar glyphicon"></span></span>
</div>
</div>
</div>

<div class="dateSelector other">
<div class="col-sm-2">
<div class="input-group date datetimepicker dpother">
    <input type="text" name="otherDateF[]" class="form-control"  />	<span class="input-group-addon"><span class="glyphicon-calendar glyphicon"></span></span>
</div> <br/></div>
<div class="col-sm-2">
<div class="input-group date datetimepicker dpother">
    <input type="text" name="otherDateS[]" class="form-control"  />	<span class="input-group-addon"><span class="glyphicon-calendar glyphicon"></span></span>
</div></div>
</div>


<div class="col-sm-3"></div>
</div> <!-- .row for selector-->
</div> <!-- #selectAll -->

<div id="multiShow"> </div>

<div class="row">
<div class="col-sm-3"></div>
<div class="col-sm-6 form-group">
<br/>
<button type="submit" class="btn btn-primary form-control"> Submit </button>
</div>
<div class="col-sm-3"></div>
</div>
</form>
</div> <!-- .container -->

运行代码段以检查我与原始代码相比所做的更改。

我所做的改变：

（1）正如Curiousdev指出的那样

  • 从clone（）
    • 中删除true
  • 在句点中重复所有日期格式

（2）这非常重要，

  • 为每种日历类型添加唯一的类元素。结帐JSFiddle并搜索dpstatic，dpmonthly，dpquaterly，dpsemester，dpyearly，dpother。如果不添加此元素，日历将不会显示相应的日期格式，有时甚至不会显示日历。

小提琴：https://jsfiddle.net/rv285q8x/

感谢@Curiousdev和@Ataur Ra​​hman Munna提供宝贵的信息和帮助。

答案 2 :(得分：0)

您只需复制并粘贴我的代码即可。

 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/smoothness/jquery-ui.css" />
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>

<script type="text/javascript">
    jQuery(document).ready(function(){
        jQuery('#datetimepicker').datepicker();
    })
</script>

<input id="datetimepicker" type="text">
相关问题
最新问题