Formating the date with bootstrap datepicker

Question

I have an input where using bootstrap datepicker, but i want the output format to be like (Day - Month #, year) ex: Wednesday - January 1, 2025.

<div class="col-md-6">
 <div class="form-group">
  <label>Date</label>
  <div class="date input-group">
   <input
    type="text"
    class="datepicker form-control"
    id="date-input"
   />
  </div>
 </div>
</div>

here is my script for updating the input value

$(document).ready(function () {
                $("#date-input").datepicker({
                    format: "mm/dd/yyyy", 
                    autoclose: true,
                });

                $(".datepicker").on("changeDate", function (e) {
                    const selectedDate = e.date; // Get selected date as JavaScript Date object
                    const options = { weekday: "long", year: "numeric", month: "long", day: "numeric" };
                    const formattedDate = selectedDate.toLocaleDateString("en-US", options);

$("#date-input").datepicker("update", formattedDate); 
                });
            });

but it does not update the input value. but it shows a correct output on my console.log

Answer 1

You gave the format: "mm/dd/yyyy" in datepicker. If you want (Day - Month #, year), just change it to the following the documentation.

https://bootstrap-datepicker.readthedocs.io/en/latest/options.html#format.

format: "DD - MM d, yyyy"