74 lines
2.8 KiB
HTML
74 lines
2.8 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="de">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<title>Input Date</title>
|
||
<style>
|
||
body { font-family: system-ui, -apple-system, sans-serif; padding: 1.4rem; margin: 0; background: #fff; }
|
||
label { display: block; font-size: 0.95rem; color: #374151; margin-bottom: 8px; font-weight: 600; }
|
||
input[type=date] {
|
||
font: 1.15rem system-ui, sans-serif;
|
||
padding: 10px 12px;
|
||
border: 1.5px solid #d1d5db;
|
||
border-radius: 6px;
|
||
background: #fff;
|
||
box-shadow: 0 0 0 3px rgba(214, 51, 132, 0.15);
|
||
border-color: #d63384;
|
||
margin-bottom: 16px;
|
||
}
|
||
.picker {
|
||
width: 320px;
|
||
background: #fff;
|
||
border: 1px solid #d1d5db;
|
||
border-radius: 8px;
|
||
box-shadow: 0 8px 24px rgba(0,0,0,0.18);
|
||
overflow: hidden;
|
||
font-size: 0.9rem;
|
||
}
|
||
.picker-head {
|
||
display: flex; justify-content: space-between; align-items: center;
|
||
padding: 10px 14px;
|
||
border-bottom: 1px solid #e5e7eb;
|
||
font-weight: 600;
|
||
}
|
||
.picker-head button {
|
||
border: 0; background: transparent; font-size: 1rem; padding: 4px 8px; cursor: pointer; color: #6b7280;
|
||
}
|
||
.dow, .grid {
|
||
display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px;
|
||
padding: 6px 10px;
|
||
}
|
||
.dow { font-size: 0.75rem; color: #6b7280; font-weight: 600; text-align: center; padding-bottom: 2px; }
|
||
.grid { padding-top: 0; padding-bottom: 14px; }
|
||
.grid div {
|
||
aspect-ratio: 1; display: flex; align-items: center; justify-content: center;
|
||
border-radius: 50%; font-variant-numeric: tabular-nums;
|
||
}
|
||
.grid .muted { color: #d1d5db; }
|
||
.grid .today { background: #fce7f3; color: #d63384; font-weight: 700; }
|
||
.grid .sel { background: #d63384; color: #fff; font-weight: 700; }
|
||
.grid div:hover:not(.muted):not(.sel) { background: #f3f4f6; }
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<label for="d">Geburtsdatum</label>
|
||
<input type="date" id="d" value="2026-04-21" />
|
||
|
||
<div class="picker" aria-hidden="true">
|
||
<div class="picker-head">
|
||
<button>‹</button>
|
||
<span>April 2026</span>
|
||
<button>›</button>
|
||
</div>
|
||
<div class="dow"><div>Mo</div><div>Di</div><div>Mi</div><div>Do</div><div>Fr</div><div>Sa</div><div>So</div></div>
|
||
<div class="grid">
|
||
<div class="muted">30</div><div class="muted">31</div><div>1</div><div>2</div><div>3</div><div>4</div><div>5</div>
|
||
<div>6</div><div>7</div><div>8</div><div>9</div><div>10</div><div>11</div><div>12</div>
|
||
<div>13</div><div>14</div><div>15</div><div>16</div><div>17</div><div>18</div><div>19</div>
|
||
<div>20</div><div class="sel">21</div><div>22</div><div>23</div><div>24</div><div>25</div><div>26</div>
|
||
<div>27</div><div>28</div><div>29</div><div>30</div><div class="muted">1</div><div class="muted">2</div><div class="muted">3</div>
|
||
</div>
|
||
</div>
|
||
</body>
|
||
</html>
|