Date Filter

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
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152

<!-- Date Filter -->
<div class="relative inline-block">
  <button
    id="date-button"
    class="inline-flex items-center gap-2 px-4 py-2.5 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-lg hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-blue-500 transition-colors"
    onclick="toggleDropdown('date-menu')"
  >
    <svg class="w-5 h-5 text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"></path>
    </svg>
    <span id="date-range-label">Select dates</span>
    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
    </svg>
  </button>

  <div
    id="date-menu"
    class="hidden absolute left-0 z-20 mt-2 w-80 bg-white rounded-xl shadow-xl border border-gray-200 overflow-hidden"
  >
    <!-- Preset Ranges -->
    <div class="p-4 border-b border-gray-100">
      <p class="text-xs font-semibold text-gray-400 uppercase tracking-wider mb-3">Quick Select</p>
      <div class="grid grid-cols-2 gap-2">
        <button class="date-preset px-3 py-2 text-xs font-medium text-gray-700 bg-gray-100 rounded-lg hover:bg-gray-200 transition-colors" onclick="setDateRange('today')">Today</button>
        <button class="date-preset px-3 py-2 text-xs font-medium text-gray-700 bg-gray-100 rounded-lg hover:bg-gray-200 transition-colors" onclick="setDateRange('yesterday')">Yesterday</button>
        <button class="date-preset px-3 py-2 text-xs font-medium text-gray-700 bg-gray-100 rounded-lg hover:bg-gray-200 transition-colors" onclick="setDateRange('last7')">Last 7 days</button>
        <button class="date-preset px-3 py-2 text-xs font-medium text-gray-700 bg-gray-100 rounded-lg hover:bg-gray-200 transition-colors" onclick="setDateRange('last30')">Last 30 days</button>
        <button class="date-preset px-3 py-2 text-xs font-medium text-gray-700 bg-gray-100 rounded-lg hover:bg-gray-200 transition-colors" onclick="setDateRange('thisWeek')">This week</button>
        <button class="date-preset px-3 py-2 text-xs font-medium text-gray-700 bg-gray-100 rounded-lg hover:bg-gray-200 transition-colors" onclick="setDateRange('lastWeek')">Last week</button>
        <button class="date-preset px-3 py-2 text-xs font-medium text-gray-700 bg-gray-100 rounded-lg hover:bg-gray-200 transition-colors" onclick="setDateRange('thisMonth')">This month</button>
        <button class="date-preset px-3 py-2 text-xs font-medium text-gray-700 bg-gray-100 rounded-lg hover:bg-gray-200 transition-colors" onclick="setDateRange('lastMonth')">Last month</button>
      </div>
    </div>

    <!-- Custom Range -->
    <div class="p-4">
      <p class="text-xs font-semibold text-gray-400 uppercase tracking-wider mb-3">Custom Range</p>
      <div class="space-y-3">
        <div>
          <label class="block text-xs text-gray-500 mb-1">Start Date</label>
          <input
            type="date"
            id="start-date"
            class="w-full px-3 py-2 text-sm border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
          />
        </div>
        <div>
          <label class="block text-xs text-gray-500 mb-1">End Date</label>
          <input
            type="date"
            id="end-date"
            class="w-full px-3 py-2 text-sm border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
          />
        </div>
      </div>
    </div>

    <!-- Footer -->
    <div class="px-4 py-3 bg-gray-50 border-t border-gray-100 flex items-center justify-between">
      <span id="date-summary" class="text-xs text-gray-500">No date range selected</span>
      <button class="px-4 py-2 text-sm font-medium text-white bg-blue-600 rounded-lg hover:bg-blue-700 transition-colors" onclick="applyDateRange()">
        Apply
      </button>
    </div>
  </div>
</div>

<script>
  function toggleDropdown(id) {
    document.getElementById(id).classList.toggle('hidden');
  }

  function setDateRange(preset) {
    const today = new Date();
    const formatDate = (date) => date.toISOString().split('T')[0];
    const labelMap = {
      'today': 'Today',
      'yesterday': 'Yesterday',
      'last7': 'Last 7 days',
      'last30': 'Last 30 days',
      'thisWeek': 'This week',
      'lastWeek': 'Last week',
      'thisMonth': 'This month',
      'lastMonth': 'Last month'
    };

    document.getElementById('date-range-label').textContent = labelMap[preset] || 'Custom';
    document.getElementById('date-summary').textContent = labelMap[preset] || 'Custom range';

    let startDate, endDate = formatDate(today);
    
    switch(preset) {
      case 'today':
        startDate = formatDate(today);
        break;
      case 'yesterday':
        const yesterday = new Date(today);
        yesterday.setDate(yesterday.getDate() - 1);
        startDate = endDate = formatDate(yesterday);
        break;
      case 'last7':
        const weekAgo = new Date(today);
        weekAgo.setDate(weekAgo.getDate() - 7);
        startDate = formatDate(weekAgo);
        break;
      case 'last30':
        const monthAgo = new Date(today);
        monthAgo.setDate(monthAgo.getDate() - 30);
        startDate = formatDate(monthAgo);
        break;
      case 'thisWeek':
        const dayOfWeek = today.getDay();
        const weekStart = new Date(today);
        weekStart.setDate(today.getDate() - dayOfWeek);
        startDate = formatDate(weekStart);
        break;
      case 'lastWeek':
        const lastWeekEnd = new Date(today);
        lastWeekEnd.setDate(today.getDate() - today.getDay() - 1);
        const lastWeekStart = new Date(lastWeekEnd);
        lastWeekStart.setDate(lastWeekEnd.getDate() - 6);
        startDate = formatDate(lastWeekStart);
        endDate = formatDate(lastWeekEnd);
        break;
      case 'thisMonth':
        const monthStart = new Date(today.getFullYear(), today.getMonth(), 1);
        startDate = formatDate(monthStart);
        break;
      case 'lastMonth':
        const lastMonthEnd = new Date(today.getFullYear(), today.getMonth(), 0);
        const lastMonthStart = new Date(today.getFullYear(), today.getMonth() - 1, 1);
        startDate = formatDate(lastMonthStart);
        endDate = formatDate(lastMonthEnd);
        break;
    }

    document.getElementById('start-date').value = startDate;
    document.getElementById('end-date').value = endDate;
  }

  function applyDateRange() {
    toggleDropdown('date-menu');
  }

  document.addEventListener('click', function(event) {
    const container = document.querySelector('.relative.inline-block');
    if (!container.contains(event.target)) {
      document.getElementById('date-menu').classList.add('hidden');
    }
  });
</script>

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

# Date Filter

Date filter dropdown.

## Preview

Open `preview.html` for a standalone demonstration.

## Features

- Date selection UI inside a dropdown

## Usage

```bash
npx devsnips add Tailwind/Components/Dropdowns/date-filter
```

Copy from `code.html`.

## Customization

- Calendar / option styles, trigger styles

## Accessibility

- Label the trigger; ensure calendar controls are keyboard reachable if interactive

## Dependencies

- Tailwind CSS; JS as present in markup

## File Structure

- `code.html` · `preview.html` · `metadata.json` · `README.md`