Set current date in datepicker on page load

Question

I will have a date picker on a form page using a datepicker (calendar bootstrap)

Now when you click on the click button, it opens and you can select a date.

But I need to have the current date instead of the click inscription when loading the page. How can I do that?

I need it to be exactly selected, as if we clicked on today's date. Because inside the calendar there will be another function that works when a date is selected

I tried installing "setDate", new Date() and other answers from this thread bootstrap datepicker today as default, but nothing worked for me..

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;
    padding: 10px 15px;
    font-weight: 800;
    font-size: 14px;
    cursor: pointer;
}

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

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

<a class="btn btn-fourth " id="reservation-date" data-date=">">
  <span class="icon br-calender"></span> <span class="js-value">click</span>
</a>

ruleboy21 · Accepted Answer · 2022-04-26T23:13:51.993

You need to get the current date in the same format as that of the datepicker.
You can then set the current date of the datepicker to today's date (from above) once the datepicker has been initialized.

Note: the value in .datepicker('setValue', value) must be of the same format as that of the datepicker format option. Eg. 26 Apr in your case

let restaurantReserve = {
    init: function() {
        let _self = this;
        let today = new Date().toLocaleString('en-us',{day:'numeric', month:'short'}).split(' ').reverse().join(' '); // eg. Apr 26

        $('#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]);
        });

        $("#reservation-date").datepicker("setDate", today);
    },
    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;
    padding: 10px 15px;
    font-weight: 800;
    font-size: 14px;
    cursor: pointer;
}

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

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

<a class="btn btn-fourth " id="reservation-date" data-date=">">
  <span class="icon br-calender"></span> <span class="js-value">click</span>
</a>

Set current date in datepicker on page load

1 Answers1