Select current date by default in bootstraps calendar

Question

I will have a small form on the page, there will also be a bootstrap calendar where you can select a date.

Now you need to click on the "click" button and select the date so that it appears and is displayed on the button instead of the inscription.

But I need to have the current date instead of the click inscription by default when loading this form.

How can i do this?

let restaurantReserve = {
  init: function() {
    let _self = this;

    $('#reservation-date').datepicker({
      startDate: '+0d'
    }).on('changeDate', function(e) {
      const arDate = e.date.toString().split(' ');
      let input = $('[name="RestaurantReservationForm[date]"]');
      input.val(arDate[3] + '-' + (e.date.getMonth() + 1) + '-' + arDate[2]);
      _self.unSetError(input);
      $('#reservation-date .js-value').text(arDate[2] + ' ' + arDate[1]);
    });
  },
  setError: function(ob) {
    $('#' + ob.data('btnId')).addClass('btn-error');
  },
  unSetError: function(ob) {
    $('#' + ob.data('btnId')).removeClass('btn-error');
  }
}
restaurantReserve.init();

.btn {
  border: none;
  border-radius: 8px;
  height: 40px;
  padding: 10px 15px;
  font-weight: 800;
  font-size: 14px;
  margin-right: 10px;
  cursor: pointer;
}

.btn-fourth {
  text-decoration: none;
  background: #e3e5e8;
  color: #747b8b;
}

.invisible {
  display: none;
}

ul.with-out>li:before,
.dropdown-menu li:before,
ul.whithout>li:before {
  display: none;
}

.dropdown-menu li {
  padding: 0;
}

.dropdown-menu-height-fixed {
  max-height: 200px;
  overflow-y: auto;
}

.dropdown-item.active,
.dropdown-item:active {
  background: red;
}

.block-shadow {
  box-shadow: 0 2px 8px 0 rgba(32, 35, 44, 0.05);
}

.block-white {
  background: #fff;
  border-radius: 8px;
  padding: 20px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/css/bootstrap-datepicker.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/js/bootstrap-datepicker.min.js"></script>
<form id="reservation" action="/restaurants/123/" method="post">
  <div class="block-shadow block-white mb-4">
    <div class="btn-s">
      <a class="btn btn-fourth " id="reservation-date" data-date=">">
        <span class="icon br-calender"></span> <span class="js-value">click</span>
      </a>
    </div>
    
    <div class="form-group field-restaurantreservationform-date required">
      <input type="hidden" id="restaurantreservationform-date" class="form-control" name="RestaurantReservationForm[date]" data-btn-id="reservation-date">
    </div>

Answer 1

If I get you right, you could use this code snippet in your init function:

  ...    
  init: function() {
  let _self = this;

  let now = new Date();
  $('#reservation-date .js-value').text(now.toDateString());

  $('#reservation-date').datepicker({
  ...