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

External CSS

  1. https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.2/css/bootstrap.min.css
  2. https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/css/bootstrap-datepicker.min.css
  3. https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css
  4. https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js
  2. https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/js/bootstrap-datepicker.min.js
  3. https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js