Jquery Question posted in
The official Jquery Api Documentation can be found here.

Jquery – Formating the date with bootstrap datepicker

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

Tags:

4

Answers


  1. 0

    You gave to datepicker the fomat: "mm/dd/yyyy".
    If you want (Day – Month #, year), just change it following the documentation.
    https://bootstrap-datepicker.readthedocs.io/en/latest/options.html#format.

    fomat: "DD - MM d, yyyy"

    Login or Signup to reply.
  2. 0

    You can use toDisplay function, to achieve [custom] format what you need.

    $(document).ready(function() {
  $("#date-input").datepicker({
    format: {
      toDisplay: function(date, format, language) {
        const options = {
          weekday: "long",
          month: "long",
          day: "numeric",
          year: "numeric"
        };
        return new Date(date).toLocaleDateString("en-US", options).replace(",", " -");
      },
      toValue: function(date, format, language) {
        return new Date(date);
      },
    },
    autoclose: true,
  });
});
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">

<body>
  <div class="container mt-5">
    <div class="row">
      <div class="col-md-6">
        <div class="form-group">
          <label for="date-input">Date</label>
          <div class="input-group">
            <input type="text" class="form-control datepicker" id="date-input" placeholder="Select a date" />
          </div>
        </div>
      </div>
    </div>
  </div>


  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js" integrity="sha512-v2CJ7UaYy4JwqLDIrZUI/4hqeoQieOmAZNXBeQyjo21dadnwR+8ZaIJVT8EE2iyI61OV8e6M8PP2/4hpQINQ/g==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-0pUGZvbkm6XF6gxjEnlmuGrJXVbNuzT9qBBavbLwCsOGabYfZo0T0to5eqruptLy" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.10.0/js/bootstrap-datepicker.min.js" integrity="sha512-LsnSViqQyaXpD4mBBdRYeP6sRwJiJveh2ZIbW41EBrNmKxgr/LFZIiWT6yr+nycvhvauz8c2nYMhrP80YhG7Cw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    Login or Signup to reply.
  3. 0

    In your changeDate function you need to add the formatted date in the input the update function doesn’t set the input value

    // Set the formatted date to the input field
    $("#date-input").val(formattedDate);

    This will solve your issue

    Login or Signup to reply.
  4. 0

    Replace

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

    The datepicker("update") method expects a date object or formatted date string compatible with the datepicker’s format
    .val() directly sets the input’s value to the formatted date string

    If you want to maintain the underlying date value for form submission while showing the formatted text, you can use a hidden input

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search