64 lines
2.3 KiB
HTML
64 lines
2.3 KiB
HTML
{% extends "base.html" %}
|
||
|
||
{% block content %}
|
||
<h2>交易報表</h2>
|
||
<div class="card mt-4">
|
||
<div class="card-body">
|
||
<form method="POST">
|
||
<div class="row">
|
||
<div class="col-md-5">
|
||
<div class="mb-3">
|
||
<label for="start_date" class="form-label">開始日期</label>
|
||
<input type="date" class="form-control" id="start_date" name="start_date"
|
||
required value="{{ (today - timedelta(days=30)).strftime('%Y-%m-%d') }}">
|
||
</div>
|
||
</div>
|
||
<div class="col-md-5">
|
||
<div class="mb-3">
|
||
<label for="end_date" class="form-label">結束日期</label>
|
||
<input type="date" class="form-control" id="end_date" name="end_date"
|
||
required value="{{ today.strftime('%Y-%m-%d') }}">
|
||
</div>
|
||
</div>
|
||
<div class="col-md-2">
|
||
<div class="mb-3">
|
||
<label class="form-label"> </label>
|
||
<button type="submit" class="btn btn-primary w-100">生成報表</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="card mt-4">
|
||
<div class="card-body">
|
||
<h5 class="card-title">說明</h5>
|
||
<ul>
|
||
<li>選擇要查詢的日期範圍</li>
|
||
<li>報表將包含該時間範圍內的所有交易記錄</li>
|
||
<li>報表格式為 Excel，可直接下載</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
{% endblock %}
|
||
|
||
{% block scripts %}
|
||
<script>
|
||
document.addEventListener('DOMContentLoaded', function() {
|
||
// 設定日期選擇器的最大值為今天
|
||
const today = new Date().toISOString().split('T')[0];
|
||
document.getElementById('start_date').max = today;
|
||
document.getElementById('end_date').max = today;
|
||
|
||
// 確保結束日期不會早於開始日期
|
||
document.getElementById('start_date').addEventListener('change', function() {
|
||
document.getElementById('end_date').min = this.value;
|
||
});
|
||
document.getElementById('end_date').addEventListener('change', function() {
|
||
document.getElementById('start_date').max = this.value;
|
||
});
|
||
});
|
||
</script>
|
||
{% endblock %}
|