64403d6fd6
- Реструктуризация: src/ разбит на middleware/, utils/, repositories/ (удалены), routes/ (удалены) - Добавлен src/original-html.ts — полный HTML с reportModal - Добавлен src/index.tsx.backup — React-компонент с reportModal - Миграции переименованы (0001_initial_schema.sql) - Добавлена миграция 0018 (удалена позже) - Docker: multi-stage build, wrangler.toml - Frontend: public/static/app.js + style.css - seed.sql добавлен - Документация: CHANGELOG, CHANGES_v4.1.0-4.1.9, PROJECT_STRUCTURE
113 lines
3.9 KiB
HTML
113 lines
3.9 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Date Picker Test</title>
|
|
<style>
|
|
body {
|
|
font-family: Arial, sans-serif;
|
|
padding: 50px;
|
|
max-width: 800px;
|
|
margin: 0 auto;
|
|
}
|
|
.test-section {
|
|
margin: 30px 0;
|
|
padding: 20px;
|
|
border: 2px solid #ccc;
|
|
border-radius: 8px;
|
|
}
|
|
.test-section h2 {
|
|
margin-top: 0;
|
|
color: #333;
|
|
}
|
|
.date-cell {
|
|
display: inline-block;
|
|
padding: 8px 12px;
|
|
margin: 10px;
|
|
border: 2px solid #4F46E5;
|
|
border-radius: 4px;
|
|
background: white;
|
|
cursor: pointer;
|
|
}
|
|
.date-cell:hover {
|
|
background: #f0f0f0;
|
|
}
|
|
.hidden-input {
|
|
position: absolute;
|
|
opacity: 0;
|
|
width: 0;
|
|
height: 0;
|
|
pointer-events: none;
|
|
}
|
|
.result {
|
|
margin-top: 20px;
|
|
padding: 15px;
|
|
background: #f0f0f0;
|
|
border-radius: 4px;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<h1>📅 Date Picker Test Page</h1>
|
|
|
|
<!-- Test 1: Label approach (current v4.0.11) -->
|
|
<div class="test-section">
|
|
<h2>✅ Test 1: <label for> approach (v4.0.11)</h2>
|
|
<input type="date" id="date1" class="hidden-input" value="2025-01-15" onchange="updateResult(1, this.value)">
|
|
<label for="date1" class="date-cell">
|
|
Click me: 15.01.2025
|
|
</label>
|
|
<div class="result" id="result1">Selected: 2025-01-15</div>
|
|
</div>
|
|
|
|
<!-- Test 2: Direct visible input -->
|
|
<div class="test-section">
|
|
<h2>✅ Test 2: Direct visible input (baseline)</h2>
|
|
<input type="date" id="date2" value="2025-01-15" onchange="updateResult(2, this.value)" style="padding: 8px;">
|
|
<div class="result" id="result2">Selected: 2025-01-15</div>
|
|
</div>
|
|
|
|
<!-- Test 3: Label with onclick fallback -->
|
|
<div class="test-section">
|
|
<h2>✅ Test 3: <label> with onclick fallback</h2>
|
|
<input type="date" id="date3" class="hidden-input" value="2025-01-15" onchange="updateResult(3, this.value)">
|
|
<label for="date3" class="date-cell" onclick="document.getElementById('date3').showPicker()">
|
|
Click me: 15.01.2025
|
|
</label>
|
|
<div class="result" id="result3">Selected: 2025-01-15</div>
|
|
</div>
|
|
|
|
<!-- Test 4: Button triggers input.click() -->
|
|
<div class="test-section">
|
|
<h2>✅ Test 4: Button with .click()</h2>
|
|
<input type="date" id="date4" class="hidden-input" value="2025-01-15" onchange="updateResult(4, this.value)">
|
|
<button class="date-cell" onclick="document.getElementById('date4').click()">
|
|
Click me: 15.01.2025
|
|
</button>
|
|
<div class="result" id="result4">Selected: 2025-01-15</div>
|
|
</div>
|
|
|
|
<!-- Test 5: Inline style hidden input -->
|
|
<div class="test-section">
|
|
<h2>✅ Test 5: Inline style (exactly like app.js)</h2>
|
|
<input type="date" id="date5" style="position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none;" value="2025-01-15" onchange="updateResult(5, this.value)">
|
|
<label for="date5" class="date-cell">
|
|
Click me: 15.01.2025
|
|
</label>
|
|
<div class="result" id="result5">Selected: 2025-01-15</div>
|
|
</div>
|
|
|
|
<script>
|
|
function updateResult(testNum, newDate) {
|
|
document.getElementById('result' + testNum).innerHTML =
|
|
'✅ Date picker worked! Selected: ' + newDate;
|
|
console.log('Test ' + testNum + ' changed to:', newDate);
|
|
}
|
|
|
|
console.log('✅ Test page loaded');
|
|
console.log('Browser:', navigator.userAgent);
|
|
</script>
|
|
</body>
|
|
</html>
|