CDP Date Range Picker

Overview

Date Range Picker 是第三方套件，更多詳情。可以瀏覽 Date Range Picker 官網。 Date Range Picker 官網
Predefined Date Ranges (Blue)
Data Range Picker
  • 近1週
  • 近2週
  • 近1個月
  • 近1年
  • 近3年
  • 近5年
  • 近20年
  • Custom Range

Source Code 
                          
                        <!-- HTML to write -->
<div class="input-group mt__5" id="predefined-date-ranges-blue-parentEl">
  <input type="text" class="form-control float-right cdp__form__date__input-blue blue__hover cdp-font__16" id="predefined-date-ranges-blue"/>
  <div class="input-group-prepend">
    <span class="input-group-text cdp__input__icon">
      <i class="far fa-clock"></i>
    </span>
  </div>
</div>
                          
                        <!-- Javascript to write -->
<script>
const date_range_picker_config = {
  autoApply: true, 
  startDate: moment().add(1, "day").subtract(7, "day"), 
  endDate: moment().startOf("day").subtract(1, "day"), 
  minDate: moment().add(1, "day").subtract(20, "year"),
  maxDate: moment().startOf("day").subtract(1, "day"),
  ranges: {
    近1週: [moment().subtract(7, "day"), moment()],
      近2週: [moment().subtract(14, "day"), moment()],
      近1個月: [moment().add(1, "day").subtract(1, "month"), moment()],
      近1年: [moment().add(1, "day").subtract(1, "year"), moment()],
      近3年: [moment().add(1, "day").subtract(3, "year"), moment()],
      近5年: [moment().add(1, "day").subtract(5, "year"), moment()],
      近20年: [moment().add(1, "day").subtract(20, "year"), moment()],
  },
  showDropdowns: true,
  linkedCalendars: false,
};
let daterangepicker_config_blue = Object.assign({ parentEl: "#predefined-date-ranges-blue-parentEl" }, date_range_picker_config);
$("#predefined-date-ranges-blue").daterangepicker(daterangepicker_config_blue);
</script>
Predefined Date Ranges (Purple)
Date Range Picker
  • 近1週
  • 近2週
  • 近1個月
  • 近1年
  • 近3年
  • 近5年
  • 近20年
  • Custom Range

Source Code 
                          
                        <!-- HTML to write -->
<div class="input-group mt__5" id="predefined-date-ranges-purple-parentEl">
  <input type="text" class="form-control float-right cdp__form__date__input-purple purple__hover cdp-font__16" id="predefined-date-ranges-purple"/>
  <div class="input-group-prepend">
    <span class="input-group-text cdp__input__icon">
      <i class="far fa-clock"></i>
    </span>
    </div>
</div>
                          
                        <!-- Javascript to write -->
const date_range_picker_config = {
  autoApply: true,
  startDate: moment().add(1, "day").subtract(7, "day"),
  endDate: moment().startOf("day").subtract(1, "day"), 
  minDate: moment().add(1, "day").subtract(20, "year"),
  maxDate: moment().startOf("day").subtract(1, "day"),
  ranges: {
    近1週: [moment().subtract(7, "day"), moment()],
    近2週: [moment().subtract(14, "day"), moment()],
    近1個月: [moment().add(1, "day").subtract(1, "month"), moment()],
    近1年: [moment().add(1, "day").subtract(1, "year"), moment()],
    近3年: [moment().add(1, "day").subtract(3, "year"), moment()],
    近5年: [moment().add(1, "day").subtract(5, "year"), moment()],
    近20年: [moment().add(1, "day").subtract(20, "year"), moment()],
  },
  showDropdowns: true,
  linkedCalendars: false,
};
let daterangepicker_config_purple = Object.assign({ parentEl: "#predefined-date-ranges-purple-parentEl" },date_range_picker_config);
$("#predefined-date-ranges-purple").daterangepicker(daterangepicker_config_purple);
Predefined Date (Blue)
Single Date Picker

Source Code 
                          
                        <!-- HTML to write -->
<div class="input-group mt__5" id="predefined-date-blue-parentEl">
  <input type="text" class="form-control float-right cdp__form__date__input-blue blue__hover cdp-font__16" id="predefined-date-blue"/>
  <div class="input-group-prepend">
    <span class="input-group-text cdp__input__icon">
      <i class="far fa-clock"></i>
    </span>
  </div>
</div>
                          
                        <!-- Javascript to write -->
const data_picker_config = {
  autoApply: true, 
  singleDatePicker: true,
  showDropdowns: true,
  minDate: moment().add(1, "day").subtract(20, "year"), 
  maxDate: moment().startOf("day").add(1, "year"), 
  startDate: moment(),
};
let datepicker_config_blue = Object.assign({ parentEl: "#predefined-date-blue-parentEl" },data_picker_config);
$("#predefined-date-blue").daterangepicker(datepicker_config_blue);
Predefined Date (Purple)
Single Date Picker

Source Code 
                          
                        <!-- HTML to write -->
<div class="input-group mt__5" id="predefined-date-purple-parentEl">
  <input type="text" class="form-control float-right cdp__form__date__input-purple purple__hover cdp-font__16" id="predefined-date-purple"/>
  <div class="input-group-prepend">
    <span class="input-group-text cdp__input__icon">
      <i class="far fa-clock"></i>
    </span>
  </div>
</div>
                          
                        <!-- Javascript to write -->
const data_picker_config = {
  autoApply: true, //點選後是否自動應用日期
  singleDatePicker: true,
  showDropdowns: true,
  minDate: moment().add(1, "day").subtract(20, "year"), //限制最小可選日期
  maxDate: moment().startOf("day").add(1, "year"), //限制最大可選日期
  startDate: moment(), //預設起始時間
};
let datepicker_config_purple = Object.assign({ parentEl: "#predefined-date-purple-parentEl" }, data_picker_config);
$("#predefined-date-purple").daterangepicker(datepicker_config_purple);