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

Wanderjahr

Answer 1

This should work:

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

And for autoclose (fiddle):

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

jQuery > datepicker API

Quoin

So this way is not working? $('#datepicker').datepicker({ autoclose: true, setDate: new Date() }); – Wanderjahr

Doesn't look like autoclose is a valid option, that may be why. – Quoin

but it works this way $('#datepicker').datepicker({ autoclose: true, }); – Wanderjahr

I currently have two blocks $("#datepicker").datepicker("setDate", new Date()); and $('#datepicker').datepicker({ autoclose: true, }); this way works – Wanderjahr

Check the update, that worked for me (autoclose is a bootstrap-specific function apparently) – Quoin

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 jsfiddle.net/aekjD – Wanderjahr

This answer is invalid actually, because it talk about jquery datepicker and the question is about bootstrap datepicker – Warehouseman

Answer 2

Set after Init

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

This example is working.

Homburg

Thanks! This is the only solution that works for the Bootstrap DatePicker plugin. You first instantiate a datepicker, then set the date on it. – Backbend

Works like a charm. Thanks! – Antichrist

Answer 3

I used this code

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

Lustral

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 – Backchat

up-voted. this is the only one that works for me (from above, not tried below answers) using bootstrap-datepicker as per question. cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/js/… – Hartzell

Answer 4

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");

Corazoncorban

Set as 3 days before: $('.datepicker'){.....}).datepicker("setDate", "-3"); – Ardolino

Answer 5

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

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

This worked for me.

Stepson

Answer 6

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

});

Spraggins

Answer 7

I used this a little example and it worked.

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

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

Utopianism

You're using another plugin in your fiddle: bootstrap-datetimepicker. The one in question here is bootstrap-datepicker – Emblazonry

@Emblazonry is right but It works for bootstrap-datetimepicker and worked for me. Thanks! – Urba

Answer 8

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

Monitory

Answer 9

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") ?>">

Laidlaw

Answer 10

It's simple

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

This will be set today as the default

Juliojulis

this's working for "datetimepicker" plugin not for "datepicker". – Anana

Answer 11

Simply put the following one. This works for me.

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

Aerie

Answer 12

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

Bayer

this question is about the bootstrap datepicker, which is similar, but uses a different set of options than the jquery UI datepicker. see bootstrap-datepicker.readthedocs.org/en/latest/options.html – Fail

var currMonth = d.getMonth()+1; – Isidoro

Answer 13

$(".datepicker").datepicker({
            todayHighlight: true,
            autoclose: true,
            format: 'dd-mm-yyyy'
        });

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

I used this it will worked. by aniksaha12

Stratagem

Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center. – Tris

Answer 14

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

Kries