隐藏/显示JQuery的日期选择器不工作

Question

我想开发一个日历输入变量，它也允许输入框的日期选择器。

HTML

<select id="select"> 
    <option value="Type">Type</option> 
    <option value="Range">Range</option> 
    <option value="Individual">Individual</option> 
</select> 
<div id="range" style="display:none;"> 
<input type="text" name="job_from" id="job_from" placeholder="From" class="datepicker" /> 
    <input type="text" name="job_to" id="job_to" placeholder="To" class="datepicker" /> 
</div> 

<div id="ind" style="display:none;"> 

<button type="button" id="add2" class="submit">Add Another Date</button> 
    <div id="item2"> 
     <div><input type="text" class="datepicker" name="jobdates[]" /></div> 
     </div> 
    </div> 

SCRIPT

$(document).ready(function(){ 
    $("#add2").click(function (e) { 
      //Append a new row of code to the "#items" div 
      $("#item2").append('<div><input type="text" class="datepicker" name="jobdates[]" /><button class="delete submit" type="button">Delete</button></div>'); 
     }); 

    $("body").on("click", ".delete", function (e) { 
     $(this).parent("div").remove(); 
    }); 

    $('#select').change(function(){ 
     if($('#select option:selected').text() == "Range"){ 
     $('#range').show(); 
     } 
     else{ 
     $('#range').hide(); 
     } 
     if($('#select option:selected').text() == "Individual"){ 
     $('#ind').show(); 
     } 
     else{ 
     $('#ind').hide(); 
     } 
    }) 
});  

Here is the jsfiddle

时，我带走的日期选择器jQuery函数隐藏/显示功能的作品，当我把日期选择器脚本在没有任何作品。有人可以解释为什么我不能同时工作

Answer 1

你的代码是正确的，我相信你只是间没有”包括DatePicker运行所需的核心jQueryUI文件。

添加到您的网页的head：

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

EXAMPLE 1

为了解决地方datepicker未被由于初始化被写入DOM在jQuery后的新元素已初始化的问题datepicker，您只需在用户创建新的元素时调用datepicker。

$("#add2").click(function (e) { 
     //Append a new row of code to the "#items" div 
     $("#item2").append('<div><input type="text" class="datepicker" name="jobdates[]" /><button class="delete submit" type="button">Delete</button></div>'); 
     // This is where you need to add the datepicker jQuery again <<<<<<<<< 
     $(".datepicker").datepicker({ changeMonth: true, changeYear: true, numberOfMonths: 2, showWeek: true, dateFormat: 'dd-mm-yy'}); 
}); 

EXAMPLE 2

Answer 2

我认为这是不可能的。 拨打第二输入（日期选择器），并显示隐藏它，如果检查中... 剩下的就是JS和CSS

编辑：

$(document).ready(function(){ 
$("#add2").click(function (e) { 
     //Append a new row of code to the "#items" div 
     $("#item2").append('<div><input type="text" class="datepicker" name="jobdates[]"/><button class="delete submit" type="button">Delete</button></div>'); 
    $(".datepicker").datepicker({ changeMonth: true, changeYear: true, numberOfMonths: 2, showWeek: true, dateFormat: 'dd-mm-yy'}); 
}); 

$("body").on("click", ".delete", function (e) { 
    $(this).parent("div").remove(); 
}); 

$('#select').change(function(){ 
    if($('#select option:selected').text() == "Range"){ 
    $('#range').show(); 
    } 
    else{ 
    $('#range').hide(); 
    } 
    if($('#select option:selected').text() == "Individual"){ 
    $('#ind').show(); 
    } 
    else{ 
    $('#ind').hide(); 
    } 
}) 
});