anklicken Ereignis ab dem Datum auf datetimepicker Bootstrap

Question

geklickt Ich verwende picker für Bootstrap von dieser Seite https://eonasdan.github.io/bootstrap-datetimepicker/

Ich versuche, von Datum am Anfang angeklickt zu erfassen klicken, wenn die Eingabe leer ist. Das Problem mit dp.change ist, dass das erste Klickereignis erfasst wird, wenn ich auf das Kalendersymbol klicke. Wenn ich den Klick auf td.day mache, funktioniert es nicht.

$(document).ready(function(){ \t \t 
 
    $(function() { 
 
    $('#datetimepicker').datetimepicker({ 
 
     format:'YYYY-MM-DD', 
 
     locale: 'en' 
 
    }); 
 
    }); \t 
 
    $(".datepicker .datepicker-days td.day").click(function(){ 
 
    alert('day clicked'); \t 
 
    }); 
 
    $("#datetimepicker").on("dp.change", function() { 
 
    alert('calendar icon clicked'); 
 
    }); 
 
});

<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>

Answer 1

mürrisch Dies ist keine Antwort, aber ich bin es Formatierung wegen Code hinzufügen. Wenn Sie die Seite laden, ist der Kalender nicht vorhanden, wenn Sie die div überprüfen.

Es ist ein live Element, so verwenden jQueryon Funktion:

$(".datepicker .datepicker-days").on('click', 'td.day', function() { 
    alert('day clicked'); 
}); 

Answer 2

$('#datetimepicker').datepicker({ 
     dateFormat: 'yy-mm-dd', 
     showButtonPanel: true, 

     onClose: function() { 
      var selectedDate= new Date($('#datetimepicker').val()) 
alert(selectDate.getDate()) 
     } 
}); 

Verwendung onClose Ereignis Datum

Answer 3

Ich komme zu spät, ich bin nicht die Lösung, aber ich weiß, warum dein Code nicht funktioniert.

Die Struktur des Kalenders wird in jeder Anzeige erzeugt und gelöscht, aufgrund dessen die am Anfang angehängten Listener gelöscht werden und verloren gehen, sollten Sie die Listener im Moment des Kalenders erneut anhängen.

Vielleicht die Lösung, die Sie möchten, ist etwas wie dies: Warnung, der Code wird nicht getestet.

$(document).ready(function(){ \t \t 
 
    $(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>