使用日期选择器隐藏/显示 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>

脚本

 $(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

当我拿走 datepicker jquery 函数时，隐藏/显示功能起作用，当我把 datepicker 脚本放在没有任何作用时。有人可以解释为什么我不能同时工作

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

要解决jQuery 初始化datepicker 后新元素写入DOM 而导致datepicker 未初始化的问题，您只需在用户调用datepicker创建一个新的DOM 元素。

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