CODEWITHSUNDEEP
phpjqueryhtmldatepicker
Brobina
Brobina

Reputation: 467

hide/show Jquery with datepicker not working

I am trying to develop a calendar input variable which also allows for a datepicker for the input boxes.

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

when I take away the datepicker jquery function the hide/show functionality works, when i put the datepicker script in nothing works. Can someone explain why I cannot get both to work

Upvotes: 1

Views: 3284

Answers (2)

chriz
chriz

Reputation: 1580

Your code is fine, I believe you just weren't including the core jQueryUI files that the DatePicker needs in order to run.

Add this to the head of your page:

<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

To address the issue where datepicker is not being initialized due to the new elements being written to the DOM after the jQuery has initialized the datepicker, you simply must call the datepicker when the user creates a new DOM element.

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

Upvotes: 3

brandelizer
brandelizer

Reputation: 352

I think its not possible. Make a second input (for datepicker) and show hide it if checked box... The rest is js and 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();
    }
})
});

Upvotes: 0

Related Questions