克隆年份和月份中的jquery日期选择器不工作，默认日期未显示

时间：2015-09-15 07:01:23

标签： javascript jquery html datepicker

目前正在使用jquery处理clone和datepicker。随着我目前的代码克隆发生完美。在克隆div中，datepicker正在工作，但它不像原始工作。

  1. 当用户点击添加更多按钮时，它正在使用日期完美地克隆整个div，但如果我从克隆的div 年份和月份下拉列表中选择日期文本字段，则不显示。

  2. 当用户点击原始Degree日期中的“添加更多”按钮时，它显示当前日期，但在克隆中未显示。

    3. 我试过了我身边的所有可能性我没有得到

    我已经尝试为datepicker添加了destroy仍然无法正常工作

    这是我的jquery代码

    var i = 1;
    $(document).on("click", ".edu_add_button", function() {
    var i = $('.cloned-row1').length;
    $(".cloned-row1:last").clone(true).insertAfter(".cloned-row1:last").attr({
            'id': function(_, id) {
                    return id + i
            },
            'name': function(_, name) {
                    return name + i
            }
    }).end().find('[id]').val('').attr({
            'id': function(_, id) {
                    return id + i
            }
    });
    $(".cloned-row1:last").find(".school_Name").attr('disabled', true).val('');
    $(".cloned-row1:last").find(".degree_Description").attr('disabled', true).val('');
    $(".cloned-row1:last").find('.datepicker,.datepicker1').removeClass('hasDatepicker').datepicker();

    i++;

    return false;
  });

  $("#txt_Degdat").datepicker({
          dateFormat: "mm-dd-yy",
          changeMonth: true,
          changeYear: true,
          yearRange: '1900:2100'
  }).on('change', function() {
          if ($('#txt_Degdat').valid()) {
                  $('#txt_Degdat').removeClass('errRed');
          }
          // triggers the validation test on change
  }).datepicker("setDate", "0");
  $("#txt_Trsdat").datepicker({
          dateFormat: "mm-dd-yy",
          changeMonth: true,
          changeYear: true,
          yearRange: '1900:2100'
  }).on('change', function() {
          if ($('#txt_Trsdat').valid()) {
                  $('#txt_Trsdat').removeClass('errRed');
          }
          // triggers the validation test on change
  });



  $(document).on('click', ".btn_less1", function() {
          var len = $('.cloned-row1').length;
          if (len > 1) {
                  $(this).closest(".btn_less1").parent().parent().parent().remove();
          }
  });

    这是HTML代码

    <div class="container-fluid cloned-row1">
<div class="row">
    <div class="col-xs-6 col-sm-3 col-md-4 col-lg-3">
        <label>School Name</label>
        <br/>
        <select class="slt_Field txt_schName" name="txt_schName[]">
            <option value="">Please Select</option>
            <option value="Emirates College of Technology- UAE">COL000001</option>
            <option value="Al Khawarizmi International College- UAE">COL000002</option>
            <option value="Syscoms College">COL000003</option>
            <option value="Abounajm Khanj Pre-Uni Center">COL000004</option>
            <option value="Advanced Placement">COL000005</option>
            <option value="Al Buraimi College (Uni Clge)">COL000006</option>
            <option value="Al-Ain Community College">COL000007</option>
            <option value="AMA Computer College">COL000008</option>
            <option value="Arab Academy for Bankg and Fin">COL000009</option>
            <option value="ARABACDSCITECHMARTIMETRNS">COL000010</option>
            <option value="Arapahoe Community College">COL000011</option>
        </select>
    </div>
    <div class="col-xs-6 col-sm-3 col-md-4 col-lg-3">
        <br>
        <input type="text" class="ipt_Field school_Name" name="school_Name[]" disabled/>
    </div>
    <div class="col-xs-6 col-sm-3 col-md-4 col-lg-3">
        <label><span class="text-error">*</span>High School Avg / CGPA</label>
        <br/>
        <input type="text" class="ipt_Field ipt_Havg" id="" name="ipt_Havg[]" />
    </div>
    <div class="col-xs-6 col-sm-3 col-md-4 col-lg-3">
        <label><span class="text-error">*</span>Grade Type @</label>
        <br/>
        <select class="slt_Field ipt_grd" name="ipt_grd[]">
            <option value="">Please Select</option>
            <option value="n">100</option>
            <option value="n1">4</option>
            <option value="c">CHAR</option>
        </select>
    </div>
    <input type="text" placeholder="MM/DD/YYYY" class="ipt_Field txt_Degdat" name="txt_Fdob" />
</div>
<button class="btn_less1 btn_right ">Less</button>
<button class="btn_more btn_right edu_add_button">Add More</button>

    这是编织Link

    请问我在这里做错了什么。

    我已经尝试了所有可能的任何想法，但

