Set Default Date Bootstrap Datepicker

Question

How to set a default date in Bootstrap Datepicker?

I want to set a date : 24/12/2006

When I open datepicker it should show me this date select on calender.

Code:

$(function()
{

    $('#dob').datepicker(
    {
        <!--viewMode: "years",-->
        onRender: function(date) 
        {
         //return date.valueOf() > now.valueOf() ? 'disabled' : '';
        }       
    }
    );
});

Here is a fiddle:

http://jsfiddle.net/ymp5D/204/

Answer 1

You can do:

$('#dob').datepicker('setDate', new Date(2006, 11, 24));
$('#dob').datepicker('update');
$('#dob').val('');

Fiddle Demo

Answer 2

Above accepted solution is staled, To help others who has the newest files, if you have Version 4 or newer, and you want to call a method, here is an example for bootstrap datetimepicker method :

$('#eventDate').data("DateTimePicker").date(moment(date).format('YYYY-MM-DD'));

bootstrap.datetimepicker format Option sample :

 $('#eventDate').datetimepicker({ format: 'YYYY-MM-DD' });

for more see here (but without valid sample :) ): http://eonasdan.github.io/bootstrap-datetimepicker/Options/

Answer 3

If you want to make the change global, look for the following in bootstrap-datepicker.js:

function UTCToday(){
var today = new Date();
return UTCDate(today.getFullYear(), today.getMonth(), today.getDate());

and hard code in your date, for example:

function UTCToday(){
var today = new Date();
return UTCDate(2006, 00, 01);

Which will open on 1 January 2006. Note that for some reason January is '00' rather than '01'.

Answer 4

This works for me after a long hours of search , This solution is for Bootstrap datetimepicker version 4. when you have to set the default date in input field.

HTML

"input type='text' class="form-control" id='datetimepicker5' placeholder="Select to date" value='<?php echo $myDate?>'// $myDate is having value '2016-02-23' "

Note - If You are coding in php then you can set the value of the input datefield using php, but datetimepicker sets it back to current date when you apply datetimepicker() function to it. So in order to prevent it, use the given JS code

JAVASCRIPT

<script>
$('#datetimepicker5').datetimepicker({
    useCurrent: false, //this is important as the functions sets the default date value to the current value 
    format: 'YYYY-MM-DD'
});
</script>

Answer 5

在我的版本中，如果您将 val 放入输入中，日历会自动更新。

$('#birthdate').val("01/01/2001");

Answer 6

I wanted to set a date at the startup, and the mentionned methods didn't work. The date was shown, but when I clicked on the object the date was not selected.

So what I did is retrieving the Datepicker object of the library, and apply the _setDate method on it :

$('#dob').data("datepicker")._setDate(date);

But for this to work, the date object must be at midnight on UTC time, so before I did :

var date = new Date();
date.setUTCHours(0,0,0,0);

And then it worked.

Answer 7

你可以简单地分配一个值（和你一起给你的输入标签，它应该可以工作

<input type="text" class="form-control" value="22-05-2017">

Answer 8

A way of solution :

<div class="form-group">
  <input type="text" class="form-control datepicker" name="arrivalDate" id="datepicker_arrival">
</div>

So in your js add this :

$('.datepicker').datepicker({
   language: 'fr',
   todayHighlight: true,
   orientation: "bottom auto",
   startDate: "today",
   autoclose: true,
});
$('#datepicker_arrival').datepicker('setDate', new Date('2020/04/04'));

Answer 9

I didn't want to fire the changeDate event when I set to default date so I used

$('#calendarDatePicker').data("date", new Date());

Then instantiate the datepicker

$('#calendarDatePicker').datepicker();