2e:null 2f:["$","title",null,{"children":"Intl.DateTimeFormat Calculator | Luke Murray | Observable"}] 34:[] 32:{"id":"796745ea18ab4183","slug":"intl-datetimeformat-calculator","title":"Intl.DateTimeFormat Calculator","thumbnail":"389ddbaee1d5f41281e56741a0055954348bd9c4ba1fff1423136bbd6493c746","access_level":"public","create_time":"$D2022-02-13T19:31:36.389Z","update_time":"$D2022-02-13T19:54:23.465Z","view_time":null,"first_public_time":"$D2022-02-13T19:47:09.060Z","has_unpublished_edits":null,"fork":{"id":"1c1b9a3b9dd1ff6d","slug":"intl-datetimeformat-combinatorics","title":"Intl.DateTimeFormat Combinatorics","owner":{"id":"2fffccdb72a41da3","login":"lukesmurray","name":"Luke Murray"}},"stars":1,"starred":false,"owner":{"type":"team","id":"2fffccdb72a41da3","login":"lukesmurray","name":"Luke Murray","avatar_url":"https://avatars-next.observableusercontent.com/71a8e2c24320cb7d8a88bd0d0ab7cb1cd2b09805978c252cbcc5facac7a97c8b","tier":"starter_2024"},"version":254,"publish_version":254,"role":null,"authored":false,"authors":[{"type":"individual","id":"1d55995fe48aa1ea","login":"lukesmurray","name":"Luke Murray","avatar_url":"https://avatars-next.observableusercontent.com/71a8e2c24320cb7d8a88bd0d0ab7cb1cd2b09805978c252cbcc5facac7a97c8b","tier":null}],"members":[{"type":"individual","id":"1d55995fe48aa1ea","login":"lukesmurray","name":"Luke Murray","avatar_url":"https://avatars-next.observableusercontent.com/71a8e2c24320cb7d8a88bd0d0ab7cb1cd2b09805978c252cbcc5facac7a97c8b","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Intl.DateTimeFormat Calculator","cells":[{"id":0,"value":"# Intl.DateTimeFormat Calculator\n\nCalculator to determine how times are displayed using Intl.DateTimeFormat options.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":189,"value":"viewof selectedProps = Inputs.form(\n Object.entries(dateTimeFormatProps).reduce((prev, [key, value]) => {\n prev[key] = Inputs.select(value, { value: null, label: key });\n return prev;\n }, {}),\n {\n template: (inputs) => md`\n Select the options\n\n ${Object.values(inputs)}\n `\n }\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":197,"value":"htl.html`\n

\n ${renderDate(optionsWithoutNulls)}\n

\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":231,"value":"md`\n\nCopy this code to add the formatter to your application\n\n~~~js\nconst formatter = new Intl.DateTimeFormat([], ${JSON.stringify(\n optionsWithoutNulls\n)})\n// formatter.format(Date.now())\n~~~\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":250,"value":"*Boring zone below*","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":234,"value":"optionsWithoutNulls = Object.entries(selectedProps).reduce(\n (prev, [key, value]) => {\n prev[key] = value === null ? undefined : value;\n return prev;\n },\n {}\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":11,"value":"dateTimeFormatProps = ({\n dateStyle: [null, \"full\", \"long\", \"medium\", \"short\"],\n timeStyle: [null, \"full\", \"long\", \"medium\", \"short\"],\n dayPeriod: [null, \"narrow\", \"short\", \"long\"],\n hour12: [null, true, false],\n hourCycle: [null, \"h11\", \"h12\", \"h23\", \"h24\"],\n weekday: [null, \"long\", \"short\", \"narrow\"],\n era: [null, \"long\", \"short\", \"narrow\"],\n year: [null, \"numeric\", \"2-digit\"],\n month: [null, \"numeric\", \"2-digit\", \"long\", \"short\", \"narrow\"],\n day: [null, \"numeric\", \"2-digit\"],\n hour: [null, \"numeric\", \"2-digit\"],\n minute: [null, \"numeric\", \"2-digit\"],\n second: [null, \"numeric\", \"2-digit\"],\n fractionalSecondDigits: [null, 0, 1, 2, 3],\n timeZoneName: [\n null,\n \"long\",\n \"short\",\n \"shortOffset\",\n \"longOffset\",\n \"shortGeneric\",\n \"longGeneric\"\n ]\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":20,"value":"function renderDate(options) {\n return htl.html`\n ${new Intl.DateTimeFormat([], options).format(Date.now())}\n

\n ${Object.entries(options).map(([key, value]) =>\n renderProp({ key, value })\n )}\n

\n `;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":26,"value":"function renderProp({ key, value }) {\n if (value === undefined) return null;\n return htl.html`\n

\n ${key}:\n ${JSON.stringify(value)}\n

\n  `;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W34","stdlib":"1","titling":"auto"}}
33:"$32:body"