get click event from date clicked on datetimepicker bootstrap

Question

I'm using datepicker for bootstrap from this site https://eonasdan.github.io/bootstrap-datetimepicker/

I'm trying to capture click from date clicked at the beginning when input is empty. the problem with dp.change is that the first click event is captured when I click on calendar icon. If I put the click on td.day it dosen't work.

Answer 1

I'm coming late, I am haven't the solution, but I know why your code does not work.

The structure of the calendar is generated and deleted in each showing, due to this the listeners attached on the beginning to be deleted and lost effect, you should attach the listeners in the moment of calendar is generated again.

Maybe the solution that you want is some how this: Warning the code isn't tested.

$(document).ready(function(){		
    $(function () {
        $('#datetimepicker').datetimepicker({
            format:'YYYY-MM-DD',
            locale: 'en'
        });
        var cont = 0;
        $('.reload_element').on("dp.show",function(e){
            $('td.day').on("click",function(e){
                $('#response').text('day clicked '+cont); 
            });
            ++cont;
            return true;
        });
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.13.0/moment.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/js/bootstrap-datetimepicker.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/css/bootstrap-datetimepicker.min.css"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

<div class="input-group date reload_element" id="datetimepicker">
  <span class="input-group-addon reload_element cursor-pointer">
    <i class="fa fa-calendar"></i>
  </span>
  <input type="text" id="start_date" class="form-control reload_element" style="width:100px;" autocomplete="off"/>
</div><span id="response"></span>