Bootstrap datepicker hide after selection

Question

How do I hide the calendar after a date is selected? Is there a specific function that I can use? My code below:

$('#dp1').datepicker({
    format: 'mm-dd-yyyy',
    startDate: '-15d',
    autoclose: true,
    endDate: '+0d' // there's no convenient "right now" notation yet
});

Any help would be appreciated.

Why isn't this the default behavior of the library? – sports May 21 '14 at 18:32 — sports, May 21 '14 at 18:32

score 166 · Accepted Answer · edited May 28 '14 at 04:58

166

You can use event changedate() to keep track of when the date is changed together with datepicker('hide') method to hide the datepicker after making selection:

$('yourpickerid').on('changeDate', function(ev){
    $(this).datepicker('hide');
});

Demo

UPDATE

This was the bug with autoclose: true. This bug was fixed in latest master. SEE THE COMMIT. Get the latest code from GitHub

edited May 28 '14 at 04:58

CJ Ramki

2,620
3
25
47

answered Jan 16 '14 at 01:41

Felix

37,892
8
43
55

7

I would recommend additionally checking if current view mode is 'days' : `if (ev.viewMode === 'days') {$(this).datepicker('hide');}` as you probably don't want to hide datepicker after selecting a month or a year} – turan May 07 '14 at 16:57
1

It's looks like autoclose is set to false by default... `$(".date").datepicker({... autoclose: true, ... });` works nice !!! – Dani Feb 27 '19 at 08:44

score 49 · Answer 2 · answered May 13 '14 at 11:18

49

If it's any help to anyone, the Version 2.0 of the bootstrap datepicker no longer works with the accepted answer.

Here's how I got it working on mine:

$('yourpickerid').datepicker({
    format: 'dd/mm/yyyy',
}).on('changeDate', function(e){
    $(this).datepicker('hide');
});

See http://bootstrap-datepicker.readthedocs.org/en/latest/events.html#changedate

answered May 13 '14 at 11:18

Ola

1,033
9
6

There's a version 2? I see v1.6.4 as the latest release on Github – garryp Oct 25 '16 at 12:21
Use autoclose (see @Salim's answer or the updated accepted answer) instead of handling the event manually. If you hide the datepicker when the date is changed, then attempting to type in the date can cause unwanted behavior. – Ross Brasseaux Aug 17 '17 at 17:43

score 43 · Answer 3 · answered Nov 16 '15 at 19:24

43

$('#input').datepicker({autoclose:true});

answered Nov 16 '15 at 19:24

MD SHAHIDUL ISLAM

14,325
6
82
89

score 6 · Answer 4 · edited Nov 14 '17 at 16:13

6

Simply open the bootstrap-datepicker.js
find : var defaults = $.fn.datepicker.defaults
set autoclose: true

Save and refresh your project and this should do.

edited Nov 14 '17 at 16:13

Vivek Kumar

2,625
2
25
33

answered Aug 21 '17 at 06:36

user3615318

125
1
1

score 4 · Answer 5 · answered Oct 28 '14 at 21:45

4

If you're looking to override the behavior of the calendar in general, globally, try editing the Datepicker function (in my example it was line 82),

from

    this.autoclose = false;

to

    this.autoclose = true;

Worked fine for me, as I wanted to have all my calendar instances behave the same.

answered Oct 28 '14 at 21:45

user3674664

41
2

2

No need to change the default properties in the js library. You can pass it as a property of the object to the function when you call it. Example: $('#dob').datepicker({format: 'dd/mm/yyyy', autoclose:true}); – Zeeshan Dec 18 '15 at 05:27

score 4 · Answer 6 · edited Jul 12 '17 at 00:23

4

The problem can be stopped, blocking hide event for input element by this linese:

var your_options = { ... };
$('.datetimepicker').datetimepicker(your_options).on('hide', function (e) {
    e.preventDefault();
    e.stopPropagation();
});

edited Jul 12 '17 at 00:23

Amaan Iqbal

761
2
9
25

answered Aug 07 '16 at 18:54

papacho

41
1

Thanks mate ! i was getting mad because the input got hidden after date selection, and this solved my problem. Cheers ! – spacebiker Jan 03 '17 at 02:00

score 2 · Answer 7 · edited Feb 15 '17 at 12:55

2

Close datetimepicker when date select(datetimepicker show date with time)

$('.datepicker').datepicker({
    autoclose: true,
    closeOnDateSelect: true
});

edited Feb 15 '17 at 12:55

maazza

7,016
15
63
96

answered Feb 15 '17 at 12:25

Gosha

21
1

score 2 · Answer 8 · answered Apr 08 '20 at 09:53

2

In bootstrap 4 use "autoHide : true"

$('#datepicker1').datepicker({
    autoHide: true,
    format: 'mm-yyyy',
    endDate: new Date()
});

answered Apr 08 '20 at 09:53

Ankit24007

848
9
19

Nice answer Ankit – Shashank Singh Apr 08 '20 at 11:28

score 1 · Answer 9 · edited Feb 06 '19 at 06:21

1

$('yourpickerid').datetimepicker({
           pickTime: false
}).on('changeDate', function (e) {
           $(this).datetimepicker('hide');
});

edited Feb 06 '19 at 06:21

Jignesh Joisar

13,720
5
57
57

answered Oct 01 '14 at 01:08

mirmo

53
10

score 1 · Answer 10 · edited Feb 06 '19 at 06:24

Having problem with clock still showing even if I i wrote format: 'YYYY-MM-DD',

I hade to set pickTime: false and after change->hide I hade to focus->show

$('#VBS_RequiredDeliveryDate').datetimepicker({
  format: 'YYYY-MM-DD',
  pickTime: false
});

$('#VBS_RequiredDeliveryDate').on('change', function(){
    $('.datepicker').hide();
});

$('#VBS_RequiredDeliveryDate').on('focus', function(){
    $('.datepicker').show();
});

score 0 · Answer 11 · edited Feb 06 '19 at 06:20

0

You can change source code, bootstrap-datepicker.js. Add this.hide(); like ne

  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.hide();//here
 }

