How to dynamically set bootstrap-datepicker s date value

Question

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    lt 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  gt       lt input class  span2  id  startDateText  size  16  type  text  value   DateTime Now AddMonths -1  ToString  dd MM yyyy    readonly    gt       lt span class  add-on  gt  lt i class  icon-th  gt  lt  i gt  lt  span gt   lt  div gt    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

User · Answer

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 · Answer

datepicker   datepicker  setDate   new Date

User · Answer

On page load if you dont want to fire the changeDate event which I didnt      calendarDatePicker   data  date   new Date         calendarDatePicker   datapicker

User · Answer

This works for me       dpStartDate   data  date   startDate

User · Answer

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

User · Answer

datetimepicker1   data  DateTimePicker   date  01 11 2016 10 23 AM

User · Answer

I had to do  setValue  and  update  in order to get it to work completely      datepicker   datepicker  setValue    2014-01-29   datepicker  update

User · Answer

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 · Answer

This works perfectly for me  Simply put the following one      className   datepicker  setDate    now

User · Answer

DateDepenseInput   val  quot 2020-12-28 quot    the Format should be like Year-Month-Day  It worked well for me

User · Answer

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

User · Answer

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 · Answer

This works for me      datepicker   datepicker  update   new Date

User · Answer

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 · Answer

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

User · Answer

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    lt div class  input-group date  id  my-date-component  gt      lt input type  text    gt       lt div class  input-group-append  gt         lt span class  input-group-text  gt  lt i class  fa fa-calendar  gt  lt  i gt  lt  span gt       lt  div gt   lt  div gt    You need to set date to input-group date       my-date-component   datepicker  update   new Date  01 10 2014       Also check datepicker update method

User · Answer

Simple way like this  one line       startDateText   val startDate  datepicker  update

User · Answer

Better to use          datepicker   datepicker  setDate   new Date      instead of        datepicker   datepicker  update   new Date     If you use update  event changeDate isn t triggered

User · Answer

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

User · Answer

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

User · Answer

This works for me       datepicker   datepicker  setValue    01 10 2014         datepicker   datepicker  setValue   new Date 2008 9 03

User · Answer

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

User · Answer

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

User · Answer

You can use this simple method like    qsFromDate    2017-05-10       dtMinDate   datepicker  setDate   new Date qsFromDate        dtMinDate   datepicker  update

User · Answer

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

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

Examples related to jquery

Examples related to datepicker

Examples related to twitter-bootstrap