RPA Date Range Picker

Overview

Flatpickr 是第三方套件，更多詳情。可以瀏覽 Flatpickr 官網。 Flatpickr 官網
Predefined Date Ranges (Purple)
Date Range Picker
SunMonTueWedThuFriSat
293012345678910111213141516171819202122232425262728293031123456789

Source Code 
                                
                              <!-- HTML to write -->
<div class="input-group datepicker rpa-datepicker mt__4" id="flatpickr-range-input-01-parent">
  <input type="text" class="form-control shadow-none flatpickr-input rpa-date-input-purple rpa-fs-14" id="flatpickr-range-input-01" placeholder="Select date" readonly="readonly" />
  <span class="input-group-text">
    <i class="rpa-date-icon">
      <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-calendar-week" viewBox="0 0 16 16">
        <path d="M11 6.5a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5v-1zm-3 0a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5v-1zm-5 3a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5v-1zm3 0a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5v-1z"></path>
        <path d="M3.5 0a.5.5 0 0 1 .5.5V1h8V.5a.5.5 0 0 1 1 0V1h1a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V3a2 2 0 0 1 2-2h1V.5a.5.5 0 0 1 .5-.5zM1 4v10a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4H1z"></path>
      </svg>
    </i>
  /span>
/div>
                                
                              // Jquery to write
const flatpickr_range_config = {
  enableTime: false, // 開啟時間選項
  dateFormat: "Y-m-d", // 日期時間格式
  mode: "range", // 是否要區間
  locale: {
    rangeSeparator: " ~ ", // 更換日期區間的表達式
  },
  static: true,
};

$("#flatpickr-range-input-01").flatpickr(flatpickr_range_config);
Predefined Date (Purple)
Single Date Picker
SunMonTueWedThuFriSat
293012345678910111213141516171819202122232425262728293031123456789

Source Code 
                                
                              <!-- HTML to write -->
div class="input-group datepicker rpa-datepicker mt__4" id="flatpickr-single-input-01-parent">
  <input type="text" class="form-control shadow-none flatpickr-input rpa-date-input-purple rpa-fs-14" id="flatpickr-single-input-01" placeholder="Select date" readonly="readonly" />
  <span class="input-group-text">
    <i class="rpa-date-icon">
      <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-calendar-week" viewBox="0 0 16 16">
        <path d="M11 6.5a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5v-1zm-3 0a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5v-1zm-5 3a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5v-1zm3 0a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5v-1z"></path>
        <path d="M3.5 0a.5.5 0 0 1 .5.5V1h8V.5a.5.5 0 0 1 1 0V1h1a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V3a2 2 0 0 1 2-2h1V.5a.5.5 0 0 1 .5-.5zM1 4v10a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4H1z"></path>
      </svg>
    </i>
  </span>
</div>
                                
                              // Jquery to write
const flatpickr_date_config = {
    enableTime: false, // 開啟時間選項
    dateFormat: "Y-m-d", // 日期時間格式
    static: true,
};

$("#flatpickr-single-input-01").flatpickr(flatpickr_date_config);