How to dynamically set bootstrap-datepicker's date value?

I am using bootstrap datepicker along with a line highchart.

I want the datepicker date to update when the chart is zoomed. Once that event triggers I update the values of the datepicker. The values update fine but when the calendar is clicked, the date on the popup calendar is still the old date.

Here is my datepicker:

<div class="input-append date pull-right" id="dpStartDate" data-date="@DateTime.Now.AddMonths(-1).ToString("dd/MM/yyyy")" data-date-format="dd/mm/yyyy">
    <input class="span2" id="startDateText" size="16" type="text" value="@DateTime.Now.AddMonths(-1).ToString("dd/MM/yyyy")" readonly="">
    <span class="add-on"><i class="icon-th"></i></span>
</div>

I have tried just updating the values using this code:

$('#dpStartDate').attr('data-date', startDate);
$('#startDateText').attr('value', startDate);

which updates the dates fine but doesn't set the calendar.

I've also tried triggering the onChange event, which also updates the dates but not the calendar:

$('#dpStartDate').trigger('changeDate', startDate);

$('#dpStartDate').datepicker()
    .on('show', function (ev) {
        ev.stopPropagation();
    })
    .on('changeDate', function (ev, date) {
        var startDate = new Date();
        if (date != undefined) {
            startDate = date;
            $('#dpStartDate').attr('data-date', startDate);
            $('#startDateText').attr('value', startDate);
        }
        else {
            startDate = ev.date;
            $('#dpStartDate').attr(startDate.getDate() + '/' + (startDate.getMonth() + 1) + '/' + startDate.getFullYear());
            $('#startDateText').attr(startDate.getDate() + '/' + (startDate.getMonth() + 1) + '/' + startDate.getFullYear());
        }
        $('#dpStartDate').datepicker('hide');
        ev.stopPropagation();
    });

Does anyone know if it's even possible to update the calendar like that?

Thanks

This works for me

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

var startDate = new Date();
         
$('#dpStartDate').data({date: startDate}).datepicker('update').children("input").val(startDate);

another way

$('#dpStartDate').data({date: '2012-08-08'});
$('#dpStartDate').datepicker('update');
$('#dpStartDate').datepicker().children('input').val('2012-08-08');

1. set the calendar date on property data-date
2. update (required)
3. set the input value (remember the input is child of datepicker).

this way you are setting the date to '2012-08-08'

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

Try this code,

$(".endDate").datepicker({
    format: 'dd/mm/yyyy',
    autoclose: true
}).datepicker("update", "10/10/2016"); 

this will update date and apply format dd/mm/yyyy as well.

Better to use :

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

instead of

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

If you use update, event changeDate isn't triggered.

This works for me,

$('#datepicker').datepicker("setValue", '01/10/2014' );
$('#datepicker').datepicker("setValue", new Date(2008,9,03));

I had to do 'setValue' and 'update' in order to get it to work completely

$('#datepicker').datepicker('setValue', '2014-01-29').datepicker('update');

When using the methods of other answers, the configured options are lost, to correct it, you can use a global configuration:

$('.datepicker').datepicker();
$.fn.datepicker.defaults.format = 'dd/mm/yyyy';
$.fn.datepicker.defaults.startDate = "0";
$.fn.datepicker.defaults.language = "es";
$.fn.datepicker.defaults.autoclose = true;
$.fn.datepicker.defaults.todayHighlight = true;
$.fn.datepicker.defaults.todayBtn = true;
$.fn.datepicker.defaults.weekStart = 1;

Now you can use the update method without losing the options:

$(".datepicker").datepicker("update", new Date("30/11/2018"));

That really works.

Simple,

Easy to understand,

Single method to set and update plugin which worked for me.

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

Other ways to update

$('.datepicker').data({date: '2015-01-01'});
$('.datepicker').datepicker('update');

Dont forget to call update manually.

For datetimepickers use this this work for me

$('#lastdate1').data({date: '2016-07-05'});
$('#lastdate1').datetimepicker('update');
$('#lastdate1').datetimepicker().children('input').val('2016-07-05');

For Bootstrap 4

If you are using input group in Bootstrap, you need to attach the new date to parent of the textbox, otherwise if you click on the calendar icon and click outside the date will be cleared.

<div class="input-group date" id="my-date-component">
   <input type="text" />
    <div class="input-group-append">
      <span class="input-group-text"><i class="fa fa-calendar"></i></span>
    </div>
</div>

You need to set date to input-group.date.

$('#my-date-component').datepicker("update", new Date("01/10/2014"));

Also check datepicker update method

Use Code:

var startDate = "2019-03-12"; //Date Format YYYY-MM-DD

$('#datepicker').val(startDate).datepicker("update");

Explanation:

Datepicker(input field) Selector #datepicker.

Update input field.

Call datepicker with option update.

Please note that if you initiate a datepicker with a custom format, you can pass the simple string date as the second argument. This saves a few lines.

$('.selector').datepicker({
    format:'dd/mm/yyyy',
});

$('.selector').datepicker('update', '13/09/2019');

$('#DateDepenseInput').val("2020-12-28")
the Format should be like Year-Month-Day
It worked well for me ...

If you are using Bootstrap DatePicker version 4+

> Note All functions are accessed via the data attribute e.g. > $('#datetimepicker').data("DateTimePicker").FUNCTION()

To set the date value, your codes should be like

$("#datetimepicker").data("DateTimePicker").date(new Date());

Simple way like this (one line)

$('#startDateText').val(startDate).datepicker("update");

This works for me:

$('#dpStartDate').data("date", startDate);

You can do also this way:

  $("#startDateText").datepicker({
                toValue: function (date, format, language) {
                    var d = new Date(date);
                    d.setDate(d.getDate());
                    return new Date(d);
                },
                autoclose: true
            });

http://bootstrap-datepicker.readthedocs.org/en/latest/options.html#format

@Imran answer works for textboxes

for applying the datepicker to a div use this:

$('#div_id').attr("data-date", '1 January 2017');
$('#div_id').datepicker("update");

comma-delim multiple dates:

$('#div_id').attr("data-date", '1 January 2017,2 January 2017,3 January 2017');

You can use this simple method like :

qsFromDate = '2017-05-10';
$("#dtMinDate").datepicker("setDate", new Date(qsFromDate));
$('#dtMinDate').datepicker('update');

$('#datetimepicker1').data("DateTimePicker").date('01/11/2016 10:23 AM')

If you refer to https://github.com/smalot/bootstrap-datetimepicker You need to set the date value by: $('#datetimepicker1').data('datetimepicker').setDate(new Date(value));

Try

$("#datepicker").datepicker('setDate','25-05-2020').datepicker('fill');

This works for me when setDate is not updating the date picker text field value on browser. " The additional .datepicker('fill');" repopulate the bootstrap datepicker for new date which is set by setDate method.

On page load if you dont want to fire the changeDate event which I didnt

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

This works perfectly for me. Simply put the following one.

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