jQuery Datepicker close datepicker after selected date

Question

HTML:

<div class="container">   <div class="hero-unit">     <input type="text" placeholder="click to show datepicker" id="example1">   </div> </div> 

jQuery:

<script type="text/javascript">   $(document).ready(function () {     $('#example1').datepicker({       format: "dd/mm/yyyy"     });   }); </script> 

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();      }); 

Answer 1

Actually you don't need to replace this all (@Ben Rhouma Zied answere)....

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

<div class="container">     <div class="hero-unit">         <input type="text" placeholder="Sample 1: Click to show datepicker" id="example1">     </div>     <div class="hero-unit">         <input type="text" placeholder="Sample 2: Click to show datepicker" id="example2">     </div> </div> 

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)

$(document).ready(function () {     $('#example1').datepicker({         format: "dd/mm/yyyy",         autoclose: true     });      //Alternativ way     $('#example2').datepicker({       format: "dd/mm/yyyy"     }).on('change', function(){         $('.datepicker').hide();     }); });

.hero-unit{   float: left;   width: 210px;   margin-right: 25px; } .hero-unit input{   width: 100%; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script> <div class="container">     <div class="hero-unit">         <input type="text" placeholder="Sample 1: Click to show datepicker" id="example1">     </div>     <div class="hero-unit">         <input type="text" placeholder="Sample 2: Click to show datepicker" id="example2">     </div> </div>

EDIT: December 2018 Obviously Bootstrap-Datepicker doesnt work with jQuery 3.x see this to fix

Answer 2

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 = '<tr>';         while (dowCnt < this.weekStart + 7) {             html += '<th class="dow">'+DPGlobal.dates.daysMin[(dowCnt++)%7]+'</th>';         }         html += '</tr>';         this.picker.find('.datepicker-days thead').append(html);     },      fillMonths: function(){         var html = '';         var i = 0         while (i < 12) {             html += '<span class="month">'+DPGlobal.dates.monthsShort[i++]+'</span>';         }         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() < nextMonth) {zs             if (prevMonth.getDay() === this.weekStart) {                 html.push('<tr>');             }             clsName = this.onRender(prevMonth);             prevY = prevMonth.getFullYear();             prevM = prevMonth.getMonth();             if ((prevM < month &&  prevY === year) ||  prevY < year) {                 clsName += ' old';             } else if ((prevM > month && prevY === year) || prevY > year) {                 clsName += ' new';             }             if (prevMonth.valueOf() === currentDate) {                 clsName += ' active';             }             html.push('<td class="day '+clsName+'">'+prevMonth.getDate() + '</td>');             if (prevMonth.getDay() === this.weekEnd) {                 html.push('</tr>');             }             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 < 11; i++) {             html += '<span class="year'+(i === -1 || i === 10 ? ' old' : '')+(currentYear === year ? ' active' : '')+'">'+year+'</span>';             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') && !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('>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' && 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) && (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 < 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 < 10 ? '0' : '') + val.d;         val.mm = (val.m < 10 ? '0' : '') + val.m;         var date = [];         for (var i=0, cnt = format.parts.length; i < cnt; i++) {             date.push(val[format.parts[i]]);         }         return date.join(format.separator);     },     headTemplate: '<thead>'+                         '<tr>'+                             '<th class="prev">&lsaquo;</th>'+                             '<th colspan="5" class="switch"></th>'+                             '<th class="next">&rsaquo;</th>'+                         '</tr>'+                     '</thead>',     contTemplate: '<tbody><tr><td colspan="7"></td></tr></tbody>' }; DPGlobal.template = '<div class="datepicker dropdown-menu">'+                         '<div class="datepicker-days">'+                             '<table class=" table-condensed">'+                                 DPGlobal.headTemplate+                                 '<tbody></tbody>'+                             '</table>'+                         '</div>'+                         '<div class="datepicker-months">'+                             '<table class="table-condensed">'+                                 DPGlobal.headTemplate+                                 DPGlobal.contTemplate+                             '</table>'+                         '</div>'+                         '<div class="datepicker-years">'+                             '<table class="table-condensed">'+                                 DPGlobal.headTemplate+                                 DPGlobal.contTemplate+                             '</table>'+                         '</div>'+                     '</div>';  }( window.jQuery );