How to dynamically set bootprap-datepicker boot date value?

Question

I am using bootstrap datepicker along with a highchart string.

I want the datepicker date updated when the chart has been enlarged. When this event fires, I update the datepicker parameter values. The values ​​are updated fine, but when a click is clicked, the date in the pop-up calendar is still old.

Here is my datpicker:

<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 tried just updating the values ​​with this code:

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

which updates dates but does not set a calendar.

I also tried to fire 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 is even possible to update this calendar?

thank

Answer 1

It works for me

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

Answer 2

 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 calendar date to property data date
• update (required)
• set the input value (remember that the input is a child of datepicker).

so you set the date to '2012-08-08'

Answer 3

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

Answer 4

Try this code,

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

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

Answer 5

It works for me

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

Answer 6

Better to use:

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

instead

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

If you use the update, the changeDate event does not fire.

Answer 7

I had to do "setValue" and "update" to make it work fully

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

Answer 8

It really works.

Plain,

Easy to understand

One method of installing and updating the plugin that worked for me.

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

Other update methods

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

Remember to call update manually.

Answer 9

When using the methods of other answers, the configured parameters are lost, you can use the global configuration for correction:

 $('.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 parameters:

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

Answer 10

For datetimepickers use this work for me

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

Answer 11

For bootstrap 4

If you use the input group in Bootstrap, you need to attach the new date to the parent element of the text field, otherwise, if you click on the calendar icon and click outside the date, the cleaning will be performed.

 <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 the date to input-group.date .

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

Also check the date picker update method

Answer 12

Use code:

 var startDate = "2019-03-12"; //Date Format YYYY-MM-DD $('#datepicker').val(startDate).datepicker("update"); 

Explanation:

Datepicker (input field) The #datepicker selector.

Refresh input field.

Call DatePicker with the update option.

Answer 13

This works for me:

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

Answer 14

You can also do this:

  $("#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

Answer 15

@Imran is responsible for the text fields

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

Answer 16

You can use this simple method, for example:

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

Answer 17

If you are using Bootstrap DatePicker version 4+

Note. All functions are available through the data attribute, for example. $ ('# DateTimePicker'). Data ("DateTimePicker"). FUNCTION()

To set the date value, your codes should be like

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

Answer 18

A simple way like this (one line)

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

Answer 19

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

Answer 20

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

Answer 21

Note that if you run the date picker in any format, you can pass a simple string date as the second argument. This saves a few lines.

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