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

当我拿走datepicker jquery函数时，hide / show功能起作用，当我把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

要解决由于在datepicker初始化DOM后将新元素写入jQuery而未初始化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

我认为这是不可能的。进行第二次输入（对于datepicker）并显示隐藏它，如果选中复选框... 其余的是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();
    }
})
});

使用datepicker隐藏/显示Jquery不起作用

2 个答案: