I am currently using this datetimepicker in my code (No Icon (input field only)) and I need to trigger a function once a date-time is selected. I tried using several jQuery functions but I would get different errors, here are the ones I used:

$('#datetimepicker4').datetimepicker({
    onClose: function (dateText, inst) {
        alert("date chosen");                                              
    }
});

I get this error

TypeError: option onClose is not recognized!

and a similar one for onSelect, and when I use datepicker instead

$('#datetimepicker4').datepicker({
    onClose: function (dateText, inst) {
        alert("date chosen");                                              
    }
});

I get this error:

TypeError: $(...).datepicker is not a function

ps: I am using jQuery 1.11.3 and running the code with firefox.

Edit: problem was solved with dp.change

I am currently using this datetimepicker in my code (No Icon (input field only)) and I need to trigger a function once a date-time is selected. I tried using several jQuery functions but I would get different errors, here are the ones I used:

$('#datetimepicker4').datetimepicker({
    onClose: function (dateText, inst) {
        alert("date chosen");                                              
    }
});

I get this error

TypeError: option onClose is not recognized!

and a similar one for onSelect, and when I use datepicker instead

$('#datetimepicker4').datepicker({
    onClose: function (dateText, inst) {
        alert("date chosen");                                              
    }
});

I get this error:

TypeError: $(...).datepicker is not a function

ps: I am using jQuery 1.11.3 and running the code with firefox.

Edit: problem was solved with dp.change

• javascript
• jquery
• datepicker
• datetimepicker
• eonasdan-datetimepicker

• 2 Did you check the Events tab on that page? eonasdan.github.io/bootstrap-datetimepicker/Events - specifically the dpchange eonasdan.github.io/bootstrap-datetimepicker/Events/#dpchange – Darren Wainwright Commented Jun 12, 2017 at 18:14
• I just checked it, that was really helpful , thanks :) – heba Commented Jun 12, 2017 at 18:20
• @heba post an answer (an accept it) describing the working solution instead of editing your own question to add the solution. – VincenzoC Commented Jun 12, 2017 at 18:58
• @VincenzoC my answer gets converted to a ment because it's too short I guess – heba Commented Jun 12, 2017 at 19:36
• @heba there is no automatic conversion of answer into ments, but very short answer are not very useful, they tend to attract downvotes and sometimes get deleted. I suggested to post a good answer (e.g. explanation of the solution, docs links and/or quotes, working code sample etc), I've posted an answer to show an example of something that is not too short with an example of how to use dp.change in your use case. – VincenzoC Commented Jun 12, 2017 at 22:02

1 Answer 1

Eonasdan datetimepicker has no onClose option, you can add an handler for dp.change event:

Fired when the date is changed.

Parameters:

e = {
  date, //date the picker changed to. Type: moment object (clone)
  oldDate //previous date. Type: moment object (clone) or false in the event of a null
}

Here a live sample:

$('#datetimepicker4').datetimepicker()
  .on('dp.change', function(e){
    if(e.date){
      console.log('Date chosen: ' + e.date.format() );
    }
  });

<link href="//cdnjs.cloudflare./ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet"/>
<link href="//cdnjs.cloudflare./ajax/libs/bootstrap-datetimepicker/4.17.47/css/bootstrap-datetimepicker.css" rel="stylesheet"/>

<script src="//cdnjs.cloudflare./ajax/libs/jquery/2.1.3/jquery.js"></script>
<script src="//cdnjs.cloudflare./ajax/libs/moment.js/2.18.1/moment.min.js"></script>
<script src="//cdnjs.cloudflare./ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.js"></script>
<script src="//cdnjs.cloudflare./ajax/libs/bootstrap-datetimepicker/4.17.47/js/bootstrap-datetimepicker.min.js"></script>


<div class="container">
  <div class="row">
    <div class='col-sm-6'>
      <input type='text' class="form-control" id='datetimepicker4' />
    </div>
  </div>
</div>