File size: 1,177 Bytes
8f096b5 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 |
svelte
<script>
export let dateRange = 'this-month';
const ranges = [
{ value: 'today', label: 'Today' },
{ value: 'this-week', label: 'This Week' },
{ value: 'this-month', label: 'This Month' },
{ value: 'this-year', label: 'This Year' },
{ value: 'custom', label: 'Custom Range' }
];
</script>
<div class="card flex items-center space-x-4">
<div>
<label for="dateRange" class="block text-sm font-medium text-slate-700 mb-1">Date Range</label>
<select
id="dateRange"
bind:value={dateRange}
class="input-field"
>
{#each ranges as range}
<option value={range.value}>{range.label}</option>
{/each}
</select>
</div>
{#if dateRange === 'custom'}
<div>
<label for="startDate" class="block text-sm font-medium text-slate-700 mb-1">From</label>
<input
id="startDate"
type="date"
class="input-field"
/>
</div>
<div>
<label for="endDate" class="block text-sm font-medium text-slate-700 mb-1">To</label>
<input
id="endDate"
type="date"
class="input-field"
/>
</div>
{/if}
</div>
</html> |