jquery calling datepicker on dynamic elements

Question

I am trying to call the datepicker on dynamically created elements but doesn't work. I know that my format is not correct. Anyone knows how?

    $("body").on('click', '.startNew', function() {
        $(".startNew").datepicker({
           dateFormat : "yy-mm-dd 00:00:00",
           numberOfMonths: 2,
           onSelect: function(selected) {
             $(".endNew").datepicker("option","minDate", selected)
           }
        });
    });
    $("body").on('click', '.endNew', function() {
       $(".endNew").datepicker({ 
           dateFormat : "yy-mm-dd 00:00:00",
           numberOfMonths: 2,
           onSelect: function(selected) {
              $(".startNew").datepicker("option","maxDate", selected)
           }
       });
    });

we need to see where you are creating the element, include that source and the markup as well — konkked
– konkked, Commented Feb 18, 2015 at 2:39

Lumi Lu · Accepted Answer · 2015-02-18 18:50:21Z

2

Updated. Try to change (body -> document; click -> focus)

from

$(body).on('click',".startNew", function(){
    $(".startNew").datepicker({

$(body).on('click',".endNew", function(){
    $(".endNew").datepicker({

to

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

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

Working FIDDLE

HTML

Start: <input class='endNew'><br/><br/>
End: <input class='startNew'>

JS

$(document).on('focus',".startNew", function(){
  $(this).datepicker({
    dateFormat : "yy-mm-dd 00:00:00",
    numberOfMonths: 2,
    onSelect: function(selected) {
      $(".endNew").datepicker("option","minDate", selected)
    }
  });
});


$(document).on('focus',".endNew", function(){
  $(this).datepicker({ 
    dateFormat : "yy-mm-dd 00:00:00",
    numberOfMonths: 2,
    onSelect: function(selected) {
      $(".startNew").datepicker("option","maxDate", selected)
    }
   });
});

edited Feb 18, 2015 at 18:50

answered Feb 18, 2015 at 2:41

Lumi Lu

3,3011 gold badge14 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Steve Over a year ago

this wouldn't work on the dynamically created elements.

Arun P Johny · Accepted Answer · 2015-02-18 02:59:04Z

0

The problem is the first click is initializing the plugin, but that won't show the datepicker since the datepicker click handler is added after the click event. So

$("body").on('click', '.startNew', function () {
    if (!$(this).hasClass('hasDatepicker')) {
        $(this).datepicker({
            dateFormat: "yy-mm-dd 00:00:00",
            numberOfMonths: 2,
            onSelect: function (selected) {
                $(".endNew").datepicker("option", "minDate", selected)
            }
        }).datepicker('show');
    }
});
$("body").on('click', '.endNew', function () {
    if (!$(this).hasClass('hasDatepicker')) {
        $(this).datepicker({
            dateFormat: "yy-mm-dd 00:00:00",
            numberOfMonths: 2,
            onSelect: function (selected) {
                $(".startNew").datepicker("option", "maxDate", selected)
            }
        }).datepicker('show');
    }
});

In this case, you are trying to initialize the plugin lazily, but a better solution will is to initialize the plugin after the target element .startNew and .endNew is created.

answered Feb 18, 2015 at 2:59

Arun P Johny

389k68 gold badges532 silver badges532 bronze badges

1 Comment

Steve Over a year ago

is there a way to call the datepicker through on click? or how can I re-initialize the plugin after .startNew and .endNew?

Collectives™ on Stack Overflow

jquery calling datepicker on dynamic elements

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related