2b:null 2c:["$","title",null,{"children":"Date Formatting | Mike Bostock | Observable"}] 31:T9fd,viewof format = { const form = html``; form.value = {}; for (const s of form.querySelectorAll("select")) { s.onchange = () => { if (s.value) form.value[s.name] = s.value; else delete form.value[s.name]; form.dispatchEvent(new CustomEvent("input")); }; } return form; }32:[] 2f:{"id":"04b82ac3d89b980d","slug":"date-formatting","title":"Date Formatting","thumbnail":"247673855615b99ae663d4a2cb6a40b34626bfbd6828efc40c316c96b54d0521","access_level":"public","create_time":"$D2018-12-21T17:02:53.442Z","update_time":"$D2019-02-10T23:33:13.105Z","view_time":null,"first_public_time":"$D2018-12-21T17:55:59.478Z","fork":false,"stars":49,"starred":false,"owner":{"type":"team","id":"8c2e47252fd4995c","login":"mbostock","name":"Mike Bostock","avatar_url":"https://avatars-next.observableusercontent.com/7dbba99ced40bd5ab8013c99b1a11da61231bce321ba1148a9d16ad0f121550a","tier":"starter_2024"},"version":309,"publish_version":309,"role":null,"authored":false,"authors":[{"type":"individual","id":"074c414ad1d825f5","login":"mbostock","name":"Mike Bostock","avatar_url":"https://avatars-next.observableusercontent.com/7dbba99ced40bd5ab8013c99b1a11da61231bce321ba1148a9d16ad0f121550a","tier":null}],"members":[{"type":"individual","id":"074c414ad1d825f5","login":"mbostock","name":"Mike Bostock","avatar_url":"https://avatars-next.observableusercontent.com/7dbba99ced40bd5ab8013c99b1a11da61231bce321ba1148a9d16ad0f121550a","tier":null,"role":"editor"}],"comments":[{"id":"668c2a69e41edc85","reply_to_id":null,"content":"I would like to change from Spanish typa data to EEUU type data into a object. How can I do it?\n\nThanks in advance!","create_time":"$D2020-10-27T17:02:41.255Z","update_time":null,"resolved":true,"user":{"type":"individual","id":"a2f82bef82a60cc0","login":"jarakama","name":"","avatar_url":"https://avatars-next.observableusercontent.com/9be39954543af7bf3b68ded69af2b926ae3d9f93c10ca9b54a81834e2c70b5e5","tier":null}},{"id":"0e4f36f81ce4a7d0","reply_to_id":"668c2a69e41edc85","content":"You can pass a locale string as the first argument.","create_time":"$D2021-03-30T18:50:15.758Z","update_time":null,"resolved":true,"user":{"type":"individual","id":"074c414ad1d825f5","login":"mbostock","name":"Mike Bostock","avatar_url":"https://avatars-next.observableusercontent.com/7dbba99ced40bd5ab8013c99b1a11da61231bce321ba1148a9d16ad0f121550a","tier":null}},{"id":"5f22e846d0d6ca1f","reply_to_id":null,"content":"Is there an easy way to use this format and not get the time with it? Just the y-m-d?","create_time":"$D2021-12-13T09:27:14.552Z","update_time":null,"resolved":false,"user":{"type":"individual","id":"3f449a3cee7c85fa","login":"quackas","name":"","avatar_url":"https://avatars-next.observableusercontent.com/dabdc9b9adda77ca353ae654b9ce7e6cfdbe80dae8015a59d9220fe2562f92b7","tier":null}}],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":12,"collection":null,"type":"notebook","body":{"title":"Date Formatting","cells":[{"id":0,"value":"md`# Date Formatting\n\nJavaScript has native localized date and time formatting, so depending on your requirements, you might not need a library such as [d3-time-format](https://github.com/d3/d3-time-format) or [moment](https://momentjs.com/). The [*date*.toLocaleString](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toLocaleString) function accepts an optional locale and time zone, too, which is nice—no extra locale or time zone databases required! (JavaScript also has native [number formatting](/@mbostock/number-formatting).)\n\nHere are some examples. Try editing the code!`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":135,"value":"md`The local time (**hour**, **minute** and **second**) for the default locale:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":127,"value":"date.toLocaleString(undefined, {\n hour: \"numeric\", \n minute: \"numeric\", \n second: \"numeric\"\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":139,"value":"md`UTC time (**hour**, **minute** and **second**) for the default locale:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":130,"value":"date.toLocaleString(undefined, {\n hour: \"numeric\", \n minute: \"numeric\", \n second: \"numeric\",\n timeZoneName: \"short\",\n timeZone: \"UTC\"\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":146,"value":"md`UTC time (**hour**, **minute** and **second**) for France’s **locale**:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":149,"value":"date.toLocaleString(\"fr-FR\", {\n hour: \"numeric\", \n minute: \"numeric\", \n second: \"numeric\",\n timeZoneName: \"short\",\n timeZone: \"UTC\"\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":265,"value":"md`Changing the locale affects only the format; it does not change the time zone:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":261,"value":"date.toLocaleString(\"fr-FR\", {\n hour: \"numeric\", \n minute: \"numeric\", \n second: \"numeric\"\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":270,"value":"md`But you can specify a **timeZone**:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":267,"value":"date.toLocaleString(\"fr-FR\", {\n hour: \"numeric\", \n minute: \"numeric\", \n second: \"numeric\",\n timeZone: \"Europe/Paris\"\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":160,"value":"md`The **weekday**, in its various forms:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":157,"value":"date.toLocaleString(undefined, {weekday: \"long\"})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":170,"value":"date.toLocaleString(undefined, {weekday: \"short\"})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":166,"value":"date.toLocaleString(undefined, {weekday: \"narrow\"})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":173,"value":"md`The **month**, in its various forms:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":175,"value":"date.toLocaleString(undefined, {month: \"long\"})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":179,"value":"date.toLocaleString(undefined, {month: \"short\"})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":182,"value":"date.toLocaleString(undefined, {month: \"narrow\"})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":198,"value":"md`The **day** of month:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":200,"value":"date.toLocaleString(undefined, {day: \"numeric\"})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":229,"value":"date.toLocaleString(undefined, {day: \"2-digit\"})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":192,"value":"md`Combining fields are supported, naturally:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":194,"value":"date.toLocaleString(undefined, {\n weekday: \"short\",\n month: \"short\",\n day: \"numeric\"\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":211,"value":"md`Sometimes the combinations produce unusual results:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":208,"value":"date.toLocaleString(undefined, {\n weekday: \"short\",\n month: \"short\",\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":234,"value":"date.toLocaleString(undefined, {\n weekday: \"short\",\n month: \"short\",\n year: \"numeric\"\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":213,"value":"md`Try it yourself!`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":55,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":223,"value":"viewof locale = {\n const form = md``;\n form.input.oninput = event => {\n if (form.input.value) {\n try { (new Date).toLocaleString(form.input.value); }\n catch (error) { return event.stopImmediatePropagation(); }\n }\n form.value = form.input.value || undefined;\n form.dispatchEvent(new CustomEvent(\"input\"));\n };\n form.onsubmit = event => event.preventDefault();\n form.value = Promise.resolve();\n return form; \n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":217,"value":"date.toLocaleString(locale, format)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":84,"value":"md`To copy-and-paste this format:\n\n\\`\\`\\`js\ndate.toLocaleString(${locale ? JSON.stringify(locale) : \"undefined\"}, ${JSON.stringify(format, null, 2)})\n\\`\\`\\``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":17,"value":"date = new Date(2018, 11, 1, 9, 27, 9, 247)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W32","stdlib":"1","titling":"auto"}} 30:"$2f:body"