bootstrap datepicker change date event doesnt fire up when manually editing dates or clearing date

Question

lt script type  text javascript  gt         When the document is ready       document  ready function                  datepicker   datepicker               format   yyyy-mm-dd              on  changeDate   function ev                  do what you want here               this  datepicker  hide               on  changeDate   function ev               if      startdate   val          amp  amp      enddate   val                               period   text diffInDays       d                    else                       period   text  -                                       lt  script gt    So here s what my datepicker looks like  So basically when I change date by clicking mouse it works good  however when I manually change date with keyboard or manually clear the date change date event doesn t get called  Is this a bug or am I doing something wrong here

User · Answer

In version 2 1 5    bootstrap-datetimepicker js http   www eyecon ro bootstrap-datepicker Contributions  Andrew Rowls Thiago de Arruda updated for Bootstrap v3 by Jonathan Peterson  Eonasdan   changeDate has been renamed to change dp so changedate was not working for me      datetimepicker   datetimepicker   on  change dp   function  e                FillDate new Date               also needed to change css class from datepicker to datepicker-input   lt div id  datetimepicker  class  datepicker-input input-group controls  gt      lt input id  txtStartDate  class  form-control  placeholder  Select datepicker  data-rule-required  true  data-format  MM-DD-YYYY  type  text    gt      lt span class  input-group-addon  gt          lt span class  icon-calendar  data-time-icon  icon-time  data-date-icon  icon-calendar  gt  lt  span gt      lt  span gt   lt  div gt    Date formate also works in capitals like this data-format  MM-DD-YYYY   it might be helpful for someone it gave me really hard time

User · Answer

I have this version about datetimepicker https   tempusdominus github io bootstrap-4  and for any reason doesn t work the change event with jquery but with JS vanilla  it does  I figure out like this  document getElementById  date   onchange   function       the jquery code       I hope work for you

User · Answer

Depending which date picker for Bootstrap you re using  this is a known bug currently with this one   Code  https   github com uxsolutions bootstrap-datepicker   Docs  https   bootstrap-datepicker readthedocs io en latest    Here s a bug report   https   github com uxsolutions bootstrap-datepicker issues 1957  If anyone has a solution workaround for this one  would be great if you d include it

User · Answer

I was using AngularJS and AngularStrap 2 3 7 and trying to catch the  change  event by listening to a  lt form gt  element  not the input itself  and none of the answers here worked for me   I tried to do     form  on  change change dp dp change changeDate  function             And nothing would fire   I ended up listening to the focus and blur events and setting a custom property before after on the element itself      special hack to make bs-datepickers fire change events    use timeout to make sure they all exist first  timeout function               input bs-datepicker    on  focus   function  e           e currentTarget focusValue   e currentTarget value                         input bs-datepicker    on  blur   function  e           if  e currentTarget focusValue     e currentTarget value                var event   new Event  change     bubbles  true                 e currentTarget dispatchEvent event                          This basically manually checks the value before and after the focus and blur and dispatches a new  change  event   The   bubbles  true   bit is what got the form to detect the change   If you have any datepicker elements inside of an ng-if you ll need to wrap the listeners in a  timeout to make sure the digest happens first so all of your datepicker elements exist   Hope this helps someone

User · Answer

This should make it work in both cases  function onDateChange           Do something here        dpd1   bind  changeDate   onDateChange       dpd1   bind  input   onDateChange

User · Answer

Try this        datepicker   on  dp change   function e        alert  hey

User · Answer

I found a short solution for it  No extra code is needed just trigger the changeDate event  E g      datepicker   datepicker   trigger  changeDate

User · Answer

You have to use the change event on the input itself if you want to respond to manual input  because the changeDate event is only for when the date is changed using the datepicker   Try something like this     document  ready function             datepicker   datepicker           format   yyyy-mm-dd                Listen for the change even on the input      change dateChanged       on  changeDate   dateChanged        function dateChanged ev          this  datepicker  hide        if      startdate   val          amp  amp      enddate   val                        period   text diffInDays       d           else               period   text  -

User · Answer

The new version has changed   for the latest version use the code below       UpToDate   datetimepicker           format  MMMM DD  YYYY           maxDate moment            defaultDate moment                      on  dp change  function e           console log e

User · Answer

Try with below code sample it is working for me var date input field      input name  quot date quot          date input field  datepicker           dateFormat    dd mm yyyy           container  container          todayHighlight  true          autoclose  true         on  change   function selected           alert  quot startDate    quot  selected timeStamp

[javascript] bootstrap datepicker change date event doesnt fire up when manually editing dates or clearing date

Examples related to javascript

Examples related to jquery

Examples related to twitter-bootstrap

Examples related to datepicker

Examples related to bootstrap-datepicker