实时体育数据 数据来源：西瓜体育

⚽ 足球实时 (0)

主队	比分	客队	联赛	时间(北京)
近期暂无比赛，请稍后再来查看。

更新于 2026-06-21 20:34（北京时间）

实时体育数据 数据来源：西瓜体育

⚽ 足球实时 (0)

主队	比分	客队	联赛	时间(北京)
近期暂无比赛，请稍后再来查看。

更新于 2026-06-21 20:34（北京时间）

日期/时间选择器

精準計時器，倒數至指定賽事開打的秒、分、時、日。

西瓜体育组件

請確保在您的文件中引入 Flatpickr 的 CSS 與 JS 檔案：vendor/flatpickr/dist/flatpickr.min.css 及 vendor/flatpickr/dist/flatpickr.min.js。可參考本頁面。

啟用日期範圍功能，請確保同時引入 vendor/flatpickr/dist/plugins/rangePlugin.js。

透過靈活的數據 API，可調整日期/時間選擇器的行為。

data-datepicker-options = '{}':

查閱所有可用選項，請瀏覽：https://flatpickr.js.org/options/

使用範例：https://flatpickr.js.org/examples/

日期選擇器

選擇日期

<!-- Date picker -->
<label class="form-label">Choose date</label>
<div class="input-group">
  <input class="form-control date-picker rounded pe-5" type="text" placeholder="Choose date" data-datepicker-options='{"altInput": true, "altFormat": "F j, Y", "dateFormat": "Y-m-d"}'>
  <i class="fi-calendar position-absolute top-50 end-0 translate-middle-y me-3"></i>
</div>

// Date picker
label.form-label
  | Choose date
.input-group
  input(type="text", placeholder="Choose date", data-datepicker-options='{"altInput": true, "altFormat": "F j, Y", "dateFormat": "Y-m-d"}').form-control.date-picker.rounded.pe-5
  i.ci-calendar.position-absolute.top-50.end-0.translate-middle-y.me-3

日期和時間選擇器

選擇日期和時間

<!-- Date and time picker -->
<label class="form-label">Choose date and time</label>
<div class="input-group">
  <input class="form-control date-picker rounded pe-5" type="text" placeholder="Choose date and time" data-datepicker-options='{"enableTime": true, "altInput": true, "altFormat": "F j, Y H:i", "dateFormat": "Y-m-d H:i"}'>
  <i class="fi-calendar position-absolute top-50 end-0 translate-middle-y me-3"></i>
</div>

// Date and time picker
label.form-label
  | Choose date and time
.input-group
  input(type="text", placeholder="Choose date and time", data-datepicker-options='{"enableTime": true, "altInput": true, "altFormat": "F j, Y H:i", "dateFormat": "Y-m-d H:i"}').form-control.date-picker.rounded.pe-5
  i.ci-calendar.position-absolute.top-50.end-0.translate-middle-y.me-3

最小日期+預設日期

最小日期-今天

<!-- Min date + default date - Today -->
<label class="form-label">Min date - Today</label>
<div class="input-group">
  <input class="form-control date-picker rounded pe-5" type="text" placeholder="Choose date and time" data-datepicker-options='{"altInput": true, "altFormat": "F j, Y", "dateFormat": "Y-m-d", "defaultDate": "today", "minDate": "today"}'>
  <i class="fi-calendar position-absolute top-50 end-0 translate-middle-y me-3"></i>
</div>

// Min date + default date - Today
label.form-label Min date - Today
.input-group
  input(type="text", placeholder="Choose date and time", data-datepicker-options='{"altInput": true, "altFormat": "F j, Y", "dateFormat": "Y-m-d", "defaultDate": "today", "minDate": "today"}').form-control.date-picker.rounded.pe-5
  i.ci-calendar.position-absolute.top-50.end-0.translate-middle-y.me-3

日期範圍

<!-- Date range -->
<label>Date range</label>
<div class="input-group">
  <span class="input-group-text">
    <i class="fi-calendar"></i>
  </span>
  <input class="form-control date-picker date-range" type="text" placeholder="From date" data-datepicker-options='{"altInput": true, "altFormat": "F j, Y", "dateFormat": "Y-m-d"}' data-linked-input="#end-date">
  <input class="form-control date-picker" type="text" placeholder="To date" data-datepicker-options='{"altInput": true, "altFormat": "F j, Y", "dateFormat": "Y-m-d"}' id="end-date">
</div>

// Date range
label Date range
.input-group
  span.input-group-text
    i.ci-calendar
  input(type="text", placeholder="From date", data-datepicker-options='{"altInput": true, "altFormat": "F j, Y", "dateFormat": "Y-m-d"}', data-linked-input="#end-date").form-control.date-picker.date-range
  input(type="text", placeholder="To date", data-datepicker-options='{"altInput": true, "altFormat": "F j, Y", "dateFormat": "Y-m-d"}')#end-date.form-control.date-picker