javascript - Trigger an event when selecting a datetime with datetime-picker - Stack Overflow

admin管理员组

文章数量:1387431

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

Share Improve this question Follow edited Jun 13, 2017 at 7:35 VincenzoC 31.5k1212 gold badges100100 silver badges121121 bronze badges asked Jun 12, 2017 at 18:12 hebaheba 11911 gold badge22 silver badges1414 bronze badges 5

• 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

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 6

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>

本文标签： javascriptTrigger an event when selecting a datetime with datetimepickerStack Overflow