带日期选择器的隐藏/显示Jquery不起作用 - hide/show Jquery with datepicker not working

我正在尝试开发一个日历输入变量，该变量还允许为输入框提供日期选择器。

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>

脚本

 $(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();
        }
    })
});

这是jsfiddle

当我去掉日期选择器jquery函数时，隐藏/显示功能就起作用，当我把日期选择器脚本放进去时，什么都不起作用。有人能解释一下为什么我不能同时使用

吗

您的代码很好，我相信您只是没有包含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>

示例1

为了解决由于jQuery初始化datepicker之后将新元素写入DOM而导致datepicker未初始化的问题，您只需在用户创建新的DOM元素时调用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'});
});

示例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();
    }
})
});