Putting Datepicker() on Dynamically Created Elements - Jquery/Jqueryui

putting datepicker() on dynamically created elements - JQuery/JQueryUI

here is the trick:

$('body').on('focus',".datepicker_recurring_start", function(){
    $(this).datepicker();
});​

DEMO

The $('...selector..').on('..event..', '...another-selector...', ...callback...); syntax means:

Add a listener to ...selector.. (the body in our example) for the event ..event.. ('focus' in our example). For all the descendants of the matching nodes that matches the selector ...another-selector... (.datepicker_recurring_start in our example) , apply the event handler ...callback... (the inline function in our example)

See http://api.jquery.com/on/ and especially the section about "delegated events"

Use JQuery Datepicker on dynamically created fields

you have id="datepicker" for all your datepicker inputs, but ids are supposed to be unique in a given DOM. use class="datepicker" instead. and also, since you're using jquery anyways, you dont need to use vanilla javascript onclick function.

demo: http://jsfiddle.net/swm53ran/331/

<div class="mytemplate" style="display: none;">
    <input class="datepicker" type="text" name="name[]"/>
</div>
<div class="dates">
    <div>
        <input class="datepicker" type="text" name="name[]"/>
    </div>
</div>
<input type="button" class="addmore" value="Add more">

$(document).ready(function() {
    $('.addmore').on('click', function() {
        $(".mytemplate").clone().removeClass("mytemplate").show().appendTo(".dates");
    });
    $(document).on("focus", ".datepicker", function(){
        $(this).datepicker();
    });
});

jquery datepicker not working on dynamically created html

When you write

$(document).ready(function () {
    $(".datepicker").datepicker({...});
});

This fragment is getting executed right after the page has loaded. Therefore, your dynamic datepickers are not there yet. You need to call $(aSuitableSelector).datepicker(...) on each newly-inserted element. First, use a var to hold your options:

var datePickerOptions = {
    dateFormat: 'yy/m/d',
    firstDay: 1,
    changeMonth: true,
    changeYear: true,
    // ...
}

This allows you to write

 $(document).ready(function () {
    $(".datepicker").datepicker(datePickerOptions);
 });

and to write

 // right after appending dateFrom to the document ...
 $(dateFrom).datepicker(datePickerOptions);

 //...

 // right after appending dateTo ...
 $(dateTo).datepicker(datePickerOptions);

You can also use JQuery's ability to listen to DOM changes to avoid having to apply JS magic to newly-inserted elements -- but I do not think it is worth it.

Jquery datepicker on dynamically created inputs changing the date of the first input

You can check below code. We are setting the unique class to each newly added text field and initializing the datepicker on newly added textfield only. In your code you were re-initializing the existing textfields hence previously selected dates were getting overridden.

var datePickerOptions = {  dateFormat: 'd/m/yy',  firstDay: 1,  changeMonth: true,  changeYear: true}
$(document).ready(function() {  $('.datepicker').datepicker(datePickerOptions);
  var scntDivA = $('#main');  var ii = $('#main span').size() + 1;
  $('#addInput').on('click', function() {        //adding the unique class like datepicker_numbervar newText = $("<input type=\"text\" id=\"mydate_"+ii+"\" name=\"mydate[]\" class=\"datepicker datepicker_"+ii+"\">");        $(newText).appendTo(scntDivA);        //initializing the datepicker only on newly added textfield with class like datepicker_number    $('.datepicker_'+ii).datepicker(datePickerOptions);    ii++;    return false;  });});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.0/jquery-ui.css" /><script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.0/jquery-ui.js"></script>
<div id="main">  <span>    <input type="text" id="mydate" name="mydate[]" class="datepicker">    </span></div><a href="#" id="addInput">Add input</a>

activating datepicker on dynamically cloned fields

You can try this code

    $("#triggerAdd").click(function(){

       var $last   = $('.dedicationfields:last');
       var $clone  = $last.clone(false);
       $last.after($clone);
       $(".dedicationfields:last input[type=text], .dedicationfields:last select").val('');
       $clone.find('input.datepicker')
            .removeClass('hasDatepicker')
            .removeData('datepicker')
            .attr('id', 'change_id' + Math.random())
            .unbind()
            .datepicker();
            });

     $(document).on('focus',".datepicker", function(){
    $(this).datepicker();
});

You can just customize the change_id ID attribute of your liking.

jsfiddle

How to create a datepicker in a dynamically created element

Try this. You had an extra </div> in your dynamic code

$( document ).ready(function() {       $(".container").append('<label class="control-label col-md-3">Joine Duration</label>' +'<div class="col-md-4">' +'<input type=text  name="joine_duration[]" class="input form-control datepicker"  size="11" title="D-MMM-YYYY" id="joine_duration1" placeholder="" /></div>' +'<div class="form-group"> ');         $( "#joine_duration1" ).datepicker();      });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script><link href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet"/><div class='container'></div>

how to add datepicker in dynamically created row

@M.Tanzil : There is a bug in your code.

1) First select a date in first date picker.

2) Then add a new row.

3) Then select a date in second row.

Second selected date will added to the first row.

I have fixed this issue. The issue is coming because of all the datepickers have same id. I have assign dynamic id's for datepickers.

Please check this Fiddle.

Datepicker for each input element in dynamically created rows?

Looks like this is because you have duplicate id's for the date input field, remove the id attribute from the date field

<input type="text" class="clsDocDate" />

Demo: Solution, Problem

Date picker is not working on dynamically added html element

The problem with your code is when you clone the input from the above rows, it'll have the clone the hasDatepicker class too which will break it.

To test it, just don't focus the input and add an extra row and focus the second row's input and it'll work.

Here's the solution to this.

                $('body').on('focus',".datepicker", function(){
                $(this).datepicker({ //Change this line here

to

                $('body').on('focus',".datepicker", function(){
                $(this).removeClass('hasDatepicker').datepicker({ //Change this line here

It will first reset the input then initialize the datePicker

---

Related Topics