Date formatting in toLocaleDateString-CodePudding

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.

For this I used toLocaleDateString('en-us', { day: "numeric", month: "short"})

But I have a formatting problem, now I get the date in the format Apr 20.

Is it possible to make it the other way around, first the number, then the month in the format 20 Apr?

let restaurantReserve = {
  init: function() {
    let _self = this;
    
     let now = new Date();
     $('#reservation-date .js-value').text(now.toLocaleDateString('en-us', { day: "numeric", month: "short"}));

    $('#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 >
    <div >
      <a  id="reservation-date" data-date=">">
        <span ></span> <span >click</span>
      </a>
    </div>
    
    <div >
      <input type="hidden" id="restaurantreservationform-date"  name="RestaurantReservationForm[date]" data-btn-id="reservation-date">
    </div>

CodePudding user response：

Duplicate of toLocaleDateString() short format

Try the following:

 $('#reservation-date .js-value').text(now.toLocaleDateString('en-GB', { day: "numeric", month: "short"}));

CodePudding user response：

try it this way

const date = new Date();
const curDate = date.getDate()   ' '  date.toLocaleString('default', { month: 'short'});