Click here to Skip to main content
14,668,908 members
Rate this:
Please Sign up or sign in to vote.
See more:
<!DOCTYPE html>
      <title>Bootstrap Example
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1">
    <div class="container">
      <h2>Vertical (basic) form</h2>
      
        <div class="form-group">
          Email:
          
        </div>
        <div class="form-group">
          Password:
          
        </div>
        <div class="form-group">
          Date:
          
        </div>
        <div class="form-group">
        Submit
        </div>
            <span class="glyphicon glyphicon-plus"></span>
    </div>
        $(document).ready(function() {

        $("button[name='addDom']").click(function() {
            var domElement = $('<div class="form-group"><label for="date">Date:</label><input type="text" class="form-control" id="datetimepicker" placeholder="Enter Date"></div>');

            $(this).after(domElement);
        });

    });

        $("#datetimepicker").datetimepicker();


What I have tried:

i have some problem in my this code. when i click the plus button and add a new div that include of date input . the datetimepicker open out side the new div but in the adding new div it did not open and . show kindly let me inform if nay body solve my problem the date picker open in new dive as same as outside the new div. thanks.
Posted
Updated 20-Mar-18 3:11am
v2

1 solution

Rate this:
Please Sign up or sign in to vote.

Solution 1

Hi,

I'm unable to find button name='addDom', so first add a button with attribute name='addDom' or instead use id to simplyfy it.

Datepicker needs to be re-initiated after the new element is created. Try give a common class to data picker element e.g. elem-datepicker

$(document).ready(function() {

    $("button[name='addDom']").click(function() {
        var domElement = $('Date:');

        $(this).after(domElement);
    });

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

});
   

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

  Print Answers RSS
Top Experts
Last 24hrsThis month



CodeProject, 503-250 Ferrand Drive Toronto Ontario, M3C 3G8 Canada +1 416-849-8900 x 100