2 个答案:

答案 0 :(得分：1)

您不得克隆任何具有分配给它的唯一ID或其子元素的元素。

您是要尝试克隆$("#txt_Degdat")和$("#txt_Trsdat")吗？

使用类名作为选择器。

答案 1 :(得分：1)

我想这应该是答案，

＆＃13;
＆＃13; 
$(document).ready(function(){
	jQuery.validator.setDefaults({
	  debug: true,
	  success: "valid"
	});
	var form = $( "#myform" );
	form.validate();
	$(".ipt_Field").on('change', function() {
		if ($(this).valid()) {
			$(this).removeClass('errRed');
		}
		// triggers the validation test on change
	});		
	
	bindDatePicker($("#txt_Degdat"));	
	
});

function bindDatePicker(ele) {
	ele.datepicker({
		dateFormat: "mm-dd-yy",
		changeMonth: true,
		changeYear: true,
		yearRange: '1900:2100'
	}).datepicker("setDate", "0");
}

var rowId = 'rowId';
var count = 1;
$(document).on("click", ".edu_add_button", function() {
	//var i = $('.cloned-row1').length;
	var that = $(".cloned-row1:first").clone(false);
	that.insertAfter(".cloned-row1:last").attr({'id': rowId + count}).end().find('[id]').val('').attr({
		'id': function(_, id) {
				return id + count
		}
	});

	that.find(".school_Name").attr('disabled', true).val('');
	that.find(".degree_Description").attr('disabled', true).val('');
	//that.find('.datepicker,.datepicker1').removeClass('hasDatepicker').datepicker();
	that.find("#txt_Degdat"+count).removeClass('hasDatepicker');
	bindDatePicker(that.find("#txt_Degdat"+count));	
	count++;

	return false;
});

$(document).on('click', ".btn_less1", function() {
	var len = $('.cloned-row1').length;
	if (len > 1) {
		  $(this).parent().parent().remove();
	}
});
＆＃13; 
<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.css" rel="stylesheet"/>
<link rel="stylesheet" href="http://jqueryvalidation.org/files/demo/site-demos.css">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" integrity="sha256-MfvZlkHCEqatNoGiOXveE8FIwMzZg4W85qfrfIFBfYc= sha512-dTfge/zgoMYpP7QbHy4gWMEGsbsdZeCXz7irItjcC3sPUFtf0kuFbDz/ixG7ArTxmDjLXDmezHubeNikyKGVyQ==" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<script src="http://jqueryvalidation.org/files/dist/jquery.validate.min.js"></script>
<form id="myform">
<div class="container-fluid cloned-row1" id="myRow">
<div class="row well">
    <div class="col-xs-6 col-sm-3 col-md-4 col-lg-3">
        <label>School Name</label>
        <br/>
        <select class="slt_Field txt_schName" name="txt_schName[]">
            <option value="">Please Select</option>
            <option value="Emirates College of Technology- UAE">COL000001</option>
            <option value="Al Khawarizmi International College- UAE">COL000002</option>
            <option value="Syscoms College">COL000003</option>
            <option value="Abounajm Khanj Pre-Uni Center">COL000004</option>
            <option value="Advanced Placement">COL000005</option>
            <option value="Al Buraimi College (Uni Clge)">COL000006</option>
            <option value="Al-Ain Community College">COL000007</option>
            <option value="AMA Computer College">COL000008</option>
            <option value="Arab Academy for Bankg and Fin">COL000009</option>
            <option value="ARABACDSCITECHMARTIMETRNS">COL000010</option>
            <option value="Arapahoe Community College">COL000011</option>
        </select>
    </div>
    <div class="col-xs-6 col-sm-3 col-md-4 col-lg-3">
        <br>
        <input type="text" class="ipt_Field school_Name" name="school_Name[]" disabled/>
    </div>
    <div class="col-xs-6 col-sm-3 col-md-4 col-lg-3">
        <label><span class="text-error">*</span>High School Avg / CGPA</label>
        <br/>
        <input type="text" class="ipt_Field ipt_Havg" id="" name="ipt_Havg[]" />
    </div>
    <div class="col-xs-6 col-sm-3 col-md-4 col-lg-3">
        <label><span class="text-error">*</span>Grade Type @</label>
        <br/>
        <select class="slt_Field ipt_grd" name="ipt_grd[]">
            <option value="">Please Select</option>
            <option value="n">100</option>
            <option value="n1">4</option>
            <option value="c">CHAR</option>
        </select>
    </div>
    <input type="text" placeholder="MM/DD/YYYY" class="ipt_Field" id="txt_Degdat" name="txt_Fdob" />
	<br />
	<button class="btn_less1 btn_right ">Less</button>
	<button class="btn_more btn_right edu_add_button">Add More</button>	
</div>
</div>
</form>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题