get click event from date clicked on datetimepicker bootstrap

16,889

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

Solution 2

I have use this method to get click event

$("#datetimepicker").on("dp.show", function (e) {
$('div tbody').on('click', 'tr > .day', function () {
        alert('day clicked');
})
});

Solution 3

$('.scheduleDate').datepicker({
    format: 'dd/M/yyyy',
}).on('changeDate', function(e) {   
    console.log(e.format());
});
Share:
16,889
Melissa
Author by

Melissa

Updated on June 28, 2022

Comments

  • Melissa
    Melissa over 1 year

    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.

    $(document).ready(function(){		
      $(function () {
        $('#datetimepicker').datetimepicker({
          format:'YYYY-MM-DD',
           locale: 'en'
        });
      });	
      $(".datepicker .datepicker-days td.day").click(function(){
        alert('day clicked');	
      });
      $("#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>
  • Melissa
    Melissa over 7 years
    Thank you but I don't need to get date, I want to display something after clicking on any date
  • vipin Bhandari
    vipin Bhandari over 7 years
    You can show whatever you want just replace my alter with you code
  • Melissa
    Melissa over 7 years
    Can you jfiddler it please, because it doesn't work for me