aj/MoneyMap
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add quick date range selectors to transactions page

Browse Source 
Added convenient buttons for common date ranges:
- Last 30 Days
- Last 60 Days
- Last 90 Days
- Last Year
- This Month
- Last Month

Clicking these buttons automatically populates the Start Date and End
Date filter fields. Users can still manually adjust the dates or use
the Filter button to apply the selected range.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
AJ
2025-10-12 11:10:43 -04:00
parent 61c9490eeb
commit eb6d83f589
1 changed files with 47 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

49
MoneyMap/Pages/Transactions.cshtml
View File

@@ -49,11 +49,21 @@
</div>
<div class="col-md-2">
<label for="StartDate" class="form-label">Start Date</label>
<input asp-for="StartDate" type="date" class="form-control" />
<input asp-for="StartDate" type="date" class="form-control" id="startDateInput" />
</div>
<div class="col-md-2">
<label for="EndDate" class="form-label">End Date</label>
<input asp-for="EndDate" type="date" class="form-control" />
<input asp-for="EndDate" type="date" class="form-control" id="endDateInput" />
</div>
<div class="col-md-12 mb-2">
<div class="btn-group btn-group-sm" role="group" aria-label="Quick date ranges">
<button type="button" class="btn btn-outline-secondary" onclick="setDateRange(30)">Last 30 Days</button>
<button type="button" class="btn btn-outline-secondary" onclick="setDateRange(60)">Last 60 Days</button>
<button type="button" class="btn btn-outline-secondary" onclick="setDateRange(90)">Last 90 Days</button>
<button type="button" class="btn btn-outline-secondary" onclick="setDateRange(365)">Last Year</button>
<button type="button" class="btn btn-outline-secondary" onclick="setDateRangeThisMonth()">This Month</button>
<button type="button" class="btn btn-outline-secondary" onclick="setDateRangeLastMonth()">Last Month</button>
</div>
</div>
<div class="col-md-2 d-flex align-items-end">
<button type="submit" class="btn btn-primary w-100">Filter</button>
@@ -302,5 +312,40 @@ else
var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
return new bootstrap.Tooltip(tooltipTriggerEl)
})
// Quick date range functions
function formatDate(date) {
const year = date.getFullYear();
const month = String(date.getMonth() + 1).padStart(2, '0');
const day = String(date.getDate()).padStart(2, '0');
return `${year}-${month}-${day}`;
}
function setDateRange(days) {
const endDate = new Date();
const startDate = new Date();
startDate.setDate(startDate.getDate() - days);
document.getElementById('startDateInput').value = formatDate(startDate);
document.getElementById('endDateInput').value = formatDate(endDate);
}
function setDateRangeThisMonth() {
const now = new Date();
const startDate = new Date(now.getFullYear(), now.getMonth(), 1);
const endDate = new Date(now.getFullYear(), now.getMonth() + 1, 0);
document.getElementById('startDateInput').value = formatDate(startDate);
document.getElementById('endDateInput').value = formatDate(endDate);
}
function setDateRangeLastMonth() {
const now = new Date();
const startDate = new Date(now.getFullYear(), now.getMonth() - 1, 1);
const endDate = new Date(now.getFullYear(), now.getMonth(), 0);
document.getElementById('startDateInput').value = formatDate(startDate);
document.getElementById('endDateInput').value = formatDate(endDate);
}
</script>
}