Reputation: 911

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

Upvotes: 91

Answers (25)

Muhammad Saimon

Reputation: 281

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

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

Upvotes: 0

Hicham O'Sfh

Reputation: 841

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

Upvotes: 2

user3426396

Reputation: 75

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

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

Upvotes: 0

Ahmed Memon

Reputation: 170

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.

Upvotes: 0

Kiafar

Reputation: 174

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

Upvotes: 2

Saurabh Srivastava

Reputation: 41

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.

Upvotes: 4

track3r

Reputation: 139

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

Upvotes: 4

winbill

Reputation: 31

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

Upvotes: 0

N036

Reputation: 21

This works for me:

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

Upvotes: 1

Hardik

Reputation: 21

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

Upvotes: 0

kiranvj

Reputation: 34107

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

Upvotes: 3

jayapal d

Reputation: 327

This works for me,

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

Upvotes: 11

lnwMaN

Reputation: 61

Simple way like this (one line)

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

Upvotes: 1

Drytin

Reputation: 366

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

Upvotes: 0

Cataclysm

Reputation: 8548

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

Upvotes: 1

Jayesh Sorathia

Reputation: 1614

You can use this simple method like :

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

Upvotes: 0

Camille Muller

Reputation: 289

Better to use :

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

instead of

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

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

Upvotes: 14

Sanuja Lavindika

Reputation: 201

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

Upvotes: 3

user6433435

Reputation: 161

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.

Upvotes: 16

Sandeep Shekhawat

Reputation: 695

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

Upvotes: 0

MG_

Reputation: 473

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'

Upvotes: 44

A.J.

Reputation: 8985

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.

Upvotes: 3

Imran Rashid

Reputation: 3492

This works for me

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

Upvotes: 81

SomethingOn

Reputation: 10881

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

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

Upvotes: 3

Nikhil

Reputation: 431

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

Upvotes: 33

How to dynamically set bootstrap-datepicker&#39;s date value?

Answers (25)

Related Questions

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