bootstrap datepicker today as default

Question

I am using this bootstrap-datepicker for my datepicker. I'd like the datepicker to choose "today" for start day or default day. I cannot figure out how to set "today" automatically, so I did an inefficient way

HTML:

<input type="text" value ="today();" id="datepicker"/>

JS:

 $('#datepicker').datepicker();
function today(){
    var d = new Date();
    var curr_date = d.getDate();
    var curr_month = d.getMonth() + 1;
    var curr_year = d.getFullYear();
    document.write(curr_date + "-" + curr_month + "-" + curr_year);
}

Online Sample: http://jsfiddle.net/BXZk2/

Just looking for an easy solution to make the default day as "TODAY".

Thanks

Nic · Accepted Answer · 2013-03-15T02:21:14.257

95

This should work:

$("#datepicker").datepicker("setDate", new Date());

And for autoclose (fiddle):

$('#datepicker').datepicker({
        "setDate": new Date(),
        "autoclose": true
});

jQuery > datepicker API

edited Mar 15 '13 at 02:21

answered Mar 15 '13 at 02:03

Nic

13,287
7
40
42

So this way is not working? `$('#datepicker').datepicker({ autoclose: true, setDate: new Date() });` – olo Mar 15 '13 at 02:09
1

Doesn't look like `autoclose` is a valid option, that may be why. – Nic Mar 15 '13 at 02:16
but it works this way `$('#datepicker').datepicker({ autoclose: true, }); ` – olo Mar 15 '13 at 02:17
11

I currently have two blocks `$("#datepicker").datepicker("setDate", new Date());` and `$('#datepicker').datepicker({ autoclose: true, });` this way works – olo Mar 15 '13 at 02:18
Check the update, that worked for me (autoclose is a bootstrap-specific function apparently) – Nic Mar 15 '13 at 02:21
1

Thanks for the fiddle, that one doesnt work as the default date is empty. this one works the same as what I am having now. Separate blocks http://jsfiddle.net/aekjD/ – olo Mar 15 '13 at 02:27
27

This answer is invalid actually, because it talk about `jquery datepicker` and the question is about `bootstrap datepicker` – Kishor Pawar Jun 21 '16 at 10:50

score 48 · Answer 2 · answered Jan 14 '14 at 11:09

48

Set after Init

 $('#dp-ex-3').datepicker({ autoclose: true, language: 'es' });
$('#dp-ex-3').datepicker('update', new Date());

This example is working.

answered Jan 14 '14 at 11:09

Marc Rubiño

725
7
8

4

Thanks! This is the only solution that works for the Bootstrap DatePicker plugin. You first instantiate a datepicker, then set the date on it. – Alex Feb 02 '17 at 16:40
Works like a charm. Thanks! – Albert Alberto Jan 26 '21 at 12:19

score 34 · Answer 3 · answered Nov 20 '17 at 09:45

34

I used this code

$('#datePicker').datepicker({
                    format:'mm/dd/yyyy',
                }).datepicker("setDate",'now');

answered Nov 20 '17 at 09:45

Shiva Manhar

673
8
19

Thanks, this is the only way that works for me. jQuery UI - v1.12.1 - 2021-06-06, jQuery dependency v3.3.1 and I can NOT get those above work – Huy Phạm Oct 06 '21 at 09:56

score 16 · Answer 4 · edited Jan 29 '22 at 22:27

16

Date picker with current date and basic settings:

// Datepicker
$('.datepicker').datepicker({
    autoclose: true,
    format: "yyyy-mm-dd",
    immediateUpdates: true,
    todayBtn: true,
    todayHighlight: true
}).datepicker("setDate", "0");

edited Jan 29 '22 at 22:27

Nick is tired

6,860
20
39
51

answered Dec 27 '17 at 15:25

Ronak Bokaria

616
6
6

Set as 3 days before: $('.datepicker'){.....}).datepicker("setDate", "-3"); – Stephen Oct 06 '22 at 23:15

score 12 · Answer 5 · edited Jan 26 '22 at 00:13

12

If none of the above option work, use the following :

$(".datepicker").datepicker();
$(".datepicker").datepicker("setDate", new Date());

