скрыть/показать JQuery с datepicker не работает

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 Скрыть/показать функция работает, когда я поставил скрипт Datepicker ничто не работает. Может кто-то объяснить, почему я не могу заставить обоих работать

Answer 1

Ваш код хорошо, я вам верю только weren» t, включая основные файлы jQueryUI, необходимые для работы DatePicker.

Добавьте к этому 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

EDIT:

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