Skip to content

feat(token): replace native date picker with Flatpickr#15

Open
wjl2023 wants to merge 7 commits into
dd3xp:mainfrom
wjl2023:feat/flatpickr-datepicker
Open

feat(token): replace native date picker with Flatpickr#15
wjl2023 wants to merge 7 commits into
dd3xp:mainfrom
wjl2023:feat/flatpickr-datepicker

Conversation

@wjl2023
Copy link
Copy Markdown
Collaborator

@wjl2023 wjl2023 commented May 27, 2026

Summary

Replace the native datetime-local inputs in the Token stats page with Flatpickr for a polished, theme-aware date picker.

Changes

  • Swap datetime-local inputs for Flatpickr (CDN, no build step)
  • Full dark mode support via CSS variable overrides
  • Font family, size (13px), and weight (600 bold header) aligned with app
  • Date format uses double-space separator instead of confusing T
  • Remove duplicate placeholder text (label already shows 从/到)
  • No hardcoded colors or text - all via CSS variables and i18n keys

Files Changed

  • frontends/desktop/static/app.js - Flatpickr init logic
  • frontends/desktop/static/index.html - input type change, remove placeholder
  • frontends/desktop/static/styles.css - theme overrides for calendar

Tested

  • Light and dark mode rendering
  • Date selection and format display
  • Font consistency with app body text
  • Header month/year bold and normalized size

wjl2023 added 7 commits May 27, 2026 16:29
- Add Flatpickr CDN (CSS + JS + zh locale) to index.html
- Change input type to text with .tok-date class
- Add Flatpickr theme override using CSS variables (light + dark)
- Initialize Flatpickr instances with ISO dateFormat for Safari compat
- Update reset button to use fp.clear() API
- Add !important to all Flatpickr CSS overrides to beat CDN specificity
- Change dateFormat from ISO 'Y-m-d\TH:i' to 'Y-m-d  H:i' (double space)
- Update tokGetFiltered to use .replace(/\s+/,'T') for Safari compat
- Add font-family:inherit !important to .flatpickr-calendar
- Add font-size:13px !important to match body font-size
- Add font-weight:600 !important to month dropdown and year input
- Add font-size:13px !important to override CDN's 135% enlargement
- Ensures calendar header matches app's global 13px baseline
The label already shows '从'/'到', so data-i18n-ph on inputs
caused duplicate text display. Removed placeholder attributes.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant