form

Custom Date Picker

Lightweight calendar dropdown for date selection.

date picker calendar input | Gemini 3.1 Pro

Prompt

# Role
You are a Senior Frontend Engineer specializing in UX, form components, and input validation patterns.

# Objective
Create a custom, lightweight date picker component that renders a calendar dropdown, supports month navigation, and populates a text input on date selection — all without external dependencies.

# Instructions
1. Build a text input field that triggers the calendar dropdown:
   - Display selected date in the input (format: YYYY-MM-DD)
   - Show a calendar icon inside the input as a visual affordance
   - Open dropdown on input focus or icon click
   - Close dropdown on outside click or Escape key
2. Render the calendar grid as a month view:
   - 7-column grid layout (Sun–Sat) using CSS Grid
   - Display day-of-week headers (S, M, T, W, T, F, S)
   - Fill in dates for the current month; gray out overflow days from adjacent months
3. Add month navigation:
   - Previous (←) and Next (→) arrow buttons flanking the month/year title
   - Smooth transition between months without page reload
4. Implement date highlighting:
   - Today's date: accent-colored border or underline
   - Selected date: filled circle with contrasting text
   - Hover state: subtle background highlight
5. On date click:
   - Populate the text input with the selected date
   - Close the dropdown
   - Dispatch a `change` event on the input

# Constraints
- Vanilla HTML, CSS, and JavaScript only — no libraries or frameworks
- Use CSS Grid with `grid-template-columns: repeat(7, 1fr)` for the calendar layout
- Must be keyboard-accessible: arrow keys to navigate days, Enter to select
- Dark mode compatible with subtle borders and muted colors
- Do not use the native `<input type="date">` — this is a custom replacement

# Output Format
- Single HTML file with embedded `<style>` and `<script>` blocks
- Calendar component wrapped in a reusable container
- Include sample usage demonstrating the component in context

Notes

Prompt

Role

You are a Senior Frontend Engineer specializing in UX, form components, and input validation patterns.

Objective

Create a custom, lightweight date picker component that renders a calendar dropdown, supports month navigation, and populates a text input on date selection — all without external dependencies.

Instructions

Build a text input field that triggers the calendar dropdown:
- Display selected date in the input (format: YYYY-MM-DD)
- Show a calendar icon inside the input as a visual affordance
- Open dropdown on input focus or icon click
- Close dropdown on outside click or Escape key
Render the calendar grid as a month view:
- 7-column grid layout (Sun–Sat) using CSS Grid
- Display day-of-week headers (S, M, T, W, T, F, S)
- Fill in dates for the current month; gray out overflow days from adjacent months
Add month navigation:
- Previous (←) and Next (→) arrow buttons flanking the month/year title
- Smooth transition between months without page reload
Implement date highlighting:
- Today’s date: accent-colored border or underline
- Selected date: filled circle with contrasting text
- Hover state: subtle background highlight
On date click:
- Populate the text input with the selected date
- Close the dropdown
- Dispatch a change event on the input

Constraints

Vanilla HTML, CSS, and JavaScript only — no libraries or frameworks
Use CSS Grid with grid-template-columns: repeat(7, 1fr) for the calendar layout
Must be keyboard-accessible: arrow keys to navigate days, Enter to select
Dark mode compatible with subtle borders and muted colors
Do not use the native <input type="date"> — this is a custom replacement

Output Format

Single HTML file with embedded <style> and <script> blocks
Calendar component wrapped in a reusable container
Include sample usage demonstrating the component in context

Notes

Use CSS Grid for the 7-column calendar layout — it’s the cleanest approach.
Handle month boundary transitions (e.g., January ← → December across years).
Consider adding aria-label on each day cell for screen reader support.

Related Prompts

Multi-Step Form Wizard

Progressive form with step indicator and validation.

# Role You are a Senior Frontend Engineer specializing in UX, form design, and client-side validation patterns. # Objective Build a multi-step form wizard with a visual step indicator, field validation, a review step, and smooth slide transitions between each stage. # Instructions 1. Create a step indicator bar at the top: - 3 numbered circles connected by horizontal lines - Active step: filled accent color with white number - Completed step: green with checkmark icon - Upcoming step: muted/gray outline - Lines between steps fill with color as steps complete 2. Build 3 form steps: - **Step 1 — Personal Info**: Full name (required), email (required, validated), phone (optional) - **Step 2 — Preferences**: Preferred contact method (radio buttons), newsletter opt-in (checkbox), timezone (select dropdown) - **Step 3 — Review & Submit**: Display all entered data in a read-only summary, edit button per section to jump back 3. Add navigation controls: - "Previous" button (hidden on Step 1) - "Next" button (disabled until required fields are valid) - "Submit" button on the final review step 4. Implement validation: - Validate required fields before allowing progression to the next step - Show inline error messages below invalid fields - Highlight invalid fields with red border 5. Add slide transitions: - Use `transform: translateX()` with transition for horizontal sliding between steps - Current step slides out, next step slides in # Constraints - Vanilla HTML, CSS, and JavaScript only — no frameworks or libraries - Client-side validation only (HTML5 + JavaScript) - Disable the "Next" button until all required fields on the current step pass validation - Form must be keyboard-navigable: Tab through fields, Enter to advance - Dark mode compatible styling - Single-page form — no actual page navigation # Output Format - Single HTML file with embedded `<style>` and `<script>` blocks - Use `translateX()` for slide transitions between steps - Include realistic placeholder content and sample data - Well-commented code with clear separation of each step

form wizard steps +1

GPT 5.3 Ultra