jQuery Datepicker close datepicker after selected date

Question

HTML    lt div class  container  gt     lt div class  hero-unit  gt       lt input type  text  placeholder  click to show datepicker  id  example1  gt     lt  div gt   lt  div gt    jQuery    lt script type  text javascript  gt      document  ready function              example1   datepicker         format   dd mm yyyy                 lt  script gt    I use bootstrap datepicker   When I click to datepicker it opens and I select any date   My question      If I choose date from datepicker  I want to close datepicker popup    Which event do i need to use in order to close datepicker on select date   Edited   I have found a solution  This works     document  mouseup function  e                 example1   Close               But this below does not work why         example1   datepicker   on  changeDate   function  ev                 example1   Close

User · Answer

Answer above did not work for me on Chrome. The change event was been fired after I clicked out of the field somewhere, which did not help because the datepicker window is also closed too when you click out of the field.

I did use this code and it worked pretty well. You can place it after calling .datepicker();

HTML

<input type="text" class="datepicker-input" placeholder="click to show datepicker" />

JavaScript

$(".datepicker-input").each(function() {
    $(this).datepicker();
});

$(".datepicker-input").click(function() {
    $(".datepicker-days .day").click(function() {
        $('.datepicker').hide();
    });
});

User · Answer

There is another code that s works for me  jQuery     x000D   x000D      datepicker   datepicker   x000D      format   dd mm yyyy   x000D      autoHide  true x000D         x000D   lt script src  https   cdnjs cloudflare com ajax libs jquery 3 3 1 jquery min js  gt  lt  script gt  x000D   lt script src  https   cdnjs cloudflare com ajax libs datepicker 0 6 5 datepicker js  gt  lt  script gt  x000D   lt link rel  stylesheet  href  https   cdnjs cloudflare com ajax libs datepicker 0 6 5 datepicker css    gt  x000D  Date   lt input type  text  readonly  true  class  datepicker  gt  x000D   x000D   x000D

User · Answer

This is my edited version   you just need to add an extra argument  autoClose    example        input name  fieldName     datepicker   autoClose  true      also you can specify a close callback if you want      replace datepicker js with this    function            Picker object  var Datepicker   function element  options   closeCallBack       this element     element       this format   DPGlobal parseFormat options format  this element data  date-format     dd mm yyyy        this autoClose   options autoClose  this element data  date-autoClose     true      this closeCallback   closeCallBack    function          this picker     DPGlobal template                           appendTo  body                            on                               click    proxy this click  this                                   mousedown    proxy this mousedown  this                                  this isInput   this element is  input        this component   this element is   date     this element find   add-on     false       if  this isInput            this element on               focus    proxy this show  this                 blur    proxy this hide  this               keyup    proxy this update  this                    else           if  this component               this component on  click     proxy this show  this              else               this element on  click     proxy this show  this                         this minViewMode   options minViewMode  this element data  date-minviewmode    0      if  typeof this minViewMode      string             switch  this minViewMode                case  months                   this minViewMode   1                  break              case  years                   this minViewMode   2                  break              default                  this minViewMode   0                  break                      this viewMode   options viewMode  this element data  date-viewmode    0      if  typeof this viewMode      string             switch  this viewMode                case  months                   this viewMode   1                  break              case  years                   this viewMode   2                  break              default                  this viewMode   0                  break                      this startViewMode   this viewMode      this weekStart   options weekStart  this element data  date-weekstart    0      this weekEnd   this weekStart     0   6   this weekStart - 1      this onRender   options onRender      this fillDow        this fillMonths        this update        this showMode        Datepicker prototype         constructor  Datepicker       show  function e            this picker show            this height   this component   this component outerHeight     this element outerHeight            this place              window  on  resize     proxy this place  this            if  e                 e stopPropagation                e preventDefault                      if   this isInput                      var that   this            document  on  mousedown   function ev               if    ev target  closest   datepicker   length    0                    that hide                                      this element trigger               type   show               date  this date                         hide  function            this picker hide              window  off  resize   this place           this viewMode   this startViewMode          this showMode            if   this isInput                  document  off  mousedown   this hide                       this set            this element trigger               type   hide               date  this date                         set  function             var formated   DPGlobal formatDate this date  this format           if   this isInput                if  this component                   this element find  input   prop  value   formated                             this element data  date   formated             else               this element prop  value   formated                         setValue  function newDate            if  typeof newDate      string                 this date   DPGlobal parseDate newDate  this format             else               this date   new Date newDate                     this set            this viewDate   new Date this date getFullYear    this date getMonth    1  0  0  0  0           this fill                place  function            var offset   this component   this component offset     this element offset            this picker css               top  offset top   this height              left  offset left                         update  function newDate           this date   DPGlobal parseDate              typeof newDate      string    newDate    this isInput   this element prop  value     this element data  date                 this format                    this viewDate   new Date this date getFullYear    this date getMonth    1  0  0  0  0           this fill                fillDow  function            var dowCnt   this weekStart          var html     lt tr gt            while  dowCnt  lt  this weekStart   7                html      lt th class  dow  gt   DPGlobal dates daysMin  dowCnt    7    lt  th gt                      html      lt  tr gt            this picker find   datepicker-days thead   append html               fillMonths  function            var html               var i   0         while  i  lt  12                html      lt span class  month  gt   DPGlobal dates monthsShort i      lt  span gt                      this picker find   datepicker-months td   append html               fill  function             var d   new Date this viewDate               year   d getFullYear                month   d getMonth                currentDate   this date valueOf            this picker find   datepicker-days th eq 1                         text DPGlobal dates months month      year           var prevMonth   new Date year  month-1  28 0 0 0 0               day   DPGlobal getDaysInMonth prevMonth getFullYear    prevMonth getMonth             prevMonth setDate day           prevMonth setDate day -  prevMonth getDay   - this weekStart   7  7           var nextMonth   new Date prevMonth           nextMonth setDate nextMonth getDate     42           nextMonth   nextMonth valueOf            var html               var clsName              prevY              prevM          while prevMonth valueOf    lt  nextMonth   zs             if  prevMonth getDay       this weekStart                    html push   lt tr gt                               clsName   this onRender prevMonth               prevY   prevMonth getFullYear                prevM   prevMonth getMonth                if   prevM  lt  month  amp  amp   prevY     year      prevY  lt  year                    clsName      old                 else if   prevM  gt  month  amp  amp  prevY     year     prevY  gt  year                    clsName      new                             if  prevMonth valueOf       currentDate                    clsName      active                             html push   lt td class  day   clsName    gt   prevMonth getDate       lt  td gt                 if  prevMonth getDay       this weekEnd                    html push   lt  tr gt                               prevMonth setDate prevMonth getDate   1                     this picker find   datepicker-days tbody   empty   append html join               var currentYear   this date getFullYear             var months   this picker find   datepicker-months                        find  th eq 1                             text year                           end                        find  span   removeClass  active            if  currentYear     year                months eq this date getMonth    addClass  active                       html               year   parseInt year 10  10    10          var yearCont   this picker find   datepicker-years                                find  th eq 1                                     text year    -     year   9                                    end                                find  td            year -  1          for  var i   -1  i  lt  11  i                  html      lt span class  year   i     -1    i     10     old         currentYear     year     active           gt   year   lt  span gt                year    1                    yearCont html html               click  function e            e stopPropagation            e preventDefault            var target     e target  closest  span  td  th            if  target length     1                switch target 0  nodeName toLowerCase                      case  th                       switch target 0  className                            case  switch                               this showMode 1                               break                          case  prev                           case  next                               this viewDate  set  DPGlobal modes this viewMode  navFnc  call                                  this viewDate                                  this viewDate  get  DPGlobal modes this viewMode  navFnc  call this viewDate                                     DPGlobal modes this viewMode  navStep    target 0  className      prev    -1   1                                                             this fill                                this set                                break                                            break                  case  span                       if  target is   month                              var month   target parent   find  span   index target                           this viewDate setMonth month                         else                           var year   parseInt target text    10   0                          this viewDate setFullYear year                                             if  this viewMode     0                            this date   new Date this viewDate                           this element trigger                               type   changeDate                               date  this date                              viewMode  DPGlobal modes this viewMode  clsName                                                                       this showMode -1                       this fill                        this set                        break                  case  td                       if  target is   day    amp  amp   target is   disabled                             var day   parseInt target text    10   1                          var month   this viewDate getMonth                            if  target is   old                                  month -  1                            else if  target is   new                                  month    1                                                    var year   this viewDate getFullYear                            this date   new Date year  month  day 0 0 0 0                           this viewDate   new Date year  month  Math min 28  day  0 0 0 0                           this fill                            this set                            this element trigger                               type   changeDate                               date  this date                              viewMode  DPGlobal modes this viewMode  clsName                                                     if this autoClose     true                               this hide                                this closeCallback                                                                         break                                      mousedown  function e           e stopPropagation            e preventDefault                showMode  function dir            if  dir                this viewMode   Math max this minViewMode  Math min 2  this viewMode   dir                      this picker find   gt div   hide   filter   datepicker-  DPGlobal modes this viewMode  clsName  show                fn datepicker   function   option  val         return this each function              var  this     this           var datePicker    this data  datepicker            var options   typeof option      object   amp  amp  option          if   datePicker                if  typeof val      function                    this data  datepicker    datePicker   new Datepicker this    extend       fn datepicker defaults options  val                 else                   this data  datepicker    datePicker   new Datepicker this    extend       fn datepicker defaults options                                      if  typeof option      string   datePicker option  val                  fn datepicker defaults         onRender  function date            return                fn datepicker Constructor   Datepicker   var DPGlobal         modes                          clsName   days               navFnc   Month               navStep  1                                  clsName   months               navFnc   FullYear               navStep  1                                  clsName   years               navFnc   FullYear               navStep  10             dates           days    Dimanche    Lundi    Mardi    Mercredi    Jeudi    Vendredi    Samedi    Dimanche                        daysShort    Dim    Lun    Mar    Mer    Jeu    Ven    Sam    Dim                        daysMin    D    L    Ma    Me    J    V    S    D                        months    Janvier    F  vrier    Mars    Avril    Mai    Juin    Juillet    Ao  t    Septembre    Octobre    Novembre    D  cembre                        monthsShort    Jan    F  v    Mar    Avr    Mai    Jui    Jul    Aou    Sep    Oct    Nov    D  c                        today   Aujourd hui                       clear   Effacer                       weekStart  1                      format   dd mm yyyy             isLeapYear  function  year            return    year   4     0   amp  amp   year   100     0       year   400     0              getDaysInMonth  function  year  month            return  31   DPGlobal isLeapYear year    29   28   31  30  31  30  31  31  30  31  30  31  month             parseFormat  function format           var separator   format match       - s                    parts   format split   W             if   separator     parts    parts length     0               throw new Error  Invalid date format                       return  separator  separator  parts  parts              parseDate  function date  format            var parts   date split format separator               date   new Date                val          date setHours 0           date setMinutes 0           date setSeconds 0           date setMilliseconds 0           if  parts length     format parts length                var year   date getFullYear    day   date getDate    month   date getMonth                for  var i 0  cnt   format parts length  i  lt  cnt  i                      val   parseInt parts i   10   1                  switch format parts i                         case  dd                       case  d                           day   val                          date setDate val                           break                      case  mm                       case  m                           month   val - 1                          date setMonth val - 1                           break                      case  yy                           year   2000   val                          date setFullYear 2000   val                           break                      case  yyyy                           year   val                          date setFullYear val                           break                                              date   new Date year  month  day  0  0  0                     return date             formatDate  function date  format           var val                 d  date getDate                m  date getMonth     1              yy  date getFullYear   toString   substring 2               yyyy  date getFullYear                      val dd    val d  lt  10    0          val d          val mm    val m  lt  10    0          val m          var date               for  var i 0  cnt   format parts length  i  lt  cnt  i                  date push val format parts i                       return date join format separator              headTemplate    lt thead gt                              lt tr gt                                  lt th class  prev  gt  amp lsaquo  lt  th gt                                  lt th colspan  5  class  switch  gt  lt  th gt                                  lt th class  next  gt  amp rsaquo  lt  th gt                              lt  tr gt                          lt  thead gt        contTemplate    lt tbody gt  lt tr gt  lt td colspan  7  gt  lt  td gt  lt  tr gt  lt  tbody gt      DPGlobal template     lt div class  datepicker dropdown-menu  gt                              lt div class  datepicker-days  gt                                  lt table class   table-condensed  gt                                    DPGlobal headTemplate                                    lt tbody gt  lt  tbody gt                                  lt  table gt                              lt  div gt                              lt div class  datepicker-months  gt                                  lt table class  table-condensed  gt                                    DPGlobal headTemplate                                  DPGlobal contTemplate                                lt  table gt                              lt  div gt                              lt div class  datepicker-years  gt                                  lt table class  table-condensed  gt                                    DPGlobal headTemplate                                  DPGlobal contTemplate                                lt  table gt                              lt  div gt                          lt  div gt        window jQuery

