jQuery date picker inside of ajax returned html content

jQuery date picker inside of ajax returned html content

jQuery Datepicker **works if I use an input that is there on page load**.  

But if I bring it in via Ajax, it doesn't work.

The .find method adds the.hasDatepicker class to the input. It doesn't however show the datepicker.

Here is my current html setup: 

    <body>
        <select id="product_selector">Options</select>
        <div id="targetdiv"></div>
    </body>

The ajax brings in a bunch of inputs (no form element around them) and the one in particular (appended to #targetdiv) that is supposed to be the **DatePicker** is this one:

    <input type="text" class="datepicker"  name="cmdz_end_date" id="cmdz_end_date" placeholder="End Date">


So far **I am able to console.log when I click inside of the ajax delivered input** but I am not able to get the date picker to show up. Here is the JS I have so far: 

    jQuery(document).ready(function($) {
    $('#product_selector').on('change', function() {
        var product = this.value;

   $.ajax({
       type: 'POST',
       url: "<?php echo admin_url('admin-ajax.php'); ?>" ,
       data: {"action": "manual_transaction_form_select", "product": product},
       complete: function(){
                    //$( ".datepicker" ).datepicker();
       },
       success: function(data){ 
       add_html_to_page(data);
                  $('#targetdiv').html(data).find('.datepicker').datepicker()
             }
        });
    });

     function add_html_to_page(data){
        $('#targetdiv').empty().append(data)
     }
    });



I have tried using the .datepicker in 'complete' and 'success' to no avail.  It's probably because I am not targeting it correctly but I am not sure how to get there.

WP Version: 3.8

Any insight on this would be appreciated.