Detect change to selected date with bootstrap-datepicker

Question

I have an input element with an attached datepicker created using bootstrap-datepicker    lt div class  well  gt       lt div class  input-append date  id  dp3  data-date  2012-01-02  data-date-format  yyyy-mm-dd  gt           lt input type  text  id  date-daily  gt           lt span class  add-on  gt  lt i class  icon-th  gt  lt  i gt  lt  span gt           lt  div gt   lt  div gt    lt script language  JavaScript  type  text javascript  gt        document  ready function                 dp3   datepicker                date-daily   val  0000-00-00                date-daily   change function                  console log     date-daily   val                          lt  script gt    When the user changes the date by typing directly into the input element  I can get the value with the input element s onChange event  as shown above  But when the user changes the date from datepicker  i e  by clicking a date on the calendar   the onChange handler is not called   How can I detect changes to the selected date that are made via the datepicker  rather than by typing into the input element

User · Answer

You can use onSelect event       date-daily   datepicker     onSelect  function dateText       alert     dp3   val                  It is Called when the datepicker is selected  The function receives the   selected date as text and the datepicker instance as parameters  this   refers to the associated input field    SEE HERE

User · Answer

All others answers are related to jQuery UI datepicker  but the question is about bootstrap-datepicker   You can use the on changeDate event to trigger a change event on the related input  and then handle both ways of changing the date from the onChange handler      changeDate      Fired when the date is changed    Example       dp3   datepicker   on  changeDate   function  ev            date-daily   change            date-daily   val  0000-00-00        date-daily   change function          console log     date-daily   val           Here is a working fiddle  http   jsfiddle net IrvinDominin frjhgpn8

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

User · Answer

x000D   x000D    function     x000D       input name  datetimepicker     datetimepicker   x000D      defaultDate  new Date   x000D       on  dp change  function event   x000D          newDateSpan   html  New Date      event date format  lll     x000D          oldDateSpan   html  Old Date      event oldDate format  lll     x000D        x000D     x000D      x000D   lt link href  http   cdn rawgit com Eonasdan bootstrap-datetimepicker e8bddc60e73c1ec2475f827be36e1957af72e2ea build css bootstrap-datetimepicker css  rel  stylesheet   gt  x000D   lt link href  http   maxcdn bootstrapcdn com bootstrap 3 3 1 css bootstrap min css  rel  stylesheet   gt  x000D   x000D   lt script src  https   ajax googleapis com ajax libs jquery 2 1 1 jquery min js  gt  lt  script gt  x000D   lt script src  http   momentjs com downloads moment min js  gt  lt  script gt  x000D   lt script src  http   getbootstrap com dist js bootstrap min js  gt  lt  script gt  x000D   lt script src  http   cdn rawgit com Eonasdan bootstrap-datetimepicker e8bddc60e73c1ec2475f827be36e1957af72e2ea src js bootstrap-datetimepicker js  gt  lt  script gt  x000D   x000D   lt div class  container  gt  x000D     lt div class  col-xs-12  gt  x000D       lt input name  datetimepicker    gt  x000D       lt p gt  lt span id  newDateSpan  gt  lt  span gt  lt br gt  lt span id  oldDateSpan  gt  lt  span gt  lt  p gt  x000D     lt  div gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

document  ready function         dateFrom   datepicker       todayBtn   1      autoclose  true     on  changeDate   function  selected        var minDate   new Date selected date valueOf             dateTo   datepicker  setStartDate   minDate            dateTo   datepicker       todayBtn   1      autoclose  true

User · Answer

Here is my code for that       date-daily   datepicker   on  changeDate   function e              other-input   val e format 0  dd mm yyyy           alert e date         alert e format 0  dd mm yyyy           console log e date          Just uncomment the one you prefer   The first option changes the value of other input element  The second one alerts the date with datepicker default format  The third one alerts the date with your own custom format  The last option outputs to log  default format date    It s your choice to use the e date   e dates  for m  ltiple date input  or e format        here some more info

User · Answer

Try this        dp3   on  dp change   function e        alert  hey

User · Answer

Based on Irvin Dominin example  I ve created 2 examples supporting Paste and hit Enter   This works in Chrome  http   jsfiddle net lhernand 0a8woLev     document  ready function            date-daily   datepicker         format   dd mm yyyy         assumeNearbyYear  true        autoclose  true        orientation   bottom right         todayHighlight  true        keyboardNavigation  false               On  paste  - gt  loses focus  hide calendar and trigger  change          on  paste   function e            this  blur              date-daily   datepicker  hide                  On  enter  keypress - gt  loses focus and trigger  change          on  keydown   function e           if  e which     13             console log  enter               this  blur                        change function e          console log  change              stdout   append     date-daily   val       change n                  But not in IE  so I created another example for IE11  https   jsbin com timarum 14 edit html js console output    document  ready function            date-daily   datepicker         format   dd mm yyyy         assumeNearbyYear  true        autoclose  true        orientation   bottom right         todayHighlight  true        keyboardNavigation  false               OnEnter - gt  lose focus      on  keydown   function e             if  e which     13                 this  blur                             onPaste - gt  hide and lose focus      on  keyup   function e             if  e which     86                  this  blur                  this  datepicker  hide                            change function e               stdout   append     date-daily   val       change n                  If last example still doesn t work in IE11  you can try splitting the setup      DatePicker setup     datepicker   datepicker       format   dd mm yyyy       assumeNearbyYear  true          manually-entered dates with two-digit years  such as  5 1 15   will be parsed as  2015   not  15         autoclose  true                 close the datepicker immediately when a date is selected        orientation   bottom rigth       todayHighlight  true            today appears with a blue box        keyboardNavigation  false       select date only onClick  when true  is too difficult free typing            And the event handlers   note I m not using     datepicker   datepicker           Smoker DataPicker behaviour         inputStoppedDate          OnEnter - gt  lose focus      on  keydown   function  e            if  e which     13                  this  blur                            onPaste - gt  hide and lose focus      on  keyup   function  e            if  e which     86                  this  blur                  this  datepicker  hide                          change function  e               do saomething

[jquery] Detect change to selected date with bootstrap-datepicker

Examples related to jquery

Examples related to twitter-bootstrap

Examples related to datepicker

Examples related to bootstrap-datepicker