Edit Date Formatting

Name

Also known as (comma separated)

Brief definition Locale-appropriate date presentation.

Notes

Tier Core Useful Reference Deleted

Controls schema (JSON array) [ { "id": "year", "type": "number", "label": "Year", "default": 2026, "min": 1900, "max": 2100, "step": 1 }, { "id": "month", "type": "number", "label": "Month", "default": 3, "min": 1, "max": 12, "step": 1 }, { "id": "day", "type": "number", "label": "Day", "default": 14, "min": 1, "max": 31, "step": 1 }, { "id": "locale", "type": "select", "label": "Locale", "default": "en-US", "options": [ "en-US", "en-GB", "ja-JP" ] }, { "id": "longFormat", "type": "toggle", "label": "Full (not short) style", "default": true } ]

Templates (JSON object keyed by format) { "html": "<div class=\"datf\" data-year=\"{{year}}\" data-month=\"{{month}}\" data-day=\"{{day}}\" data-locale=\"{{locale}}\" data-long=\"{{longFormat}}\">\n <p class=\"datf__label\">new Intl.DateTimeFormat(&quot;{{locale}}&quot;)</p>\n <p class=\"datf__value\">&nbsp;</p>\n</div>\n<script>(function () {\n var el = document.querySelector(\".datf\");\n if (!el) return;\n var d = new Date(Number(el.dataset.year), Number(el.dataset.month) - 1, Number(el.dataset.day));\n var long = el.dataset.long === \"true\";\n var fmt = new Intl.DateTimeFormat(el.dataset.locale, { dateStyle: long ? \"full\" : \"short\" });\n el.querySelector(\".datf__value\").textContent = fmt.format(d);\n})();</script>\n<style>\n.datf { font: 14px/1.5 system-ui, sans-serif; color: #241430; background: #FAF7F2; padding: 20px; border-radius: 12px; width: 300px; box-sizing: border-box; }\n.datf__label { margin: 0 0 12px; font: 11px ui-monospace, monospace; color: #24143099; }\n.datf__value { margin: 0; font-size: 22px; font-weight: 800; }\n</style>", "tailwind": "<div class=\"datftw font-sans text-[#241430] bg-[#FAF7F2] p-5 rounded-xl w-[300px] box-border\" data-year=\"{{year}}\" data-month=\"{{month}}\" data-day=\"{{day}}\" data-locale=\"{{locale}}\" data-long=\"{{longFormat}}\">\n <p class=\"m-0 mb-3 font-mono text-[11px] text-[#24143099]\">new Intl.DateTimeFormat(&quot;{{locale}}&quot;)</p>\n <p class=\"datftw__value m-0 text-2xl font-extrabold\">&nbsp;</p>\n</div>\n<script>(function () {\n var el = document.querySelector(\".datftw\");\n if (!el) return;\n var d = new Date(Number(el.dataset.year), Number(el.dataset.month) - 1, Number(el.dataset.day));\n var long = el.dataset.long === \"true\";\n var fmt = new Intl.DateTimeFormat(el.dataset.locale, { dateStyle: long ? \"full\" : \"short\" });\n el.querySelector(\".datftw__value\").textContent = fmt.format(d);\n})();</script>", "react": "import { useMemo } from \"react\";\n\nexport function DateFormatting({\n year = {{year}},\n month = {{month}},\n day = {{day}},\n locale = \"{{locale}}\",\n longFormat = {{longFormat}},\n}) {\n const value = useMemo(() => {\n const d = new Date(year, month - 1, day);\n return new Intl.DateTimeFormat(locale, { dateStyle: longFormat ? \"full\" : \"short\" }).format(d);\n }, [year, month, day, locale, longFormat]);\n return (\n <div style={{ font: \"14px/1.5 system-ui, sans-serif\", color: \"#241430\", background: \"#FAF7F2\", padding: 20, borderRadius: 12, width: 300, boxSizing: \"border-box\" }}>\n <p style={{ margin: \"0 0 12px\", fontFamily: \"ui-monospace, monospace\", fontSize: 11, color: \"#24143099\" }}>new Intl.DateTimeFormat(\"{locale}\")</p>\n <p style={{ margin: 0, fontSize: 22, fontWeight: 800 }}>{value}</p>\n </div>\n );\n}" }