multiple jquery datepicker on webpage not working

Question

I have a html form where I have a button that enables a viewer to add more text inputs to a page. that works fine. However my issue is the additional text inputs need to be datepicker fields. However only the very first datepicker field works (when clicked the calendar pops up). None of the additional once seem to work?

Here is my code

<!DOCTYPE html>
    <html lang="en">
     <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        <title></title>

  <!-- Bootstrap core CSS -->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">

<!-- Custom styles for this template -->
<link href="css/starter-template.css" rel="stylesheet">

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js" integrity="sha384-THPy051/pYDQGanwU6poAc/hOdQxjnOEXzbT+OuUAFqNqFjL+4IGLBgCJC3ZOShY" crossorigin="anonymous"></script>

 </head>
 <body>

   <nav class="navbar navbar-fixed-top navbar-dark bg-inverse">
    <a class="navbar-brand" href="dashboard.php"><img src="img/logo.png" alt="" style="margin-top:-10px"></a>
  <ul class="nav navbar-nav">
    <li class="nav-item"><a class="nav-link" href="dashboard.php">Dashboard</a></li>
    <li class="nav-item"><a class="nav-link" href="myprofile.php">My Profile</a></li>
    <li class="nav-item"><a class="nav-link" href="stafflisting.php">Staff Listing</a></li>
     <li class="nav-item"><a class="nav-link" href="customerslisting.php">Customer Listing</a></li> 
    <li class="nav-item"><a class="nav-link" href="logout.php">Logout</a>   </li>
    </ul>    </nav>

<div class="container">

 <div class="row">
    <div class="col-md-12"><h2>Data Upload</h2><br /></div>
 </div>
 <form method="POST" action="" enctype="multipart/form-data">
    <input type="hidden" name="dapassword" value="576de">
            <div class="row">
        <div class="col-md-12"><br />
            <input type="submit" name="saveit" value="Save" class="btn btn-primary pull-right">
        </div>
    </div>
    <div class="row">
       <div class="input_fields_wrap">
          <button class="add_field_button">Add More Fields</button>
       <div>
    </div>
    <div class="row">
        <div class="col-md-6">
           <label>Mail Date</label>
           <input type="text" name="dropdate[]" class="dropdate form-control">
        </div>
        <div class="col-md-6">
             <label>Import zip file</label>
             <input type="file" name="datfile" id="datfile">
        </div>
    </div>
<script>
        $(document).ready(function() {
        var max_fields      = 10; //maximum input boxes allowed
        var wrapper         = $(".input_fields_wrap"); //Fields wrapper
        var add_button      = $(".add_field_button"); //Add button ID

        var x = 1; //initlal text box count
        $(add_button).click(function(e){ //on add input button click
            e.preventDefault();
            if(x < max_fields){ //max input box allowed
                x++; //text box increment
                $(wrapper).append('<div class="row"><div class="col-md-6"><label>Mail Date</label><input type="text" name="dropdate[]" class="dropdate form-control"/></div><div class="col-md-6"><a href="#" class="remove_field">Remove</a></div></div>'); //add input box
            }
        });

        $(wrapper).on("click",".remove_field", function(e){ //user click on remove text
            e.preventDefault(); $(this).parent('div').remove(); x--;
        })
    });
</script>


    </form>

</div>
</div>

 </div><!-- /.container -->


<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="http://code.jquery.com/ui/1.11.0/jquery-ui.js"></script>
      <link rel="stylesheet" type="text/css"
    href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" />
      <script type="text/javascript">
          $('.dropdate').each(function(){
          $(this).datepicker();
        });
      </script>
  </body>
</html>

Any errors in your console? Also no need to use each on the datepicker creation. $('.dropdate').datepicker(); should work — j08691
– j08691, Commented Dec 23, 2016 at 19:21
I copied and pasted your code, and ran it locally and date-picker works as it should when you focus on the input. — Vcasso
– Vcasso, Commented Dec 23, 2016 at 19:28
But if you click the "add more fields" button and then click on the second text input no calendar appears? — Jayreis
– Jayreis, Commented Dec 23, 2016 at 19:29

Dekel · Accepted Answer · 2016-12-23 19:56:32Z

1

When you add new elements you also need to make sure to add the datepicker on these new elements:

$(add_button).click(function(e){ //on add input button click
    e.preventDefault();
    if(x < max_fields){ //max input box allowed
        x++; //text box increment
        $(wrapper).append('<div class="row"><div class="col-md-6"><label>Mail Date</label><input type="text" name="dropdate[]" class="dropdate form-control"/></div><div class="col-md-6"><a href="#" class="remove_field">Remove</a></div></div>'); //add input box
        $('.dropdate').datepicker()
    }
});

answered Dec 23, 2016 at 19:56

Dekel

62.9k12 gold badges109 silver badges130 bronze badges

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

Collectives™ on Stack Overflow

multiple jquery datepicker on webpage not working

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related