如何动态设置引导日期拾取器的日期值？

小开

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

set the calendar date on property data-date
update (required)
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);

小开

This works for me

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

小开

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

小开

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.

小开

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

小开

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.

小开

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

小开

Better to use :

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

instead of

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

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

小开

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

小开

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

小开

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

小开

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

小开

This works for me:

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

小开

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

小开

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

小开

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

小开

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

小开

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

小开

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

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