This worked for me.

edited Jan 26 '22 at 00:13

JON

965
2
10
28

answered Jun 24 '16 at 10:08

Huzaifa Saifuddin

768
9
12

score 7 · Answer 6 · answered Aug 31 '15 at 03:31

7

I used this a little example and it worked.

$('#date').datetimepicker({
    defaultDate: new Date()
});

demo : http://jsfiddle.net/m2fjw57b/1/

answered Aug 31 '15 at 03:31

Bruno Ribeiro

1,280
16
21

3

You're using another plugin in your fiddle: bootstrap-datetimepicker. The one in question here is bootstrap-datepicker – olefrank Nov 16 '15 at 12:06
1

@olefrank is right but It works for bootstrap-datetimepicker and worked for me. Thanks! – Rodolfo Velasco Mar 04 '16 at 16:20

score 7 · Answer 7 · edited Jan 26 '22 at 17:15

7

It works fine for me...

$(document).ready(function() {
    var date = new Date();
    var today = new Date(date.getFullYear(), date.getMonth(), date.getDate());

    $('#datepicker1').datepicker({
        format: 'dd-mm-yyyy',
        orientation: 'bottom'
    });

    $('#datepicker1').datepicker('setDate', today);

});

edited Jan 26 '22 at 17:15

JON

965
2
10
28

answered May 21 '19 at 06:29

AngularJMK

1,178
13
15

score 6 · Answer 8 · answered Nov 28 '17 at 10:17

6

For bootstrap date picker

$( ".classNmae" ).datepicker( "setDate", new Date());

* new Date is jquery default function in which you can pass custom date & if it not set, it will take current date by default

answered Nov 28 '17 at 10:17

amn

180
2
6

score 5 · Answer 9 · answered May 08 '19 at 07:40

This question is about bootstrap date picker. But all of the above answers are for the jquery date picker. For Bootstrap datepicker, you just need to provide the defaut date in the value of the input element. Like this.

<input class="form-control datepicker" value=" <?= date("Y-m-d") ?>">

score 3 · Answer 10 · edited Jan 28 '22 at 16:17

3

It's simple

$(function() {
    $("#datePicker").datetimepicker({
        defaultDate:'now'       
    });
});

This will be set today as the default

edited Jan 28 '22 at 16:17

JON

965
2
10
28

answered Dec 01 '15 at 09:53

Ritesh

350
3
4

1

this's working for "datetimepicker" plugin not for "datepicker". – Jarachanthan Ratnakumar Jun 04 '18 at 07:00

score 3 · Answer 11 · answered Jan 20 '21 at 15:25

3

Simply put the following one. This works for me.

$('.className').datepicker('setDate', 'now');

answered Jan 20 '21 at 15:25

Muhammad Saimon

233
2
10

score 2 · Answer 12 · edited May 23 '17 at 12:32

2

According to this link Set default date of jquery datepicker, the other solution is

var d = new Date();

var currDate = d.getDate();
var currMonth = d.getMonth();
var currYear = d.getFullYear();

var dateStr = currDate + "-" + currMonth + "-" + currYear;

$("#datepicker").datepicker(({dateFormat: "dd-mm-yy" autoclose: true, defaultDate: dateStr });

edited May 23 '17 at 12:32

Community

1
1

answered Mar 15 '13 at 02:37

Hensembryan

1,067
3
14
31

4

this question is about the bootstrap datepicker, which is similar, but uses a different set of options than the jquery UI datepicker. see https://bootstrap-datepicker.readthedocs.org/en/latest/options.html – calebtr Sep 03 '15 at 21:55
var currMonth = d.getMonth()+1; – Kurkula Apr 01 '16 at 04:30

score -3 · Answer 13 · edited Nov 06 '17 at 11:46

-3

I changed code in line 1796 file 'bootstrap-datetimepicker.js'. It's worked for me

edited Nov 06 '17 at 11:46

Niklas Rosencrantz

25,640
75
229
424

answered Nov 06 '17 at 09:32

Tuấn Dương Hồng

11

bootstrap datepicker today as default

13 Answers13

It works fine for me...

Linked