Date Picker Input

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

<!-- Date Picker - Standard -->
<div>
  <label class="block text-sm font-medium text-gray-700 mb-1">Start Date</label>
  <input type="date" class="w-full px-4 py-3 bg-white border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-colors" />
</div>

<!-- Date Picker - With Icon -->
<div class="mt-4">
  <label class="block text-sm font-medium text-gray-700 mb-1">Select Date</label>
  <div class="relative">
    <input type="date" class="w-full pl-10 pr-4 py-3 bg-white border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-purple-500 transition-colors" />
    <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
      <svg class="w-5 h-5 text-gray-400" 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" />
      </svg>
    </div>
  </div>
</div>

<!-- Date Picker - Range -->
<div class="mt-4">
  <label class="block text-sm font-medium text-gray-700 mb-1">Date Range</label>
  <div class="flex items-center flex-wrap gap-3">
    <input type="date" class="flex-1 min-w-0 px-4 py-3 bg-white border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-colors" />
    <span class="text-gray-400">to</span>
    <input type="date" class="flex-1 min-w-0 px-4 py-3 bg-white border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-colors" />
  </div>
</div>

<!-- Date Picker - Styled Card -->
<div class="mt-4">
  <label class="block text-sm font-medium text-gray-700 mb-1">Booking Date</label>
  <div class="p-4 bg-white border border-gray-200 rounded-xl shadow-sm">
    <div class="flex items-center justify-between">
      <button class="p-2 hover:bg-gray-100 rounded-lg transition-colors shrink-0 whitespace-nowrap">
        <svg class="w-5 h-5 text-gray-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" />
        </svg>
      </button>
      <div class="text-center">
        <p class="text-lg font-semibold text-gray-900">August 15, 2024</p>
        <p class="text-sm text-gray-500">Thursday</p>
      </div>
      <button class="p-2 hover:bg-gray-100 rounded-lg transition-colors shrink-0 whitespace-nowrap">
        <svg class="w-5 h-5 text-gray-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
        </svg>
      </button>
    </div>
    <div class="mt-4 grid grid-cols-7 gap-1 text-center text-xs">
      <div class="text-gray-400 py-1">Su</div>
      <div class="text-gray-400 py-1">Mo</div>
      <div class="text-gray-400 py-1">Tu</div>
      <div class="text-gray-400 py-1">We</div>
      <div class="text-gray-400 py-1">Th</div>
      <div class="text-gray-400 py-1">Fr</div>
      <div class="text-gray-400 py-1">Sa</div>
    </div>
    <div class="mt-1 grid grid-cols-7 gap-1 text-center">
      <div class="py-2 text-gray-400">28</div>
      <div class="py-2 text-gray-400">29</div>
      <div class="py-2 text-gray-400">30</div>
      <div class="py-2 text-gray-400">31</div>
      <div class="py-2 hover:bg-blue-100 rounded-lg cursor-pointer">1</div>
      <div class="py-2 hover:bg-blue-100 rounded-lg cursor-pointer">2</div>
      <div class="py-2 hover:bg-blue-100 rounded-lg cursor-pointer">3</div>
    </div>
  </div>
</div>

1
2
3
4
5
6
7
8
9
10
11
12

# Date Picker

Date picker input.

## Usage
```bash
npx devsnips add Tailwind/Components/Input/date-picker
```
Copy from `code.html`.

## File Structure
`code.html` · `preview.html` · `metadata.json` · `README.md`