fix: use text input for date variables to respect Joplin date format …#146
fix: use text input for date variables to respect Joplin date format …#146sh1vam31 wants to merge 1 commit intojoplin:masterfrom
Conversation
|
@alondmnt, @nishantwrp, Kindly review this PR |
src/variables/types/date.ts
Outdated
| // Use type="text" instead of type="date" to bypass Chromium's OS-locale | ||
| // date picker, which ignores Joplin's date format setting (issue #112). | ||
| // The placeholder shows the user's configured format as a hint. | ||
| return `<input name="${encode(this.name)}" type="text" placeholder="${encode(this.dateFormat)}" pattern="\\d{4}-\\d{2}-\\d{2}"></input>`; |
There was a problem hiding this comment.
isn't there an option to give locale to <input type="date">?
There was a problem hiding this comment.
Thanks for the question, I did look into this — unfortunately, Chromium ignores the lang attribute and all HTML locale hints for . The display format is controlled purely by the OS locale, not the page settings. This is a known limitation even in Electron.
Switching to type="text" with a placeholder showing the user's Joplin date format was the only reliable workaround I found. Happy to explore any other approach if you have one in mind!
There was a problem hiding this comment.
I see. I think text would be inconvenient for the users when compared to a native date-picker.
Maybe, we can explore some small custom date picker component (maybe https://www.npmjs.com/package/react-datepicker). Maybe need some additional work to comply with joplin theming but maybe that is something that can be done in follow-up.
sh1vam31
force-pushed
the
fix/date-variable-respects-locale-settings_#112
branch
2 times, most recently
from
3d1d498 to
9778666
Compare
|
Updated! I've replaced the type="text" workaround with a flatpickr custom date picker. It respects the user's Joplin date format, shows a native-feeling calendar UI, supports both clicking and typing, and adapts to Joplin's theme. |
joplin#112) - Replaced <input type="date"> with a flatpickr-powered custom date picker - flatpickr is initialized in datepicker.js using the user's configured Joplin date format (e.g. YYYY-MM-DD), converted from moment.js to flatpickr tokens - Added a year dropdown so users can jump to any year quickly (±10 years) - The calendar theme is adapted to Joplin's dark/light CSS variables - Date format is injected into each DateCustomVariable via setDateFormat() called from parser.ts before the dialog is rendered
sh1vam31
force-pushed
the
fix/date-variable-respects-locale-settings_#112
branch
from
9778666 to
3681032
Compare
| overflow: auto; | ||
| } | ||
|
|
||
| /* ── Flatpickr: make the calendar fit the dialog and match Joplin theme ── */ |
There was a problem hiding this comment.
can you move these to src/views/flatpicker-overrides.css
| } | ||
|
|
||
| th, td { | ||
| th, |
There was a problem hiding this comment.
can you revert these linting changes, helps keep the diff small and focus on whats actually changed
| // so the placeholder matches their configured format (fixes issue #112). | ||
| for (const variable of Object.values(variableObjects)) { | ||
| if (variable instanceof DateCustomVariable) { | ||
| variable.setDateFormat(this.utils.getDateFormat()); |
There was a problem hiding this comment.
why can't this be done inside "src/variables/types/date.ts"?
|
Hi @sh1vam31, friendly reminder on the outstanding review comments: the CSS split, linting revert, and moving the format injection into date.ts. Let us know if you need any help. |
3 participants
Fixes #112 — Template dialog UI should respect the date locale settings
Description
The native HTML5
<input type="date">in Chromium (used by Electron/Joplin) hardcodes its display format to the OS locale and completely ignores Joplin's Tools → Options → Date format setting. For example, a user withYYYY-MM-DDconfigured in Joplin always seesmm/dd/yyyyin the template dialog.Fix: Replaced
type="date"withtype="text"that shows the user's configured Joplin date format as a placeholder (e.g.,YYYY-MM-DD). The format is injected from DateAndTimeUtils at dialog render time.Before fix:
Screen.Recording.2026-02-26.at.1.10.26.AM.mov
After fix:
Screen.Recording.2026-02-26.at.1.18.09.AM.mov
How to test
YYYY-MM-DDtemplatetag and this content:start_date:
type: date
label: "Pick a start date:"
Start: {{ start_date }}
mm/dd/yyyyignoring your settingYYYY-MM-DDas a placeholder, matching your Joplin setting exactly