User · Answer

actually you don t need to replace this all      there are 2 ways to do this  One is to use autoclose property  the other  alternativ  way is to use the on change property thats fired by the input when selecting a Date   HTML   lt div class  container  gt       lt div class  hero-unit  gt           lt input type  text  placeholder  Sample 1  Click to show datepicker  id  example1  gt       lt  div gt       lt div class  hero-unit  gt           lt input type  text  placeholder  Sample 2  Click to show datepicker  id  example2  gt       lt  div gt   lt  div gt    jQuery     document  ready function              example1   datepicker           format   dd mm yyyy           autoclose  true                Alternativ way         example2   datepicker         format   dd mm yyyy         on  change   function                datepicker   hide                   this is all you have to do     HERE IS A FIDDLE to see whats happening   Fiddleupdate on 13 of July 2016  CDN wasnt present anymore  According to your EDIT       example1   datepicker   on  changeDate   function  ev            example1   Close          Here you take the Input  that has no Close-Function  and create a Datepicker-Element  If the element changes you want to close it but you still try to close the Input  That has no close-function       Binding a mouseup event to the document state may not be the best idea because you will fire all containing scripts on each click    Thats it     EDIT  August 2017  Added a StackOverFlowFiddle aka Snippet  Same as in Top of Post    x000D   x000D    document  ready function      x000D          example1   datepicker   x000D          format   dd mm yyyy   x000D          autoclose  true x000D          x000D   x000D        Alternativ way x000D          example2   datepicker   x000D        format   dd mm yyyy  x000D         on  change   function    x000D              datepicker   hide    x000D          x000D      x000D   hero-unit  x000D    float  left  x000D    width  210px  x000D    margin-right  25px  x000D    x000D   hero-unit input  x000D    width  100   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  https   ajax googleapis com ajax libs jqueryui 1 12 1 jquery-ui min js  gt  lt  script gt  x000D   lt div class  container  gt  x000D       lt div class  hero-unit  gt  x000D           lt input type  text  placeholder  Sample 1  Click to show datepicker  id  example1  gt  x000D       lt  div gt  x000D       lt div class  hero-unit  gt  x000D           lt input type  text  placeholder  Sample 2  Click to show datepicker  id  example2  gt  x000D       lt  div gt  x000D   lt  div gt  x000D   x000D   x000D    EDIT  December 2018 Obviously Bootstrap-Datepicker doesnt work with jQuery 3 x see this to fix

[javascript] jQuery Datepicker close datepicker after selected date

Examples related to javascript

Examples related to jquery

Examples related to twitter-bootstrap

Examples related to datepicker