edited Feb 06 '19 at 06:20

Jignesh Joisar

13,720
5
57
57

answered May 20 '14 at 07:47

Vladimir Kulakov

43
6

score 0 · Answer 12 · answered Jun 09 '15 at 18:57

0

I got a perfect solution:

$('#Date_of_Birth').datepicker().on('changeDate', function (e) {
    if(e.viewMode === 'days')
        $(this).blur();
});

answered Jun 09 '15 at 18:57

Gordon Ma

239
2
6

score 0 · Answer 13 · edited Jan 15 '16 at 20:53

0

$('.datepicker').datepicker({
    autoclose: true
});

edited Jan 15 '16 at 20:53

devpro

16,184
3
27
38

answered Jan 15 '16 at 20:18

user3706926

181
2
12

Another answer on this question is exactly the same as yours. OP also has this `autoclose: true` in their example code. – 93196.93 Jan 15 '16 at 20:42

score 0 · Answer 14 · edited Jul 12 '17 at 05:03

0

I changed to datetimepicker and format to 'DD/MM/YYYY'

$("id").datetimepicker({
    format: 'DD/MM/YYYY',
}).on('changeDate', function() {
    $('.datepicker').hide();
});

edited Jul 12 '17 at 05:03

Amaan Iqbal

761
2
9
25

answered Jun 04 '16 at 10:44

Sorter

9,704
6
64
74

score 0 · Answer 15 · edited Feb 06 '19 at 06:25

0

For datetime picker

$('yourpickerid').datetimepicker({
        format: 'dd/mm/yyyy',
}).on('changeDate', function(e){
        $(this).datetimepicker('hide');
});

edited Feb 06 '19 at 06:25

Jignesh Joisar

13,720
5
57
57

answered Feb 18 '17 at 07:17

srinivas gowda

486
5
23

score 0 · Answer 16 · edited Sep 01 '17 at 16:45

0

At least in version 2.2.3 that I'm using, you must use autoClose instead of autoclose. Letter case matters.

edited Sep 01 '17 at 16:45

ktamlyn

4,519
2
30
41

answered Sep 01 '17 at 16:21

TimA

1
1

score 0 · Answer 17 · edited Feb 06 '19 at 06:25

0

Use this for datetimepicker, it works fine

$('#Date').data("DateTimePicker").hide();

edited Feb 06 '19 at 06:25

Jignesh Joisar

13,720
5
57
57

answered Nov 24 '17 at 09:37

sugumar

1
1

score 0 · Answer 18 · answered Feb 05 '20 at 16:59

0

Haven't seen this mentioned, but this is what fixed it for me:

switchOnClick: true

answered Feb 05 '20 at 16:59

edrakali

155
1
5

Bootstrap datepicker hide after selection

18 Answers18

Linked

Related