Add DatePicker component

date-picker/README.md

@@ -0,0 +1,125 @@
+# DatePicker
+A fully-featured date picker component with a calendar dropdown popup.
+
+## Getting Started
+
+Install dependencies:
+```bash
+npm install
+```
+
+Share the component to your Webflow workspace:
+```bash
+npx webflow library share
+```
+
+For local development:
+```bash
+npm run dev
+```
+
+## Designer Properties
+
+| Property | Type | Default | Description |
+|----------|------|---------|-------------|
+| ID | Id | — | HTML ID attribute for the date picker container |
+| Mode | Variant | single | Date selection mode: single date or date range |
+| Date Format | Variant | MM/DD/YYYY | Display format for selected date in input field |
+| Size | Variant | md | Size variant for the input field and calendar |
+| Label | Text | Select Date | Label text displayed above the input field |
+| Placeholder | Text | Choose a date | Placeholder text shown in empty input field |
+| Start Placeholder | Text | Start date | Placeholder for start date in range mode |
+| End Placeholder | Text | End date | Placeholder for end date in range mode |
+| Clear Button Text | Text | Clear date | Accessible label for the clear button |
+| Today Button Text | Text | Today | Text for the today quick-select button |
+| Previous Month Label | Text | Previous month | Accessible label for previous month button |
+| Next Month Label | Text | Next month | Accessible label for next month button |
+| Show Label | Visibility | — | Show or hide the label above the input |
+| Show Clear Button | Boolean | true | Show clear button to reset selection |
+| Show Today Button | Boolean | true | Show today button in calendar footer for quick selection |
+| Show Week Numbers | Boolean | false | Display week numbers in the calendar grid |
+| Highlight Today | Boolean | true | Visually highlight today's date in the calendar |
+| Is Disabled | Boolean | false | Disable the entire date picker input |
+| Is Required | Boolean | false | Mark the date picker as a required field |
+| Close On Select | Boolean | true | Automatically close calendar after date selection |
+| Min Date | Text | — | Minimum selectable date in YYYY-MM-DD format (dates before are disabled) |
+| Max Date | Text | — | Maximum selectable date in YYYY-MM-DD format (dates after are disabled) |
+| Default Date | Text | — | Default selected date in YYYY-MM-DD format |
+| Default Start Date | Text | — | Default start date for range mode in YYYY-MM-DD format |
+| Default End Date | Text | — | Default end date for range mode in YYYY-MM-DD format |
+| Disabled Days Of Week | Text | — | Comma-separated day numbers to disable (0=Sunday, 6=Saturday) |
+| First Day Of Week | Variant | sunday | First day of the week in calendar grid |
+| Month Year Format | Variant | MMMM YYYY | Format for month/year display in calendar header |
+| Helper Text | Text | — | Helper text displayed below the input field |
+| Error Text | Text | — | Error message text displayed when validation fails |
+| Show Helper Text | Visibility | — | Show or hide the helper text below input |
+| Show Error Text | Visibility | — | Show or hide the error message |
+| Name | Text | date | Form input name attribute for form submission |
+
+## Styling
+
+This component automatically adapts to your Webflow site's design system through site variables and inherited properties.
+
+### Site Variables
+
+To match your site's design system, define these CSS variables in your Webflow project settings. The component will use the fallback values shown below until you configure them.
+
+| Site Variable | What It Controls | Fallback |
+|---------------|------------------|----------|
+| --background-primary | Main background color for input and calendar | #ffffff |
+| --background-secondary | Hover states for buttons and days | #f5f5f5 |
+| --text-primary | Main text color for labels, input, and calendar | #1a1a1a |
+| --text-secondary | Muted text for weekday labels and helper text | #737373 |
+| --border-color | Input border, calendar border, and dividers | #e5e5e5 |
+| --accent-color | Selected day background, today highlight, focus states | #1a1a1a |
+| --accent-text-color | Text color on selected days | #ffffff |
+| --border-radius | Corner rounding for input, calendar, and buttons | 8px |
+
+### Inherited Properties
+
+The component inherits these CSS properties from its parent element:
+- `font-family` — Typography style
+- `color` — Text color
+- `line-height` — Text spacing
+
+## Extending in Code
+
+### Custom Date Validation
+
+Add custom validation logic by accessing the component's selected date value:
+
+```javascript
+// Listen for date selection changes
+const datePicker = document.querySelector('[data-component="date-picker"]');
+datePicker.addEventListener('change', (event) => {
+  const selectedDate = new Date(event.target.value);
+  const dayOfWeek = selectedDate.getDay();
+
+  // Example: Prevent weekend selections
+  if (dayOfWeek === 0 || dayOfWeek === 6) {
+    alert('Please select a weekday');
+    event.target.value = '';
+  }
+});
+```
+
+### Integration with Form Libraries
+
+The component works seamlessly with form validation libraries by using the `name` property:
+
+```javascript
+// Example with a form submission handler
+const form = document.querySelector('form');
+form.addEventListener('submit', (event) => {
+  event.preventDefault();
+  const formData = new FormData(form);
+  const selectedDate = formData.get('date'); // Uses the 'name' prop value
+
+  // Process the date value
+  console.log('Selected date:', selectedDate);
+});
+```
+
+## Dependencies
+
+- **react-day-picker** — Flexible date picker component library for React

date-picker/index.html

@@ -0,0 +1,17 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>DatePicker</title>
+    <style>
+      *, *::before, *::after { box-sizing: border-box; margin: 0; }
+      body { color: inherit; }
+      h1, h2, h3, h4, h5, h6 { color: inherit; }
+    </style>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>

date-picker/metadata.json

@@ -0,0 +1,5 @@
+{
+  "name": "Date Picker",
+  "description": "Calendar-based date picker with range selection, min/max date constraints, and configurable date formats.",
+  "category": "Forms & Input"
+}

date-picker/package.json

@@ -0,0 +1,26 @@
+{
+  "name": "date-picker",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc -b && vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "react": "^19.1.1",
+    "react-dom": "^19.1.1",
+    "react-day-picker": "^9.0.0"
+  },
+  "devDependencies": {
+    "@types/react": "^19.1.13",
+    "@types/react-dom": "^19.1.9",
+    "@vitejs/plugin-react": "^5.0.3",
+    "@webflow/data-types": "^1.0.1",
+    "@webflow/react": "^1.0.1",
+    "@webflow/webflow-cli": "^1.8.44",
+    "typescript": "~5.8.3",
+    "vite": "^7.1.7"
+  }
+}