我將在頁面上有一個小表格,還會有一個引導日歷,您可以在其中選擇一個日期。
現在您需要單擊“單擊”按鈕并選擇日期,以便它出現并顯示在按鈕上而不是銘文上。
但是我需要在加載此表單時默認使用當前日期而不是點擊題字。
我怎樣才能做到這一點?
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>
uj5u.com熱心網友回復:
如果我猜對了,你可以在你的 init 函式中使用這個代碼片段:
...
init: function() {
let _self = this;
let now = new Date();
$('#reservation-date .js-value').text(now.toDateString());
$('#reservation-date').datepicker({
...
轉載請註明出處,本文鏈接:https://www.uj5u.com/gongcheng/458891.html
標籤:javascript html jQuery
