在頁面加載時在日期選擇器中設定當前日期

我將使用日期選擇器（日歷引導程式）在表單頁面上有一個日期選擇器

現在，當您單擊單擊按鈕時，它會打開，您可以選擇一個日期。

但是我需要在加載頁面時使用當前日期而不是點擊銘文。我怎樣才能做到這一點？

我需要準確選擇它，就好像我們點擊了今天的日期一樣。因為在日歷內部會有另一個功能在選擇日期時起作用

我今天嘗試"setDate", new Date()從這個執行緒引導 datepicker 安裝和其他答案作為默認值，但對我沒有任何效果..

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>

uj5u.com熱心網友回復：

• 您需要以與日期選擇器相同的格式獲取當前日期。
• 然后，您可以在 datepicker 初始化后將 datepicker 的當前日期設定為今天的日期（從上面）。

注意：in 中的值.datepicker('setValue', value)必須與 datepickerformat選項的格式相同。例如。你的情況是 4 月 26 日

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>

標籤：javascript html jQuery

上一篇：如何優化這段代碼，使其代碼行更少，更簡潔？

下一篇：PNG影像上的懸停效果