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

user_1430541 0
Viewed 264821

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

twitter-bootstrap datepicker jquery
25 Answers

This works for me

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

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

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.

user_110549440

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

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

user_123352110

This works for me:

$('#dpStartDate').data("date", startDate);
user_73661430 
$('#datetimepicker1').data("DateTimePicker").date('01/11/2016 10:23 AM')
user_93943990
user_76663690

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.

user_44945570

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

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

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

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