<div class="container pt-4">
<div class="card border text-center">
<div class="row">
<div class="col-12 px-4">
<p class="h2">bootstrap 5 datepicker</p>
</div>
</div>
<div class="row">
<div class="col-12 px-2">
<!-- element start -->
<div class="container">
<div class="col-sm-6" style="height:75px;">
<div class='col-md-6'>
<div class="form-group">
<div>Select</div>
<div class='input-group date' id='startDate'>
<span class="input-group-addon input-group-text"><span class="fa fa-calendar"></span>
</span>
<input type='text' class="form-control" name="startDate" />
</div>
<div class='input-group date' id='endDate'>
<span class="input-group-addon input-group-text"><span class="fa fa-calendar"></span>
</span>
<input type='text' class="form-control" name="endDate" />
</div>
</div>
</div>
</div>
<!-- element end -->
</div>
</div>
</div>
</div>
$(function () {
$('#startDate').datepicker({
format: 'yyyy/mm/dd',
autoclose: 1,//選擇後自動關閉
// startView:1,
language: 'zh-CN',
startDate:"Beginning of time",
showOnFocus:true,
initialDate : initDate(), //初始時間
});
$("#endDate").datepicker({
format: 'yyyy/mm/dd',//顯示格式
startView:2,
minView:2,
maxView :2,
language: 'zh-CN',
autoclose: 1,//選擇後自動關閉
clearBtn:true,//清除按鈕
initialDate : initDate(), //初始時間
});
});
function initDate(){
var myDate = new Date();
var tYear = myDate.getFullYear()
var tMonth = myDate.getMonth()+1
if(tMonth < 10){
tMonth = "0" + tMonth
}
var currentDate = tYear + "/" + tMonth + "/01"
return currentDate
}
