{"_id":"@bentoproject/date-display","_rev":"244-710bd188cc052b1ab2e723e8f97fac48","name":"@bentoproject/date-display","dist-tags":{"nightly":"1.2305241828.0","latest":"1.2305051745.1"},"versions":{"1.2110261518.0":{"name":"@bentoproject/date-display","version":"1.2110261518.0","description":"AMP HTML amp-date-display Component","author":{"name":"The AMP HTML Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":"./web-component","./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"}},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-date-display/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-date-display/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"gitHead":"e4bbe5c706c18a2c817265b40388ca4d4771613a","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/date-display@1.2110261518.0","_nodeVersion":"16.13.0","_npmVersion":"8.1.0","dist":{"integrity":"sha512-TTl9GYCsCW7o2WUwPv0LcqmGXf8Mqxq3MxVGg/1U1cGscI+qcEXyvy7XTgKhFgyozsCe2S17Mkr1Zyg/n+JBvA==","shasum":"232effe59ee496a04a58e43242496064927b435e","tarball":"https://registry.npmjs.org/@bentoproject/date-display/-/date-display-1.2110261518.0.tgz","fileCount":27,"unpackedSize":2000086,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEZA5qejWFo8ScIumAjPwCVrrZx2WhetYK2HL+EmUmbnAiEA5odDre94DKLiiV3M0VN1d5OMAhDHz3DV8AeZ5i5FIjQ="}]},"_npmUser":{"name":"ampprojectbot","email":"bot@amp.dev"},"directories":{},"maintainers":[{"name":"ampprojectbot","email":"bot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/date-display_1.2110261518.0_1635445087081_0.7034523212531816"},"_hasShrinkwrap":false},"1.2110252343.0":{"name":"@bentoproject/date-display","version":"1.2110252343.0","description":"Bento date-display Component","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":"./web-component","./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"}},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-date-display/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-date-display/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"readme":"# Bento Date Display\n\n## Usage\n\nThe Bento Date Display component displays time data that you can render in your page. By providing specific [attributes](#attributes) in the\nBento Date Display tag, the Bento Date Display extension returns a list of time\nparameters, which you can pass to\n[an amp-mustache template](../../amp-mustache/amp-mustache.md)\nfor rendering. Refer to the\n[list below for each returned time parameter](#returned-time-parameters).\n\n\n\n### Preact/React Component\n\nThe examples below demonstrates use of the `` as a functional component usable with the Preact or React libraries.\n\n#### Example: Import via npm\n\nInstall via npm:\n\n```sh\nnpm install @bentoproject/date-display\n```\n\n```javascript\nimport React from 'react';\nimport {BentoDateDisplay} from '@bentoproject/date-display/react';\nimport '@bentoproject/date-display/styles.css';\n\nfunction App() {\n return (\n (\n
{`ISO: ${date.iso}; locale: ${date.localeString}`}
\n )}\n />\n );\n}\n```\n\n#### Interactivity and API usage\n\nThe Bento Date Display component does not have an imperative API. However, the Bento Date Display Preact/React component does accept a `render` prop that renders the consumer's template. This `render` prop should be a function which the Bento Date Display Preact/React component can use to render its template. The `render` callback will be provided a variety of date-related parameters for consumers to interpolate in the rendered template. See the [`render` prop section](#render) for more information.\n\n#### Layout and style\n\nThe Bento Date Display Preact/React component allows consumers to render their own templates. These templates may use inline styles, `\n```\n\n### Attributes\n\n#### `datetime`\n\nThe `datetime` attribute specifies the date and time in a standard ISO 8601 date\nstring (e.g. 2017-08-02T15:05:05.000Z) or the string `now`. If set to `now`,\n`bento-date-display` will use the time the page loaded to render its template.\n\n#### `timestamp-ms`\n\nThe `timestamp-ms` attribute specifies the date and time using the number of\nmilliseconds since 1970-01-01T0:00:00.000Z\n\n#### `timestamp-seconds`\n\nThe `timestamp-seconds` attribute specifies the date and time using the number\nof seconds since 1970-01-01T0:00:00.000Z\n\n#### `locale` (optional)\n\nAn internationalization language string for each timer unit. The default value\nis `en` (for English). This attribute supports all values that are supported by\nthe user's browser.\n\n#### `display-in` (optional)\n\nIf set to the value `utc`, the `display-in` attribute will convert the given\ndate to UTC.\n\n#### `offset-seconds` (optional)\n\nThe `offset-seconds` attribute specifies an integer number of seconds to shift\nthe given date.\n\n#### `data-options-\\*` (optional)\n\nThe `data-options-*` supports all the options under [Intl.DateTimeFormat.options](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/DateTimeFormat#parameters)\nparameter that specifies the formatting style to use for `localeString` format.\nValid attributes include: `data-options-date-style`, `data-options-time-style`, etc.\n\nNote that if `display-in` attrubute is set to `utc`, the value of\n`data-options-time-zone` will automatically be converted to `UTC`.\n\n### Styling\n\nYou may use the `bento-date-display` element selector to style the Bento Date Display component freely.\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/date-display\n```\n\n```javascript\nimport React from 'react';\nimport {BentoDateDisplay} from '@bentoproject/date-display/react';\nimport '@bentoproject/date-display/styles.css';\n\nfunction App() {\n return (\n (\n
{`ISO: ${date.iso}; locale: ${date.localeString}`}
\n )}\n />\n );\n}\n```\n\n### Interactivity and API usage\n\nThe Bento Date Display component does not have an imperative API. However, the Bento Date Display Preact/React component does accept a `render` prop that renders the consumer's template. This `render` prop should be a function which the Bento Date Display Preact/React component can use to render its template. The `render` callback will be provided a variety of date-related parameters for consumers to interpolate in the rendered template. See the [`render` prop section](#render) for more information.\n\n### Layout and style\n\nThe Bento Date Display Preact/React component allows consumers to render their own templates. These templates may use inline styles, `\n```\n\n### Attributes\n\n#### `datetime`\n\nThe `datetime` attribute specifies the date and time in a standard ISO 8601 date\nstring (e.g. 2017-08-02T15:05:05.000Z) or the string `now`. If set to `now`,\n`bento-date-display` will use the time the page loaded to render its template.\n\n#### `timestamp-ms`\n\nThe `timestamp-ms` attribute specifies the date and time using the number of\nmilliseconds since 1970-01-01T0:00:00.000Z\n\n#### `timestamp-seconds`\n\nThe `timestamp-seconds` attribute specifies the date and time using the number\nof seconds since 1970-01-01T0:00:00.000Z\n\n#### `locale` (optional)\n\nAn internationalization language string for each timer unit. The default value\nis `en` (for English). This attribute supports all values that are supported by\nthe user's browser.\n\n#### `display-in` (optional)\n\nIf set to the value `utc`, the `display-in` attribute will convert the given\ndate to UTC.\n\n#### `offset-seconds` (optional)\n\nThe `offset-seconds` attribute specifies an integer number of seconds to shift\nthe given date.\n\n#### `data-options-\\*` (optional)\n\nThe `data-options-*` supports all the options under [Intl.DateTimeFormat.options](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/DateTimeFormat#parameters)\nparameter that specifies the formatting style to use for `localeString` format.\nValid attributes include: `data-options-date-style`, `data-options-time-style`, etc.\n\nNote that if `display-in` attrubute is set to `utc`, the value of\n`data-options-time-zone` will automatically be converted to `UTC`.\n\n### Styling\n\nYou may use the `bento-date-display` element selector to style the Bento Date Display component freely.\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/date-display\n```\n\n```javascript\nimport React from 'react';\nimport {BentoDateDisplay} from '@bentoproject/date-display/react';\nimport '@bentoproject/date-display/styles.css';\n\nfunction App() {\n return (\n (\n
{`ISO: ${date.iso}; locale: ${date.localeString}`}
\n )}\n />\n );\n}\n```\n\n### Interactivity and API usage\n\nThe Bento Date Display component does not have an imperative API. However, the Bento Date Display Preact/React component does accept a `render` prop that renders the consumer's template. This `render` prop should be a function which the Bento Date Display Preact/React component can use to render its template. The `render` callback will be provided a variety of date-related parameters for consumers to interpolate in the rendered template. See the [`render` prop section](#render) for more information.\n\n### Layout and style\n\nThe Bento Date Display Preact/React component allows consumers to render their own templates. These templates may use inline styles, `\n```\n\n### Attributes\n\n#### `datetime`\n\nThe `datetime` attribute specifies the date and time in a standard ISO 8601 date\nstring (e.g. 2017-08-02T15:05:05.000Z) or the string `now`. If set to `now`,\n`bento-date-display` will use the time the page loaded to render its template.\n\n#### `timestamp-ms`\n\nThe `timestamp-ms` attribute specifies the date and time using the number of\nmilliseconds since 1970-01-01T0:00:00.000Z\n\n#### `timestamp-seconds`\n\nThe `timestamp-seconds` attribute specifies the date and time using the number\nof seconds since 1970-01-01T0:00:00.000Z\n\n#### `locale` (optional)\n\nAn internationalization language string for each timer unit. The default value\nis `en` (for English). This attribute supports all values that are supported by\nthe user's browser.\n\n#### `display-in` (optional)\n\nIf set to the value `utc`, the `display-in` attribute will convert the given\ndate to UTC.\n\n#### `offset-seconds` (optional)\n\nThe `offset-seconds` attribute specifies an integer number of seconds to shift\nthe given date.\n\n#### `data-options-\\*` (optional)\n\nThe `data-options-*` supports all the options under [Intl.DateTimeFormat.options](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/DateTimeFormat#parameters)\nparameter that specifies the formatting style to use for `localeString` format.\nValid attributes include: `data-options-date-style`, `data-options-time-style`, etc.\n\nNote that if `display-in` attrubute is set to `utc`, the value of\n`data-options-time-zone` will automatically be converted to `UTC`.\n\n### Styling\n\nYou may use the `bento-date-display` element selector to style the Bento Date Display component freely.\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/date-display\n```\n\n```javascript\nimport React from 'react';\nimport {BentoDateDisplay} from '@bentoproject/date-display/react';\nimport '@bentoproject/date-display/styles.css';\n\nfunction App() {\n return (\n (\n
{`ISO: ${date.iso}; locale: ${date.localeString}`}
\n )}\n />\n );\n}\n```\n\n### Interactivity and API usage\n\nThe Bento Date Display component does not have an imperative API. However, the Bento Date Display Preact/React component does accept a `render` prop that renders the consumer's template. This `render` prop should be a function which the Bento Date Display Preact/React component can use to render its template. The `render` callback will be provided a variety of date-related parameters for consumers to interpolate in the rendered template. See the [`render` prop section](#render) for more information.\n\n### Layout and style\n\nThe Bento Date Display Preact/React component allows consumers to render their own templates. These templates may use inline styles, `\n```\n\n### Attributes\n\n#### `datetime`\n\nThe `datetime` attribute specifies the date and time in a standard ISO 8601 date\nstring (e.g. 2017-08-02T15:05:05.000Z) or the string `now`. If set to `now`,\n`bento-date-display` will use the time the page loaded to render its template.\n\n#### `timestamp-ms`\n\nThe `timestamp-ms` attribute specifies the date and time using the number of\nmilliseconds since 1970-01-01T0:00:00.000Z\n\n#### `timestamp-seconds`\n\nThe `timestamp-seconds` attribute specifies the date and time using the number\nof seconds since 1970-01-01T0:00:00.000Z\n\n#### `locale` (optional)\n\nAn internationalization language string for each timer unit. The default value\nis `en` (for English). This attribute supports all values that are supported by\nthe user's browser.\n\n#### `display-in` (optional)\n\nIf set to the value `utc`, the `display-in` attribute will convert the given\ndate to UTC.\n\n#### `offset-seconds` (optional)\n\nThe `offset-seconds` attribute specifies an integer number of seconds to shift\nthe given date.\n\n#### `data-options-\\*` (optional)\n\nThe `data-options-*` supports all the options under [Intl.DateTimeFormat.options](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/DateTimeFormat#parameters)\nparameter that specifies the formatting style to use for `localeString` format.\nValid attributes include: `data-options-date-style`, `data-options-time-style`, etc.\n\nNote that if `display-in` attrubute is set to `utc`, the value of\n`data-options-time-zone` will automatically be converted to `UTC`.\n\n### Styling\n\nYou may use the `bento-date-display` element selector to style the Bento Date Display component freely.\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/date-display\n```\n\n```javascript\nimport React from 'react';\nimport {BentoDateDisplay} from '@bentoproject/date-display/react';\nimport '@bentoproject/date-display/styles.css';\n\nfunction App() {\n return (\n (\n
{`ISO: ${date.iso}; locale: ${date.localeString}`}
\n )}\n />\n );\n}\n```\n\n### Interactivity and API usage\n\nThe Bento Date Display component does not have an imperative API. However, the Bento Date Display Preact/React component does accept a `render` prop that renders the consumer's template. This `render` prop should be a function which the Bento Date Display Preact/React component can use to render its template. The `render` callback will be provided a variety of date-related parameters for consumers to interpolate in the rendered template. See the [`render` prop section](#render) for more information.\n\n### Layout and style\n\nThe Bento Date Display Preact/React component allows consumers to render their own templates. These templates may use inline styles, `\n```\n\n### Attributes\n\n#### `datetime`\n\nThe `datetime` attribute specifies the date and time in a standard ISO 8601 date\nstring (e.g. 2017-08-02T15:05:05.000Z) or the string `now`. If set to `now`,\n`bento-date-display` will use the time the page loaded to render its template.\n\n#### `timestamp-ms`\n\nThe `timestamp-ms` attribute specifies the date and time using the number of\nmilliseconds since 1970-01-01T0:00:00.000Z\n\n#### `timestamp-seconds`\n\nThe `timestamp-seconds` attribute specifies the date and time using the number\nof seconds since 1970-01-01T0:00:00.000Z\n\n#### `locale` (optional)\n\nAn internationalization language string for each timer unit. The default value\nis `en` (for English). This attribute supports all values that are supported by\nthe user's browser.\n\n#### `display-in` (optional)\n\nIf set to the value `utc`, the `display-in` attribute will convert the given\ndate to UTC.\n\n#### `offset-seconds` (optional)\n\nThe `offset-seconds` attribute specifies an integer number of seconds to shift\nthe given date.\n\n#### `data-options-\\*` (optional)\n\nThe `data-options-*` supports all the options under [Intl.DateTimeFormat.options](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/DateTimeFormat#parameters)\nparameter that specifies the formatting style to use for `localeString` format.\nValid attributes include: `data-options-date-style`, `data-options-time-style`, etc.\n\nNote that if `display-in` attrubute is set to `utc`, the value of\n`data-options-time-zone` will automatically be converted to `UTC`.\n\n### Styling\n\nYou may use the `bento-date-display` element selector to style the Bento Date Display component freely.\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/date-display\n```\n\n```javascript\nimport React from 'react';\nimport {BentoDateDisplay} from '@bentoproject/date-display/react';\nimport '@bentoproject/date-display/styles.css';\n\nfunction App() {\n return (\n (\n
{`ISO: ${date.iso}; locale: ${date.localeString}`}
\n )}\n />\n );\n}\n```\n\n### Interactivity and API usage\n\nThe Bento Date Display component does not have an imperative API. However, the Bento Date Display Preact/React component does accept a `render` prop that renders the consumer's template. This `render` prop should be a function which the Bento Date Display Preact/React component can use to render its template. The `render` callback will be provided a variety of date-related parameters for consumers to interpolate in the rendered template. See the [`render` prop section](#render) for more information.\n\n### Layout and style\n\nThe Bento Date Display Preact/React component allows consumers to render their own templates. These templates may use inline styles, `\n```\n\n### Attributes\n\n#### `datetime`\n\nThe `datetime` attribute specifies the date and time in a standard ISO 8601 date\nstring (e.g. 2017-08-02T15:05:05.000Z) or the string `now`. If set to `now`,\n`bento-date-display` will use the time the page loaded to render its template.\n\n#### `timestamp-ms`\n\nThe `timestamp-ms` attribute specifies the date and time using the number of\nmilliseconds since 1970-01-01T0:00:00.000Z\n\n#### `timestamp-seconds`\n\nThe `timestamp-seconds` attribute specifies the date and time using the number\nof seconds since 1970-01-01T0:00:00.000Z\n\n#### `locale` (optional)\n\nAn internationalization language string for each timer unit. The default value\nis `en` (for English). This attribute supports all values that are supported by\nthe user's browser.\n\n#### `display-in` (optional)\n\nIf set to the value `utc`, the `display-in` attribute will convert the given\ndate to UTC.\n\n#### `offset-seconds` (optional)\n\nThe `offset-seconds` attribute specifies an integer number of seconds to shift\nthe given date.\n\n#### `data-options-\\*` (optional)\n\nThe `data-options-*` supports all the options under [Intl.DateTimeFormat.options](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/DateTimeFormat#parameters)\nparameter that specifies the formatting style to use for `localeString` format.\nValid attributes include: `data-options-date-style`, `data-options-time-style`, etc.\n\nNote that if `display-in` attrubute is set to `utc`, the value of\n`data-options-time-zone` will automatically be converted to `UTC`.\n\n### Styling\n\nYou may use the `bento-date-display` element selector to style the Bento Date Display component freely.\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/date-display\n```\n\n```javascript\nimport React from 'react';\nimport {BentoDateDisplay} from '@bentoproject/date-display/react';\nimport '@bentoproject/date-display/styles.css';\n\nfunction App() {\n return (\n (\n
{`ISO: ${date.iso}; locale: ${date.localeString}`}
\n )}\n />\n );\n}\n```\n\n### Interactivity and API usage\n\nThe Bento Date Display component does not have an imperative API. However, the Bento Date Display Preact/React component does accept a `render` prop that renders the consumer's template. This `render` prop should be a function which the Bento Date Display Preact/React component can use to render its template. The `render` callback will be provided a variety of date-related parameters for consumers to interpolate in the rendered template. See the [`render` prop section](#render) for more information.\n\n### Layout and style\n\nThe Bento Date Display Preact/React component allows consumers to render their own templates. These templates may use inline styles, `\n```\n\n### Attributes\n\n#### `datetime`\n\nThe `datetime` attribute specifies the date and time in a standard ISO 8601 date\nstring (e.g. 2017-08-02T15:05:05.000Z) or the string `now`. If set to `now`,\n`bento-date-display` will use the time the page loaded to render its template.\n\n#### `timestamp-ms`\n\nThe `timestamp-ms` attribute specifies the date and time using the number of\nmilliseconds since 1970-01-01T0:00:00.000Z\n\n#### `timestamp-seconds`\n\nThe `timestamp-seconds` attribute specifies the date and time using the number\nof seconds since 1970-01-01T0:00:00.000Z\n\n#### `locale` (optional)\n\nAn internationalization language string for each timer unit. The default value\nis `en` (for English). This attribute supports all values that are supported by\nthe user's browser.\n\n#### `display-in` (optional)\n\nIf set to the value `utc`, the `display-in` attribute will convert the given\ndate to UTC.\n\n#### `offset-seconds` (optional)\n\nThe `offset-seconds` attribute specifies an integer number of seconds to shift\nthe given date.\n\n#### `data-options-\\*` (optional)\n\nThe `data-options-*` supports all the options under [Intl.DateTimeFormat.options](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/DateTimeFormat#parameters)\nparameter that specifies the formatting style to use for `localeString` format.\nValid attributes include: `data-options-date-style`, `data-options-time-style`, etc.\n\nNote that if `display-in` attrubute is set to `utc`, the value of\n`data-options-time-zone` will automatically be converted to `UTC`.\n\n### Styling\n\nYou may use the `bento-date-display` element selector to style the Bento Date Display component freely.\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/date-display\n```\n\n```javascript\nimport React from 'react';\nimport {BentoDateDisplay} from '@bentoproject/date-display/react';\nimport '@bentoproject/date-display/styles.css';\n\nfunction App() {\n return (\n (\n
{`ISO: ${date.iso}; locale: ${date.localeString}`}
\n )}\n />\n );\n}\n```\n\n### Interactivity and API usage\n\nThe Bento Date Display component does not have an imperative API. However, the Bento Date Display Preact/React component does accept a `render` prop that renders the consumer's template. This `render` prop should be a function which the Bento Date Display Preact/React component can use to render its template. The `render` callback will be provided a variety of date-related parameters for consumers to interpolate in the rendered template. See the [`render` prop section](#render) for more information.\n\n### Layout and style\n\nThe Bento Date Display Preact/React component allows consumers to render their own templates. These templates may use inline styles, `\n```\n\n### Attributes\n\n#### `datetime`\n\nThe `datetime` attribute specifies the date and time in a standard ISO 8601 date\nstring (e.g. 2017-08-02T15:05:05.000Z) or the string `now`. If set to `now`,\n`bento-date-display` will use the time the page loaded to render its template.\n\n#### `timestamp-ms`\n\nThe `timestamp-ms` attribute specifies the date and time using the number of\nmilliseconds since 1970-01-01T0:00:00.000Z\n\n#### `timestamp-seconds`\n\nThe `timestamp-seconds` attribute specifies the date and time using the number\nof seconds since 1970-01-01T0:00:00.000Z\n\n#### `locale` (optional)\n\nAn internationalization language string for each timer unit. The default value\nis `en` (for English). This attribute supports all values that are supported by\nthe user's browser.\n\n#### `display-in` (optional)\n\nIf set to the value `utc`, the `display-in` attribute will convert the given\ndate to UTC.\n\n#### `offset-seconds` (optional)\n\nThe `offset-seconds` attribute specifies an integer number of seconds to shift\nthe given date.\n\n#### `data-options-\\*` (optional)\n\nThe `data-options-*` supports all the options under [Intl.DateTimeFormat.options](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/DateTimeFormat#parameters)\nparameter that specifies the formatting style to use for `localeString` format.\nValid attributes include: `data-options-date-style`, `data-options-time-style`, etc.\n\nNote that if `display-in` attrubute is set to `utc`, the value of\n`data-options-time-zone` will automatically be converted to `UTC`.\n\n### Styling\n\nYou may use the `bento-date-display` element selector to style the Bento Date Display component freely.\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/date-display\n```\n\n```javascript\nimport React from 'react';\nimport {BentoDateDisplay} from '@bentoproject/date-display/react';\nimport '@bentoproject/date-display/styles.css';\n\nfunction App() {\n return (\n (\n
{`ISO: ${date.iso}; locale: ${date.localeString}`}
\n )}\n />\n );\n}\n```\n\n### Interactivity and API usage\n\nThe Bento Date Display component does not have an imperative API. However, the Bento Date Display Preact/React component does accept a `render` prop that renders the consumer's template. This `render` prop should be a function which the Bento Date Display Preact/React component can use to render its template. The `render` callback will be provided a variety of date-related parameters for consumers to interpolate in the rendered template. See the [`render` prop section](#render) for more information.\n\n### Layout and style\n\nThe Bento Date Display Preact/React component allows consumers to render their own templates. These templates may use inline styles, `\n```\n\n### Attributes\n\n#### `datetime`\n\nThe `datetime` attribute specifies the date and time in a standard ISO 8601 date\nstring (e.g. 2017-08-02T15:05:05.000Z) or the string `now`. If set to `now`,\n`bento-date-display` will use the time the page loaded to render its template.\n\n#### `timestamp-ms`\n\nThe `timestamp-ms` attribute specifies the date and time using the number of\nmilliseconds since 1970-01-01T0:00:00.000Z\n\n#### `timestamp-seconds`\n\nThe `timestamp-seconds` attribute specifies the date and time using the number\nof seconds since 1970-01-01T0:00:00.000Z\n\n#### `locale` (optional)\n\nAn internationalization language string for each timer unit. The default value\nis `en` (for English). This attribute supports all values that are supported by\nthe user's browser.\n\n#### `display-in` (optional)\n\nIf set to the value `utc`, the `display-in` attribute will convert the given\ndate to UTC.\n\n#### `offset-seconds` (optional)\n\nThe `offset-seconds` attribute specifies an integer number of seconds to shift\nthe given date.\n\n#### `data-options-\\*` (optional)\n\nThe `data-options-*` supports all the options under [Intl.DateTimeFormat.options](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/DateTimeFormat#parameters)\nparameter that specifies the formatting style to use for `localeString` format.\nValid attributes include: `data-options-date-style`, `data-options-time-style`, etc.\n\nNote that if `display-in` attrubute is set to `utc`, the value of\n`data-options-time-zone` will automatically be converted to `UTC`.\n\n### Styling\n\nYou may use the `bento-date-display` element selector to style the Bento Date Display component freely.\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/date-display\n```\n\n```javascript\nimport React from 'react';\nimport {BentoDateDisplay} from '@bentoproject/date-display/react';\nimport '@bentoproject/date-display/styles.css';\n\nfunction App() {\n return (\n (\n
{`ISO: ${date.iso}; locale: ${date.localeString}`}
\n )}\n />\n );\n}\n```\n\n### Interactivity and API usage\n\nThe Bento Date Display component does not have an imperative API. However, the Bento Date Display Preact/React component does accept a `render` prop that renders the consumer's template. This `render` prop should be a function which the Bento Date Display Preact/React component can use to render its template. The `render` callback will be provided a variety of date-related parameters for consumers to interpolate in the rendered template. See the [`render` prop section](#render) for more information.\n\n### Layout and style\n\nThe Bento Date Display Preact/React component allows consumers to render their own templates. These templates may use inline styles, `\n```\n\n### Attributes\n\n#### `datetime`\n\nThe `datetime` attribute specifies the date and time in a standard ISO 8601 date\nstring (e.g. 2017-08-02T15:05:05.000Z) or the string `now`. If set to `now`,\n`bento-date-display` will use the time the page loaded to render its template.\n\n#### `timestamp-ms`\n\nThe `timestamp-ms` attribute specifies the date and time using the number of\nmilliseconds since 1970-01-01T0:00:00.000Z\n\n#### `timestamp-seconds`\n\nThe `timestamp-seconds` attribute specifies the date and time using the number\nof seconds since 1970-01-01T0:00:00.000Z\n\n#### `locale` (optional)\n\nAn internationalization language string for each timer unit. The default value\nis `en` (for English). This attribute supports all values that are supported by\nthe user's browser.\n\n#### `display-in` (optional)\n\nIf set to the value `utc`, the `display-in` attribute will convert the given\ndate to UTC.\n\n#### `offset-seconds` (optional)\n\nThe `offset-seconds` attribute specifies an integer number of seconds to shift\nthe given date.\n\n#### `data-options-\\*` (optional)\n\nThe `data-options-*` supports all the options under [Intl.DateTimeFormat.options](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/DateTimeFormat#parameters)\nparameter that specifies the formatting style to use for `localeString` format.\nValid attributes include: `data-options-date-style`, `data-options-time-style`, etc.\n\nNote that if `display-in` attrubute is set to `utc`, the value of\n`data-options-time-zone` will automatically be converted to `UTC`.\n\n### Styling\n\nYou may use the `bento-date-display` element selector to style the Bento Date Display component freely.\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/date-display\n```\n\n```javascript\nimport React from 'react';\nimport {BentoDateDisplay} from '@bentoproject/date-display/react';\nimport '@bentoproject/date-display/styles.css';\n\nfunction App() {\n return (\n (\n
{`ISO: ${date.iso}; locale: ${date.localeString}`}
\n )}\n />\n );\n}\n```\n\n### Interactivity and API usage\n\nThe Bento Date Display component does not have an imperative API. However, the Bento Date Display Preact/React component does accept a `render` prop that renders the consumer's template. This `render` prop should be a function which the Bento Date Display Preact/React component can use to render its template. The `render` callback will be provided a variety of date-related parameters for consumers to interpolate in the rendered template. See the [`render` prop section](#render) for more information.\n\n### Layout and style\n\nThe Bento Date Display Preact/React component allows consumers to render their own templates. These templates may use inline styles, `\n```\n\n### Attributes\n\n#### `datetime`\n\nThe `datetime` attribute specifies the date and time in a standard ISO 8601 date\nstring (e.g. 2017-08-02T15:05:05.000Z) or the string `now`. If set to `now`,\n`bento-date-display` will use the time the page loaded to render its template.\n\n#### `timestamp-ms`\n\nThe `timestamp-ms` attribute specifies the date and time using the number of\nmilliseconds since 1970-01-01T0:00:00.000Z\n\n#### `timestamp-seconds`\n\nThe `timestamp-seconds` attribute specifies the date and time using the number\nof seconds since 1970-01-01T0:00:00.000Z\n\n#### `locale` (optional)\n\nAn internationalization language string for each timer unit. The default value\nis `en` (for English). This attribute supports all values that are supported by\nthe user's browser.\n\n#### `display-in` (optional)\n\nIf set to the value `utc`, the `display-in` attribute will convert the given\ndate to UTC.\n\n#### `offset-seconds` (optional)\n\nThe `offset-seconds` attribute specifies an integer number of seconds to shift\nthe given date.\n\n#### `data-options-\\*` (optional)\n\nThe `data-options-*` supports all the options under [Intl.DateTimeFormat.options](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/DateTimeFormat#parameters)\nparameter that specifies the formatting style to use for `localeString` format.\nValid attributes include: `data-options-date-style`, `data-options-time-style`, etc.\n\nNote that if `display-in` attrubute is set to `utc`, the value of\n`data-options-time-zone` will automatically be converted to `UTC`.\n\n### Styling\n\nYou may use the `bento-date-display` element selector to style the Bento Date Display component freely.\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/date-display\n```\n\n```javascript\nimport React from 'react';\nimport {BentoDateDisplay} from '@bentoproject/date-display/react';\nimport '@bentoproject/date-display/styles.css';\n\nfunction App() {\n return (\n (\n
{`ISO: ${date.iso}; locale: ${date.localeString}`}
\n )}\n />\n );\n}\n```\n\n### Interactivity and API usage\n\nThe Bento Date Display component does not have an imperative API. However, the Bento Date Display Preact/React component does accept a `render` prop that renders the consumer's template. This `render` prop should be a function which the Bento Date Display Preact/React component can use to render its template. The `render` callback will be provided a variety of date-related parameters for consumers to interpolate in the rendered template. See the [`render` prop section](#render) for more information.\n\n### Layout and style\n\nThe Bento Date Display Preact/React component allows consumers to render their own templates. These templates may use inline styles, `\n```\n\n### Attributes\n\n#### `datetime`\n\nThe `datetime` attribute specifies the date and time in a standard ISO 8601 date\nstring (e.g. 2017-08-02T15:05:05.000Z) or the string `now`. If set to `now`,\n`bento-date-display` will use the time the page loaded to render its template.\n\n#### `timestamp-ms`\n\nThe `timestamp-ms` attribute specifies the date and time using the number of\nmilliseconds since 1970-01-01T0:00:00.000Z\n\n#### `timestamp-seconds`\n\nThe `timestamp-seconds` attribute specifies the date and time using the number\nof seconds since 1970-01-01T0:00:00.000Z\n\n#### `locale` (optional)\n\nAn internationalization language string for each timer unit. The default value\nis `en` (for English). This attribute supports all values that are supported by\nthe user's browser.\n\n#### `display-in` (optional)\n\nIf set to the value `utc`, the `display-in` attribute will convert the given\ndate to UTC.\n\n#### `offset-seconds` (optional)\n\nThe `offset-seconds` attribute specifies an integer number of seconds to shift\nthe given date.\n\n#### `data-options-\\*` (optional)\n\nThe `data-options-*` supports all the options under [Intl.DateTimeFormat.options](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/DateTimeFormat#parameters)\nparameter that specifies the formatting style to use for `localeString` format.\nValid attributes include: `data-options-date-style`, `data-options-time-style`, etc.\n\nNote that if `display-in` attrubute is set to `utc`, the value of\n`data-options-time-zone` will automatically be converted to `UTC`.\n\n### Styling\n\nYou may use the `bento-date-display` element selector to style the Bento Date Display component freely.\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/date-display\n```\n\n```javascript\nimport React from 'react';\nimport {BentoDateDisplay} from '@bentoproject/date-display/react';\nimport '@bentoproject/date-display/styles.css';\n\nfunction App() {\n return (\n (\n
{`ISO: ${date.iso}; locale: ${date.localeString}`}
\n )}\n />\n );\n}\n```\n\n### Interactivity and API usage\n\nThe Bento Date Display component does not have an imperative API. However, the Bento Date Display Preact/React component does accept a `render` prop that renders the consumer's template. This `render` prop should be a function which the Bento Date Display Preact/React component can use to render its template. The `render` callback will be provided a variety of date-related parameters for consumers to interpolate in the rendered template. See the [`render` prop section](#render) for more information.\n\n### Layout and style\n\nThe Bento Date Display Preact/React component allows consumers to render their own templates. These templates may use inline styles, `\n```\n\n### Attributes\n\n#### `datetime`\n\nThe `datetime` attribute specifies the date and time in a standard ISO 8601 date\nstring (e.g. 2017-08-02T15:05:05.000Z) or the string `now`. If set to `now`,\n`bento-date-display` will use the time the page loaded to render its template.\n\n#### `timestamp-ms`\n\nThe `timestamp-ms` attribute specifies the date and time using the number of\nmilliseconds since 1970-01-01T0:00:00.000Z\n\n#### `timestamp-seconds`\n\nThe `timestamp-seconds` attribute specifies the date and time using the number\nof seconds since 1970-01-01T0:00:00.000Z\n\n#### `locale` (optional)\n\nAn internationalization language string for each timer unit. The default value\nis `en` (for English). This attribute supports all values that are supported by\nthe user's browser.\n\n#### `display-in` (optional)\n\nIf set to the value `utc`, the `display-in` attribute will convert the given\ndate to UTC.\n\n#### `offset-seconds` (optional)\n\nThe `offset-seconds` attribute specifies an integer number of seconds to shift\nthe given date.\n\n#### `data-options-\\*` (optional)\n\nThe `data-options-*` supports all the options under [Intl.DateTimeFormat.options](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/DateTimeFormat#parameters)\nparameter that specifies the formatting style to use for `localeString` format.\nValid attributes include: `data-options-date-style`, `data-options-time-style`, etc.\n\nNote that if `display-in` attrubute is set to `utc`, the value of\n`data-options-time-zone` will automatically be converted to `UTC`.\n\n### Styling\n\nYou may use the `bento-date-display` element selector to style the Bento Date Display component freely.\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/date-display\n```\n\n```javascript\nimport React from 'react';\nimport {BentoDateDisplay} from '@bentoproject/date-display/react';\nimport '@bentoproject/date-display/styles.css';\n\nfunction App() {\n return (\n (\n
{`ISO: ${date.iso}; locale: ${date.localeString}`}
\n )}\n />\n );\n}\n```\n\n### Interactivity and API usage\n\nThe Bento Date Display component does not have an imperative API. However, the Bento Date Display Preact/React component does accept a `render` prop that renders the consumer's template. This `render` prop should be a function which the Bento Date Display Preact/React component can use to render its template. The `render` callback will be provided a variety of date-related parameters for consumers to interpolate in the rendered template. See the [`render` prop section](#render) for more information.\n\n### Layout and style\n\nThe Bento Date Display Preact/React component allows consumers to render their own templates. These templates may use inline styles, `\n```\n\n### Attributes\n\n#### `datetime`\n\nThe `datetime` attribute specifies the date and time in a standard ISO 8601 date\nstring (e.g. 2017-08-02T15:05:05.000Z) or the string `now`. If set to `now`,\n`bento-date-display` will use the time the page loaded to render its template.\n\n#### `timestamp-ms`\n\nThe `timestamp-ms` attribute specifies the date and time using the number of\nmilliseconds since 1970-01-01T0:00:00.000Z\n\n#### `timestamp-seconds`\n\nThe `timestamp-seconds` attribute specifies the date and time using the number\nof seconds since 1970-01-01T0:00:00.000Z\n\n#### `locale` (optional)\n\nAn internationalization language string for each timer unit. The default value\nis `en` (for English). This attribute supports all values that are supported by\nthe user's browser.\n\n#### `display-in` (optional)\n\nIf set to the value `utc`, the `display-in` attribute will convert the given\ndate to UTC.\n\n#### `offset-seconds` (optional)\n\nThe `offset-seconds` attribute specifies an integer number of seconds to shift\nthe given date.\n\n#### `data-options-\\*` (optional)\n\nThe `data-options-*` supports all the options under [Intl.DateTimeFormat.options](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/DateTimeFormat#parameters)\nparameter that specifies the formatting style to use for `localeString` format.\nValid attributes include: `data-options-date-style`, `data-options-time-style`, etc.\n\nNote that if `display-in` attrubute is set to `utc`, the value of\n`data-options-time-zone` will automatically be converted to `UTC`.\n\n### Styling\n\nYou may use the `bento-date-display` element selector to style the Bento Date Display component freely.\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/date-display\n```\n\n```javascript\nimport React from 'react';\nimport {BentoDateDisplay} from '@bentoproject/date-display/react';\nimport '@bentoproject/date-display/styles.css';\n\nfunction App() {\n return (\n (\n
{`ISO: ${date.iso}; locale: ${date.localeString}`}
\n )}\n />\n );\n}\n```\n\n### Interactivity and API usage\n\nThe Bento Date Display component does not have an imperative API. However, the Bento Date Display Preact/React component does accept a `render` prop that renders the consumer's template. This `render` prop should be a function which the Bento Date Display Preact/React component can use to render its template. The `render` callback will be provided a variety of date-related parameters for consumers to interpolate in the rendered template. See the [`render` prop section](#render) for more information.\n\n### Layout and style\n\nThe Bento Date Display Preact/React component allows consumers to render their own templates. These templates may use inline styles, `\n```\n\n### Attributes\n\n#### `datetime`\n\nThe `datetime` attribute specifies the date and time in a standard ISO 8601 date\nstring (e.g. 2017-08-02T15:05:05.000Z) or the string `now`. If set to `now`,\n`bento-date-display` will use the time the page loaded to render its template.\n\n#### `timestamp-ms`\n\nThe `timestamp-ms` attribute specifies the date and time using the number of\nmilliseconds since 1970-01-01T0:00:00.000Z\n\n#### `timestamp-seconds`\n\nThe `timestamp-seconds` attribute specifies the date and time using the number\nof seconds since 1970-01-01T0:00:00.000Z\n\n#### `locale` (optional)\n\nAn internationalization language string for each timer unit. The default value\nis `en` (for English). This attribute supports all values that are supported by\nthe user's browser.\n\n#### `display-in` (optional)\n\nIf set to the value `utc`, the `display-in` attribute will convert the given\ndate to UTC.\n\n#### `offset-seconds` (optional)\n\nThe `offset-seconds` attribute specifies an integer number of seconds to shift\nthe given date.\n\n#### `data-options-\\*` (optional)\n\nThe `data-options-*` supports all the options under [Intl.DateTimeFormat.options](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/DateTimeFormat#parameters)\nparameter that specifies the formatting style to use for `localeString` format.\nValid attributes include: `data-options-date-style`, `data-options-time-style`, etc.\n\nNote that if `display-in` attrubute is set to `utc`, the value of\n`data-options-time-zone` will automatically be converted to `UTC`.\n\n### Styling\n\nYou may use the `bento-date-display` element selector to style the Bento Date Display component freely.\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/date-display\n```\n\n```javascript\nimport React from 'react';\nimport {BentoDateDisplay} from '@bentoproject/date-display/react';\nimport '@bentoproject/date-display/styles.css';\n\nfunction App() {\n return (\n (\n
{`ISO: ${date.iso}; locale: ${date.localeString}`}
\n )}\n />\n );\n}\n```\n\n### Interactivity and API usage\n\nThe Bento Date Display component does not have an imperative API. However, the Bento Date Display Preact/React component does accept a `render` prop that renders the consumer's template. This `render` prop should be a function which the Bento Date Display Preact/React component can use to render its template. The `render` callback will be provided a variety of date-related parameters for consumers to interpolate in the rendered template. See the [`render` prop section](#render) for more information.\n\n### Layout and style\n\nThe Bento Date Display Preact/React component allows consumers to render their own templates. These templates may use inline styles, `\n```\n\n### Attributes\n\n#### `datetime`\n\nThe `datetime` attribute specifies the date and time in a standard ISO 8601 date\nstring (e.g. 2017-08-02T15:05:05.000Z) or the string `now`. If set to `now`,\n`bento-date-display` will use the time the page loaded to render its template.\n\n#### `timestamp-ms`\n\nThe `timestamp-ms` attribute specifies the date and time using the number of\nmilliseconds since 1970-01-01T0:00:00.000Z\n\n#### `timestamp-seconds`\n\nThe `timestamp-seconds` attribute specifies the date and time using the number\nof seconds since 1970-01-01T0:00:00.000Z\n\n#### `locale` (optional)\n\nAn internationalization language string for each timer unit. The default value\nis `en` (for English). This attribute supports all values that are supported by\nthe user's browser.\n\n#### `display-in` (optional)\n\nIf set to the value `utc`, the `display-in` attribute will convert the given\ndate to UTC.\n\n#### `offset-seconds` (optional)\n\nThe `offset-seconds` attribute specifies an integer number of seconds to shift\nthe given date.\n\n#### `data-options-\\*` (optional)\n\nThe `data-options-*` supports all the options under [Intl.DateTimeFormat.options](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/DateTimeFormat#parameters)\nparameter that specifies the formatting style to use for `localeString` format.\nValid attributes include: `data-options-date-style`, `data-options-time-style`, etc.\n\nNote that if `display-in` attrubute is set to `utc`, the value of\n`data-options-time-zone` will automatically be converted to `UTC`.\n\n### Styling\n\nYou may use the `bento-date-display` element selector to style the Bento Date Display component freely.\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/date-display\n```\n\n```javascript\nimport React from 'react';\nimport {BentoDateDisplay} from '@bentoproject/date-display/react';\nimport '@bentoproject/date-display/styles.css';\n\nfunction App() {\n return (\n (\n
{`ISO: ${date.iso}; locale: ${date.localeString}`}
\n )}\n />\n );\n}\n```\n\n### Interactivity and API usage\n\nThe Bento Date Display component does not have an imperative API. However, the Bento Date Display Preact/React component does accept a `render` prop that renders the consumer's template. This `render` prop should be a function which the Bento Date Display Preact/React component can use to render its template. The `render` callback will be provided a variety of date-related parameters for consumers to interpolate in the rendered template. See the [`render` prop section](#render) for more information.\n\n### Layout and style\n\nThe Bento Date Display Preact/React component allows consumers to render their own templates. These templates may use inline styles, `\n```\n\n### Attributes\n\n#### `datetime`\n\nThe `datetime` attribute specifies the date and time in a standard ISO 8601 date\nstring (e.g. 2017-08-02T15:05:05.000Z) or the string `now`. If set to `now`,\n`bento-date-display` will use the time the page loaded to render its template.\n\n#### `timestamp-ms`\n\nThe `timestamp-ms` attribute specifies the date and time using the number of\nmilliseconds since 1970-01-01T0:00:00.000Z\n\n#### `timestamp-seconds`\n\nThe `timestamp-seconds` attribute specifies the date and time using the number\nof seconds since 1970-01-01T0:00:00.000Z\n\n#### `locale` (optional)\n\nAn internationalization language string for each timer unit. The default value\nis `en` (for English). This attribute supports all values that are supported by\nthe user's browser.\n\n#### `display-in` (optional)\n\nIf set to the value `utc`, the `display-in` attribute will convert the given\ndate to UTC.\n\n#### `offset-seconds` (optional)\n\nThe `offset-seconds` attribute specifies an integer number of seconds to shift\nthe given date.\n\n#### `data-options-\\*` (optional)\n\nThe `data-options-*` supports all the options under [Intl.DateTimeFormat.options](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/DateTimeFormat#parameters)\nparameter that specifies the formatting style to use for `localeString` format.\nValid attributes include: `data-options-date-style`, `data-options-time-style`, etc.\n\nNote that if `display-in` attrubute is set to `utc`, the value of\n`data-options-time-zone` will automatically be converted to `UTC`.\n\n### Styling\n\nYou may use the `bento-date-display` element selector to style the Bento Date Display component freely.\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/date-display\n```\n\n```javascript\nimport React from 'react';\nimport {BentoDateDisplay} from '@bentoproject/date-display/react';\nimport '@bentoproject/date-display/styles.css';\n\nfunction App() {\n return (\n (\n
{`ISO: ${date.iso}; locale: ${date.localeString}`}
\n )}\n />\n );\n}\n```\n\n### Interactivity and API usage\n\nThe Bento Date Display component does not have an imperative API. However, the Bento Date Display Preact/React component does accept a `render` prop that renders the consumer's template. This `render` prop should be a function which the Bento Date Display Preact/React component can use to render its template. The `render` callback will be provided a variety of date-related parameters for consumers to interpolate in the rendered template. See the [`render` prop section](#render) for more information.\n\n### Layout and style\n\nThe Bento Date Display Preact/React component allows consumers to render their own templates. These templates may use inline styles, `\n```\n\n### Attributes\n\n#### `datetime`\n\nThe `datetime` attribute specifies the date and time in a standard ISO 8601 date\nstring (e.g. 2017-08-02T15:05:05.000Z) or the string `now`. If set to `now`,\n`bento-date-display` will use the time the page loaded to render its template.\n\n#### `timestamp-ms`\n\nThe `timestamp-ms` attribute specifies the date and time using the number of\nmilliseconds since 1970-01-01T0:00:00.000Z\n\n#### `timestamp-seconds`\n\nThe `timestamp-seconds` attribute specifies the date and time using the number\nof seconds since 1970-01-01T0:00:00.000Z\n\n#### `locale` (optional)\n\nAn internationalization language string for each timer unit. The default value\nis `en` (for English). This attribute supports all values that are supported by\nthe user's browser.\n\n#### `display-in` (optional)\n\nIf set to the value `utc`, the `display-in` attribute will convert the given\ndate to UTC.\n\n#### `offset-seconds` (optional)\n\nThe `offset-seconds` attribute specifies an integer number of seconds to shift\nthe given date.\n\n#### `data-options-\\*` (optional)\n\nThe `data-options-*` supports all the options under [Intl.DateTimeFormat.options](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/DateTimeFormat#parameters)\nparameter that specifies the formatting style to use for `localeString` format.\nValid attributes include: `data-options-date-style`, `data-options-time-style`, etc.\n\nNote that if `display-in` attrubute is set to `utc`, the value of\n`data-options-time-zone` will automatically be converted to `UTC`.\n\n### Styling\n\nYou may use the `bento-date-display` element selector to style the Bento Date Display component freely.\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/date-display\n```\n\n```javascript\nimport React from 'react';\nimport {BentoDateDisplay} from '@bentoproject/date-display/react';\nimport '@bentoproject/date-display/styles.css';\n\nfunction App() {\n return (\n (\n
{`ISO: ${date.iso}; locale: ${date.localeString}`}
\n )}\n />\n );\n}\n```\n\n### Interactivity and API usage\n\nThe Bento Date Display component does not have an imperative API. However, the Bento Date Display Preact/React component does accept a `render` prop that renders the consumer's template. This `render` prop should be a function which the Bento Date Display Preact/React component can use to render its template. The `render` callback will be provided a variety of date-related parameters for consumers to interpolate in the rendered template. See the [`render` prop section](#render) for more information.\n\n### Layout and style\n\nThe Bento Date Display Preact/React component allows consumers to render their own templates. These templates may use inline styles, `\n```\n\n### Attributes\n\n#### `datetime`\n\nThe `datetime` attribute specifies the date and time in a standard ISO 8601 date\nstring (e.g. 2017-08-02T15:05:05.000Z) or the string `now`. If set to `now`,\n`bento-date-display` will use the time the page loaded to render its template.\n\n#### `timestamp-ms`\n\nThe `timestamp-ms` attribute specifies the date and time using the number of\nmilliseconds since 1970-01-01T0:00:00.000Z\n\n#### `timestamp-seconds`\n\nThe `timestamp-seconds` attribute specifies the date and time using the number\nof seconds since 1970-01-01T0:00:00.000Z\n\n#### `locale` (optional)\n\nAn internationalization language string for each timer unit. The default value\nis `en` (for English). This attribute supports all values that are supported by\nthe user's browser.\n\n#### `display-in` (optional)\n\nIf set to the value `utc`, the `display-in` attribute will convert the given\ndate to UTC.\n\n#### `offset-seconds` (optional)\n\nThe `offset-seconds` attribute specifies an integer number of seconds to shift\nthe given date.\n\n#### `data-options-\\*` (optional)\n\nThe `data-options-*` supports all the options under [Intl.DateTimeFormat.options](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/DateTimeFormat#parameters)\nparameter that specifies the formatting style to use for `localeString` format.\nValid attributes include: `data-options-date-style`, `data-options-time-style`, etc.\n\nNote that if `display-in` attrubute is set to `utc`, the value of\n`data-options-time-zone` will automatically be converted to `UTC`.\n\n### Styling\n\nYou may use the `bento-date-display` element selector to style the Bento Date Display component freely.\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/date-display\n```\n\n```javascript\nimport React from 'react';\nimport {BentoDateDisplay} from '@bentoproject/date-display/react';\nimport '@bentoproject/date-display/styles.css';\n\nfunction App() {\n return (\n (\n
{`ISO: ${date.iso}; locale: ${date.localeString}`}
\n )}\n />\n );\n}\n```\n\n### Interactivity and API usage\n\nThe Bento Date Display component does not have an imperative API. However, the Bento Date Display Preact/React component does accept a `render` prop that renders the consumer's template. This `render` prop should be a function which the Bento Date Display Preact/React component can use to render its template. The `render` callback will be provided a variety of date-related parameters for consumers to interpolate in the rendered template. See the [`render` prop section](#render) for more information.\n\n### Layout and style\n\nThe Bento Date Display Preact/React component allows consumers to render their own templates. These templates may use inline styles, `\n```\n\n### Attributes\n\n#### `datetime`\n\nThe `datetime` attribute specifies the date and time in a standard ISO 8601 date\nstring (e.g. 2017-08-02T15:05:05.000Z) or the string `now`. If set to `now`,\n`bento-date-display` will use the time the page loaded to render its template.\n\n#### `timestamp-ms`\n\nThe `timestamp-ms` attribute specifies the date and time using the number of\nmilliseconds since 1970-01-01T0:00:00.000Z\n\n#### `timestamp-seconds`\n\nThe `timestamp-seconds` attribute specifies the date and time using the number\nof seconds since 1970-01-01T0:00:00.000Z\n\n#### `locale` (optional)\n\nAn internationalization language string for each timer unit. The default value\nis `en` (for English). This attribute supports all values that are supported by\nthe user's browser.\n\n#### `display-in` (optional)\n\nIf set to the value `utc`, the `display-in` attribute will convert the given\ndate to UTC.\n\n#### `offset-seconds` (optional)\n\nThe `offset-seconds` attribute specifies an integer number of seconds to shift\nthe given date.\n\n#### `data-options-\\*` (optional)\n\nThe `data-options-*` supports all the options under [Intl.DateTimeFormat.options](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/DateTimeFormat#parameters)\nparameter that specifies the formatting style to use for `localeString` format.\nValid attributes include: `data-options-date-style`, `data-options-time-style`, etc.\n\nNote that if `display-in` attrubute is set to `utc`, the value of\n`data-options-time-zone` will automatically be converted to `UTC`.\n\n### Styling\n\nYou may use the `bento-date-display` element selector to style the Bento Date Display component freely.\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/date-display\n```\n\n```javascript\nimport React from 'react';\nimport {BentoDateDisplay} from '@bentoproject/date-display/react';\nimport '@bentoproject/date-display/styles.css';\n\nfunction App() {\n return (\n (\n
{`ISO: ${date.iso}; locale: ${date.localeString}`}
\n )}\n />\n );\n}\n```\n\n### Interactivity and API usage\n\nThe Bento Date Display component does not have an imperative API. However, the Bento Date Display Preact/React component does accept a `render` prop that renders the consumer's template. This `render` prop should be a function which the Bento Date Display Preact/React component can use to render its template. The `render` callback will be provided a variety of date-related parameters for consumers to interpolate in the rendered template. See the [`render` prop section](#render) for more information.\n\n### Layout and style\n\nThe Bento Date Display Preact/React component allows consumers to render their own templates. These templates may use inline styles, `\n```\n\n### Attributes\n\n#### `datetime`\n\nThe `datetime` attribute specifies the date and time in a standard ISO 8601 date\nstring (e.g. 2017-08-02T15:05:05.000Z) or the string `now`. If set to `now`,\n`bento-date-display` will use the time the page loaded to render its template.\n\n#### `timestamp-ms`\n\nThe `timestamp-ms` attribute specifies the date and time using the number of\nmilliseconds since 1970-01-01T0:00:00.000Z\n\n#### `timestamp-seconds`\n\nThe `timestamp-seconds` attribute specifies the date and time using the number\nof seconds since 1970-01-01T0:00:00.000Z\n\n#### `locale` (optional)\n\nAn internationalization language string for each timer unit. The default value\nis `en` (for English). This attribute supports all values that are supported by\nthe user's browser.\n\n#### `display-in` (optional)\n\nIf set to the value `utc`, the `display-in` attribute will convert the given\ndate to UTC.\n\n#### `offset-seconds` (optional)\n\nThe `offset-seconds` attribute specifies an integer number of seconds to shift\nthe given date.\n\n#### `data-options-\\*` (optional)\n\nThe `data-options-*` supports all the options under [Intl.DateTimeFormat.options](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/DateTimeFormat#parameters)\nparameter that specifies the formatting style to use for `localeString` format.\nValid attributes include: `data-options-date-style`, `data-options-time-style`, etc.\n\nNote that if `display-in` attrubute is set to `utc`, the value of\n`data-options-time-zone` will automatically be converted to `UTC`.\n\n### Styling\n\nYou may use the `bento-date-display` element selector to style the Bento Date Display component freely.\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/date-display\n```\n\n```javascript\nimport React from 'react';\nimport {BentoDateDisplay} from '@bentoproject/date-display/react';\nimport '@bentoproject/date-display/styles.css';\n\nfunction App() {\n return (\n (\n
{`ISO: ${date.iso}; locale: ${date.localeString}`}
\n )}\n />\n );\n}\n```\n\n### Interactivity and API usage\n\nThe Bento Date Display component does not have an imperative API. However, the Bento Date Display Preact/React component does accept a `render` prop that renders the consumer's template. This `render` prop should be a function which the Bento Date Display Preact/React component can use to render its template. The `render` callback will be provided a variety of date-related parameters for consumers to interpolate in the rendered template. See the [`render` prop section](#render) for more information.\n\n### Layout and style\n\nThe Bento Date Display Preact/React component allows consumers to render their own templates. These templates may use inline styles, `\n```\n\n### Attributes\n\n#### `datetime`\n\nThe `datetime` attribute specifies the date and time in a standard ISO 8601 date\nstring (e.g. 2017-08-02T15:05:05.000Z) or the string `now`. If set to `now`,\n`bento-date-display` will use the time the page loaded to render its template.\n\n#### `timestamp-ms`\n\nThe `timestamp-ms` attribute specifies the date and time using the number of\nmilliseconds since 1970-01-01T0:00:00.000Z\n\n#### `timestamp-seconds`\n\nThe `timestamp-seconds` attribute specifies the date and time using the number\nof seconds since 1970-01-01T0:00:00.000Z\n\n#### `locale` (optional)\n\nAn internationalization language string for each timer unit. The default value\nis `en` (for English). This attribute supports all values that are supported by\nthe user's browser.\n\n#### `display-in` (optional)\n\nIf set to the value `utc`, the `display-in` attribute will convert the given\ndate to UTC.\n\n#### `offset-seconds` (optional)\n\nThe `offset-seconds` attribute specifies an integer number of seconds to shift\nthe given date.\n\n#### `data-options-\\*` (optional)\n\nThe `data-options-*` supports all the options under [Intl.DateTimeFormat.options](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/DateTimeFormat#parameters)\nparameter that specifies the formatting style to use for `localeString` format.\nValid attributes include: `data-options-date-style`, `data-options-time-style`, etc.\n\nNote that if `display-in` attrubute is set to `utc`, the value of\n`data-options-time-zone` will automatically be converted to `UTC`.\n\n### Styling\n\nYou may use the `bento-date-display` element selector to style the Bento Date Display component freely.\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/date-display\n```\n\n```javascript\nimport React from 'react';\nimport {BentoDateDisplay} from '@bentoproject/date-display/react';\nimport '@bentoproject/date-display/styles.css';\n\nfunction App() {\n return (\n (\n
{`ISO: ${date.iso}; locale: ${date.localeString}`}
\n )}\n />\n );\n}\n```\n\n### Interactivity and API usage\n\nThe Bento Date Display component does not have an imperative API. However, the Bento Date Display Preact/React component does accept a `render` prop that renders the consumer's template. This `render` prop should be a function which the Bento Date Display Preact/React component can use to render its template. The `render` callback will be provided a variety of date-related parameters for consumers to interpolate in the rendered template. See the [`render` prop section](#render) for more information.\n\n### Layout and style\n\nThe Bento Date Display Preact/React component allows consumers to render their own templates. These templates may use inline styles, `\n```\n\n### Attributes\n\n#### `datetime`\n\nThe `datetime` attribute specifies the date and time in a standard ISO 8601 date\nstring (e.g. 2017-08-02T15:05:05.000Z) or the string `now`. If set to `now`,\n`bento-date-display` will use the time the page loaded to render its template.\n\n#### `timestamp-ms`\n\nThe `timestamp-ms` attribute specifies the date and time using the number of\nmilliseconds since 1970-01-01T0:00:00.000Z\n\n#### `timestamp-seconds`\n\nThe `timestamp-seconds` attribute specifies the date and time using the number\nof seconds since 1970-01-01T0:00:00.000Z\n\n#### `locale` (optional)\n\nAn internationalization language string for each timer unit. The default value\nis `en` (for English). This attribute supports all values that are supported by\nthe user's browser.\n\n#### `display-in` (optional)\n\nIf set to the value `utc`, the `display-in` attribute will convert the given\ndate to UTC.\n\n#### `offset-seconds` (optional)\n\nThe `offset-seconds` attribute specifies an integer number of seconds to shift\nthe given date.\n\n#### `data-options-\\*` (optional)\n\nThe `data-options-*` supports all the options under [Intl.DateTimeFormat.options](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/DateTimeFormat#parameters)\nparameter that specifies the formatting style to use for `localeString` format.\nValid attributes include: `data-options-date-style`, `data-options-time-style`, etc.\n\nNote that if `display-in` attrubute is set to `utc`, the value of\n`data-options-time-zone` will automatically be converted to `UTC`.\n\n### Styling\n\nYou may use the `bento-date-display` element selector to style the Bento Date Display component freely.\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/date-display\n```\n\n```javascript\nimport React from 'react';\nimport {BentoDateDisplay} from '@bentoproject/date-display/react';\nimport '@bentoproject/date-display/styles.css';\n\nfunction App() {\n return (\n (\n
{`ISO: ${date.iso}; locale: ${date.localeString}`}
\n )}\n />\n );\n}\n```\n\n### Interactivity and API usage\n\nThe Bento Date Display component does not have an imperative API. However, the Bento Date Display Preact/React component does accept a `render` prop that renders the consumer's template. This `render` prop should be a function which the Bento Date Display Preact/React component can use to render its template. The `render` callback will be provided a variety of date-related parameters for consumers to interpolate in the rendered template. See the [`render` prop section](#render) for more information.\n\n### Layout and style\n\nThe Bento Date Display Preact/React component allows consumers to render their own templates. These templates may use inline styles, `\n```\n\n### Attributes\n\n#### `datetime`\n\nThe `datetime` attribute specifies the date and time in a standard ISO 8601 date\nstring (e.g. 2017-08-02T15:05:05.000Z) or the string `now`. If set to `now`,\n`bento-date-display` will use the time the page loaded to render its template.\n\n#### `timestamp-ms`\n\nThe `timestamp-ms` attribute specifies the date and time using the number of\nmilliseconds since 1970-01-01T0:00:00.000Z\n\n#### `timestamp-seconds`\n\nThe `timestamp-seconds` attribute specifies the date and time using the number\nof seconds since 1970-01-01T0:00:00.000Z\n\n#### `locale` (optional)\n\nAn internationalization language string for each timer unit. The default value\nis `en` (for English). This attribute supports all values that are supported by\nthe user's browser.\n\n#### `display-in` (optional)\n\nIf set to the value `utc`, the `display-in` attribute will convert the given\ndate to UTC.\n\n#### `offset-seconds` (optional)\n\nThe `offset-seconds` attribute specifies an integer number of seconds to shift\nthe given date.\n\n#### `data-options-\\*` (optional)\n\nThe `data-options-*` supports all the options under [Intl.DateTimeFormat.options](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/DateTimeFormat#parameters)\nparameter that specifies the formatting style to use for `localeString` format.\nValid attributes include: `data-options-date-style`, `data-options-time-style`, etc.\n\nNote that if `display-in` attrubute is set to `utc`, the value of\n`data-options-time-zone` will automatically be converted to `UTC`.\n\n### Styling\n\nYou may use the `bento-date-display` element selector to style the Bento Date Display component freely.\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/date-display\n```\n\n```javascript\nimport React from 'react';\nimport {BentoDateDisplay} from '@bentoproject/date-display/react';\nimport '@bentoproject/date-display/styles.css';\n\nfunction App() {\n return (\n (\n
{`ISO: ${date.iso}; locale: ${date.localeString}`}
\n )}\n />\n );\n}\n```\n\n### Interactivity and API usage\n\nThe Bento Date Display component does not have an imperative API. However, the Bento Date Display Preact/React component does accept a `render` prop that renders the consumer's template. This `render` prop should be a function which the Bento Date Display Preact/React component can use to render its template. The `render` callback will be provided a variety of date-related parameters for consumers to interpolate in the rendered template. See the [`render` prop section](#render) for more information.\n\n### Layout and style\n\nThe Bento Date Display Preact/React component allows consumers to render their own templates. These templates may use inline styles, `\n```\n\n### Attributes\n\n#### `datetime`\n\nThe `datetime` attribute specifies the date and time in a standard ISO 8601 date\nstring (e.g. 2017-08-02T15:05:05.000Z) or the string `now`. If set to `now`,\n`bento-date-display` will use the time the page loaded to render its template.\n\n#### `timestamp-ms`\n\nThe `timestamp-ms` attribute specifies the date and time using the number of\nmilliseconds since 1970-01-01T0:00:00.000Z\n\n#### `timestamp-seconds`\n\nThe `timestamp-seconds` attribute specifies the date and time using the number\nof seconds since 1970-01-01T0:00:00.000Z\n\n#### `locale` (optional)\n\nAn internationalization language string for each timer unit. The default value\nis `en` (for English). This attribute supports all values that are supported by\nthe user's browser.\n\n#### `display-in` (optional)\n\nIf set to the value `utc`, the `display-in` attribute will convert the given\ndate to UTC.\n\n#### `offset-seconds` (optional)\n\nThe `offset-seconds` attribute specifies an integer number of seconds to shift\nthe given date.\n\n#### `data-options-\\*` (optional)\n\nThe `data-options-*` supports all the options under [Intl.DateTimeFormat.options](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/DateTimeFormat#parameters)\nparameter that specifies the formatting style to use for `localeString` format.\nValid attributes include: `data-options-date-style`, `data-options-time-style`, etc.\n\nNote that if `display-in` attrubute is set to `utc`, the value of\n`data-options-time-zone` will automatically be converted to `UTC`.\n\n### Styling\n\nYou may use the `bento-date-display` element selector to style the Bento Date Display component freely.\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/date-display\n```\n\n```javascript\nimport React from 'react';\nimport {BentoDateDisplay} from '@bentoproject/date-display/react';\nimport '@bentoproject/date-display/styles.css';\n\nfunction App() {\n return (\n (\n
{`ISO: ${date.iso}; locale: ${date.localeString}`}
\n )}\n />\n );\n}\n```\n\n### Interactivity and API usage\n\nThe Bento Date Display component does not have an imperative API. However, the Bento Date Display Preact/React component does accept a `render` prop that renders the consumer's template. This `render` prop should be a function which the Bento Date Display Preact/React component can use to render its template. The `render` callback will be provided a variety of date-related parameters for consumers to interpolate in the rendered template. See the [`render` prop section](#render) for more information.\n\n### Layout and style\n\nThe Bento Date Display Preact/React component allows consumers to render their own templates. These templates may use inline styles, `\n```\n\n### Attributes\n\n#### `datetime`\n\nThe `datetime` attribute specifies the date and time in a standard ISO 8601 date\nstring (e.g. 2017-08-02T15:05:05.000Z) or the string `now`. If set to `now`,\n`bento-date-display` will use the time the page loaded to render its template.\n\n#### `timestamp-ms`\n\nThe `timestamp-ms` attribute specifies the date and time using the number of\nmilliseconds since 1970-01-01T0:00:00.000Z\n\n#### `timestamp-seconds`\n\nThe `timestamp-seconds` attribute specifies the date and time using the number\nof seconds since 1970-01-01T0:00:00.000Z\n\n#### `locale` (optional)\n\nAn internationalization language string for each timer unit. The default value\nis `en` (for English). This attribute supports all values that are supported by\nthe user's browser.\n\n#### `display-in` (optional)\n\nIf set to the value `utc`, the `display-in` attribute will convert the given\ndate to UTC.\n\n#### `offset-seconds` (optional)\n\nThe `offset-seconds` attribute specifies an integer number of seconds to shift\nthe given date.\n\n#### `data-options-\\*` (optional)\n\nThe `data-options-*` supports all the options under [Intl.DateTimeFormat.options](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/DateTimeFormat#parameters)\nparameter that specifies the formatting style to use for `localeString` format.\nValid attributes include: `data-options-date-style`, `data-options-time-style`, etc.\n\nNote that if `display-in` attrubute is set to `utc`, the value of\n`data-options-time-zone` will automatically be converted to `UTC`.\n\n### Styling\n\nYou may use the `bento-date-display` element selector to style the Bento Date Display component freely.\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/date-display\n```\n\n```javascript\nimport React from 'react';\nimport {BentoDateDisplay} from '@bentoproject/date-display/react';\nimport '@bentoproject/date-display/styles.css';\n\nfunction App() {\n return (\n (\n
{`ISO: ${date.iso}; locale: ${date.localeString}`}
\n )}\n />\n );\n}\n```\n\n### Interactivity and API usage\n\nThe Bento Date Display component does not have an imperative API. However, the Bento Date Display Preact/React component does accept a `render` prop that renders the consumer's template. This `render` prop should be a function which the Bento Date Display Preact/React component can use to render its template. The `render` callback will be provided a variety of date-related parameters for consumers to interpolate in the rendered template. See the [`render` prop section](#render) for more information.\n\n### Layout and style\n\nThe Bento Date Display Preact/React component allows consumers to render their own templates. These templates may use inline styles, `\n```\n\n### Attributes\n\n#### `datetime`\n\nThe `datetime` attribute specifies the date and time in a standard ISO 8601 date\nstring (e.g. 2017-08-02T15:05:05.000Z) or the string `now`. If set to `now`,\n`bento-date-display` will use the time the page loaded to render its template.\n\n#### `timestamp-ms`\n\nThe `timestamp-ms` attribute specifies the date and time using the number of\nmilliseconds since 1970-01-01T0:00:00.000Z\n\n#### `timestamp-seconds`\n\nThe `timestamp-seconds` attribute specifies the date and time using the number\nof seconds since 1970-01-01T0:00:00.000Z\n\n#### `locale` (optional)\n\nAn internationalization language string for each timer unit. The default value\nis `en` (for English). This attribute supports all values that are supported by\nthe user's browser.\n\n#### `display-in` (optional)\n\nIf set to the value `utc`, the `display-in` attribute will convert the given\ndate to UTC.\n\n#### `offset-seconds` (optional)\n\nThe `offset-seconds` attribute specifies an integer number of seconds to shift\nthe given date.\n\n#### `data-options-\\*` (optional)\n\nThe `data-options-*` supports all the options under [Intl.DateTimeFormat.options](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/DateTimeFormat#parameters)\nparameter that specifies the formatting style to use for `localeString` format.\nValid attributes include: `data-options-date-style`, `data-options-time-style`, etc.\n\nNote that if `display-in` attrubute is set to `utc`, the value of\n`data-options-time-zone` will automatically be converted to `UTC`.\n\n### Styling\n\nYou may use the `bento-date-display` element selector to style the Bento Date Display component freely.\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/date-display\n```\n\n```javascript\nimport React from 'react';\nimport {BentoDateDisplay} from '@bentoproject/date-display/react';\nimport '@bentoproject/date-display/styles.css';\n\nfunction App() {\n return (\n (\n
{`ISO: ${date.iso}; locale: ${date.localeString}`}
\n )}\n />\n );\n}\n```\n\n### Interactivity and API usage\n\nThe Bento Date Display component does not have an imperative API. However, the Bento Date Display Preact/React component does accept a `render` prop that renders the consumer's template. This `render` prop should be a function which the Bento Date Display Preact/React component can use to render its template. The `render` callback will be provided a variety of date-related parameters for consumers to interpolate in the rendered template. See the [`render` prop section](#render) for more information.\n\n### Layout and style\n\nThe Bento Date Display Preact/React component allows consumers to render their own templates. These templates may use inline styles, `\n```\n\n### Attributes\n\n#### `datetime`\n\nThe `datetime` attribute specifies the date and time in a standard ISO 8601 date\nstring (e.g. 2017-08-02T15:05:05.000Z) or the string `now`. If set to `now`,\n`bento-date-display` will use the time the page loaded to render its template.\n\n#### `timestamp-ms`\n\nThe `timestamp-ms` attribute specifies the date and time using the number of\nmilliseconds since 1970-01-01T0:00:00.000Z\n\n#### `timestamp-seconds`\n\nThe `timestamp-seconds` attribute specifies the date and time using the number\nof seconds since 1970-01-01T0:00:00.000Z\n\n#### `locale` (optional)\n\nAn internationalization language string for each timer unit. The default value\nis `en` (for English). This attribute supports all values that are supported by\nthe user's browser.\n\n#### `display-in` (optional)\n\nIf set to the value `utc`, the `display-in` attribute will convert the given\ndate to UTC.\n\n#### `offset-seconds` (optional)\n\nThe `offset-seconds` attribute specifies an integer number of seconds to shift\nthe given date.\n\n#### `data-options-\\*` (optional)\n\nThe `data-options-*` supports all the options under [Intl.DateTimeFormat.options](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/DateTimeFormat#parameters)\nparameter that specifies the formatting style to use for `localeString` format.\nValid attributes include: `data-options-date-style`, `data-options-time-style`, etc.\n\nNote that if `display-in` attrubute is set to `utc`, the value of\n`data-options-time-zone` will automatically be converted to `UTC`.\n\n### Styling\n\nYou may use the `bento-date-display` element selector to style the Bento Date Display component freely.\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/date-display\n```\n\n```javascript\nimport React from 'react';\nimport {BentoDateDisplay} from '@bentoproject/date-display/react';\nimport '@bentoproject/date-display/styles.css';\n\nfunction App() {\n return (\n (\n
{`ISO: ${date.iso}; locale: ${date.localeString}`}
\n )}\n />\n );\n}\n```\n\n### Interactivity and API usage\n\nThe Bento Date Display component does not have an imperative API. However, the Bento Date Display Preact/React component does accept a `render` prop that renders the consumer's template. This `render` prop should be a function which the Bento Date Display Preact/React component can use to render its template. The `render` callback will be provided a variety of date-related parameters for consumers to interpolate in the rendered template. See the [`render` prop section](#render) for more information.\n\n### Layout and style\n\nThe Bento Date Display Preact/React component allows consumers to render their own templates. These templates may use inline styles, `\n```\n\n### Attributes\n\n#### `datetime`\n\nThe `datetime` attribute specifies the date and time in a standard ISO 8601 date\nstring (e.g. 2017-08-02T15:05:05.000Z) or the string `now`. If set to `now`,\n`bento-date-display` will use the time the page loaded to render its template.\n\n#### `timestamp-ms`\n\nThe `timestamp-ms` attribute specifies the date and time using the number of\nmilliseconds since 1970-01-01T0:00:00.000Z\n\n#### `timestamp-seconds`\n\nThe `timestamp-seconds` attribute specifies the date and time using the number\nof seconds since 1970-01-01T0:00:00.000Z\n\n#### `locale` (optional)\n\nAn internationalization language string for each timer unit. The default value\nis `en` (for English). This attribute supports all values that are supported by\nthe user's browser.\n\n#### `display-in` (optional)\n\nIf set to the value `utc`, the `display-in` attribute will convert the given\ndate to UTC.\n\n#### `offset-seconds` (optional)\n\nThe `offset-seconds` attribute specifies an integer number of seconds to shift\nthe given date.\n\n#### `data-options-\\*` (optional)\n\nThe `data-options-*` supports all the options under [Intl.DateTimeFormat.options](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/DateTimeFormat#parameters)\nparameter that specifies the formatting style to use for `localeString` format.\nValid attributes include: `data-options-date-style`, `data-options-time-style`, etc.\n\nNote that if `display-in` attrubute is set to `utc`, the value of\n`data-options-time-zone` will automatically be converted to `UTC`.\n\n### Styling\n\nYou may use the `bento-date-display` element selector to style the Bento Date Display component freely.\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/date-display\n```\n\n```javascript\nimport React from 'react';\nimport {BentoDateDisplay} from '@bentoproject/date-display/react';\nimport '@bentoproject/date-display/styles.css';\n\nfunction App() {\n return (\n (\n
{`ISO: ${date.iso}; locale: ${date.localeString}`}
\n )}\n />\n );\n}\n```\n\n### Interactivity and API usage\n\nThe Bento Date Display component does not have an imperative API. However, the Bento Date Display Preact/React component does accept a `render` prop that renders the consumer's template. This `render` prop should be a function which the Bento Date Display Preact/React component can use to render its template. The `render` callback will be provided a variety of date-related parameters for consumers to interpolate in the rendered template. See the [`render` prop section](#render) for more information.\n\n### Layout and style\n\nThe Bento Date Display Preact/React component allows consumers to render their own templates. These templates may use inline styles, `\n```\n\n### Attributes\n\n#### `datetime`\n\nThe `datetime` attribute specifies the date and time in a standard ISO 8601 date\nstring (e.g. 2017-08-02T15:05:05.000Z) or the string `now`. If set to `now`,\n`bento-date-display` will use the time the page loaded to render its template.\n\n#### `timestamp-ms`\n\nThe `timestamp-ms` attribute specifies the date and time using the number of\nmilliseconds since 1970-01-01T0:00:00.000Z\n\n#### `timestamp-seconds`\n\nThe `timestamp-seconds` attribute specifies the date and time using the number\nof seconds since 1970-01-01T0:00:00.000Z\n\n#### `locale` (optional)\n\nAn internationalization language string for each timer unit. The default value\nis `en` (for English). This attribute supports all values that are supported by\nthe user's browser.\n\n#### `display-in` (optional)\n\nIf set to the value `utc`, the `display-in` attribute will convert the given\ndate to UTC.\n\n#### `offset-seconds` (optional)\n\nThe `offset-seconds` attribute specifies an integer number of seconds to shift\nthe given date.\n\n#### `data-options-\\*` (optional)\n\nThe `data-options-*` supports all the options under [Intl.DateTimeFormat.options](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/DateTimeFormat#parameters)\nparameter that specifies the formatting style to use for `localeString` format.\nValid attributes include: `data-options-date-style`, `data-options-time-style`, etc.\n\nNote that if `display-in` attrubute is set to `utc`, the value of\n`data-options-time-zone` will automatically be converted to `UTC`.\n\n### Styling\n\nYou may use the `bento-date-display` element selector to style the Bento Date Display component freely.\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/date-display\n```\n\n```javascript\nimport React from 'react';\nimport {BentoDateDisplay} from '@bentoproject/date-display/react';\nimport '@bentoproject/date-display/styles.css';\n\nfunction App() {\n return (\n (\n
{`ISO: ${date.iso}; locale: ${date.localeString}`}
\n )}\n />\n );\n}\n```\n\n### Interactivity and API usage\n\nThe Bento Date Display component does not have an imperative API. However, the Bento Date Display Preact/React component does accept a `render` prop that renders the consumer's template. This `render` prop should be a function which the Bento Date Display Preact/React component can use to render its template. The `render` callback will be provided a variety of date-related parameters for consumers to interpolate in the rendered template. See the [`render` prop section](#render) for more information.\n\n### Layout and style\n\nThe Bento Date Display Preact/React component allows consumers to render their own templates. These templates may use inline styles, `\n```\n\n### Attributes\n\n#### `datetime`\n\nThe `datetime` attribute specifies the date and time in a standard ISO 8601 date\nstring (e.g. 2017-08-02T15:05:05.000Z) or the string `now`. If set to `now`,\n`bento-date-display` will use the time the page loaded to render its template.\n\n#### `timestamp-ms`\n\nThe `timestamp-ms` attribute specifies the date and time using the number of\nmilliseconds since 1970-01-01T0:00:00.000Z\n\n#### `timestamp-seconds`\n\nThe `timestamp-seconds` attribute specifies the date and time using the number\nof seconds since 1970-01-01T0:00:00.000Z\n\n#### `locale` (optional)\n\nAn internationalization language string for each timer unit. The default value\nis `en` (for English). This attribute supports all values that are supported by\nthe user's browser.\n\n#### `display-in` (optional)\n\nIf set to the value `utc`, the `display-in` attribute will convert the given\ndate to UTC.\n\n#### `offset-seconds` (optional)\n\nThe `offset-seconds` attribute specifies an integer number of seconds to shift\nthe given date.\n\n#### `data-options-\\*` (optional)\n\nThe `data-options-*` supports all the options under [Intl.DateTimeFormat.options](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/DateTimeFormat#parameters)\nparameter that specifies the formatting style to use for `localeString` format.\nValid attributes include: `data-options-date-style`, `data-options-time-style`, etc.\n\nNote that if `display-in` attrubute is set to `utc`, the value of\n`data-options-time-zone` will automatically be converted to `UTC`.\n\n### Styling\n\nYou may use the `bento-date-display` element selector to style the Bento Date Display component freely.\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/date-display\n```\n\n```javascript\nimport React from 'react';\nimport {BentoDateDisplay} from '@bentoproject/date-display/react';\nimport '@bentoproject/date-display/styles.css';\n\nfunction App() {\n return (\n (\n
{`ISO: ${date.iso}; locale: ${date.localeString}`}
\n )}\n />\n );\n}\n```\n\n### Interactivity and API usage\n\nThe Bento Date Display component does not have an imperative API. However, the Bento Date Display Preact/React component does accept a `render` prop that renders the consumer's template. This `render` prop should be a function which the Bento Date Display Preact/React component can use to render its template. The `render` callback will be provided a variety of date-related parameters for consumers to interpolate in the rendered template. See the [`render` prop section](#render) for more information.\n\n### Layout and style\n\nThe Bento Date Display Preact/React component allows consumers to render their own templates. These templates may use inline styles, `\n```\n\n### Attributes\n\n#### `datetime`\n\nThe `datetime` attribute specifies the date and time in a standard ISO 8601 date\nstring (e.g. 2017-08-02T15:05:05.000Z) or the string `now`. If set to `now`,\n`bento-date-display` will use the time the page loaded to render its template.\n\n#### `timestamp-ms`\n\nThe `timestamp-ms` attribute specifies the date and time using the number of\nmilliseconds since 1970-01-01T0:00:00.000Z\n\n#### `timestamp-seconds`\n\nThe `timestamp-seconds` attribute specifies the date and time using the number\nof seconds since 1970-01-01T0:00:00.000Z\n\n#### `locale` (optional)\n\nAn internationalization language string for each timer unit. The default value\nis `en` (for English). This attribute supports all values that are supported by\nthe user's browser.\n\n#### `display-in` (optional)\n\nIf set to the value `utc`, the `display-in` attribute will convert the given\ndate to UTC.\n\n#### `offset-seconds` (optional)\n\nThe `offset-seconds` attribute specifies an integer number of seconds to shift\nthe given date.\n\n#### `data-options-\\*` (optional)\n\nThe `data-options-*` supports all the options under [Intl.DateTimeFormat.options](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/DateTimeFormat#parameters)\nparameter that specifies the formatting style to use for `localeString` format.\nValid attributes include: `data-options-date-style`, `data-options-time-style`, etc.\n\nNote that if `display-in` attrubute is set to `utc`, the value of\n`data-options-time-zone` will automatically be converted to `UTC`.\n\n### Styling\n\nYou may use the `bento-date-display` element selector to style the Bento Date Display component freely.\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/date-display\n```\n\n```javascript\nimport React from 'react';\nimport {BentoDateDisplay} from '@bentoproject/date-display/react';\nimport '@bentoproject/date-display/styles.css';\n\nfunction App() {\n return (\n (\n
{`ISO: ${date.iso}; locale: ${date.localeString}`}
\n )}\n />\n );\n}\n```\n\n### Interactivity and API usage\n\nThe Bento Date Display component does not have an imperative API. However, the Bento Date Display Preact/React component does accept a `render` prop that renders the consumer's template. This `render` prop should be a function which the Bento Date Display Preact/React component can use to render its template. The `render` callback will be provided a variety of date-related parameters for consumers to interpolate in the rendered template. See the [`render` prop section](#render) for more information.\n\n### Layout and style\n\nThe Bento Date Display Preact/React component allows consumers to render their own templates. These templates may use inline styles, `\n```\n\n### Attributes\n\n#### `datetime`\n\nThe `datetime` attribute specifies the date and time in a standard ISO 8601 date\nstring (e.g. 2017-08-02T15:05:05.000Z) or the string `now`. If set to `now`,\n`bento-date-display` will use the time the page loaded to render its template.\n\n#### `timestamp-ms`\n\nThe `timestamp-ms` attribute specifies the date and time using the number of\nmilliseconds since 1970-01-01T0:00:00.000Z\n\n#### `timestamp-seconds`\n\nThe `timestamp-seconds` attribute specifies the date and time using the number\nof seconds since 1970-01-01T0:00:00.000Z\n\n#### `locale` (optional)\n\nAn internationalization language string for each timer unit. The default value\nis `en` (for English). This attribute supports all values that are supported by\nthe user's browser.\n\n#### `display-in` (optional)\n\nIf set to the value `utc`, the `display-in` attribute will convert the given\ndate to UTC.\n\n#### `offset-seconds` (optional)\n\nThe `offset-seconds` attribute specifies an integer number of seconds to shift\nthe given date.\n\n#### `data-options-\\*` (optional)\n\nThe `data-options-*` supports all the options under [Intl.DateTimeFormat.options](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/DateTimeFormat#parameters)\nparameter that specifies the formatting style to use for `localeString` format.\nValid attributes include: `data-options-date-style`, `data-options-time-style`, etc.\n\nNote that if `display-in` attrubute is set to `utc`, the value of\n`data-options-time-zone` will automatically be converted to `UTC`.\n\n### Styling\n\nYou may use the `bento-date-display` element selector to style the Bento Date Display component freely.\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/date-display\n```\n\n```javascript\nimport React from 'react';\nimport {BentoDateDisplay} from '@bentoproject/date-display/react';\nimport '@bentoproject/date-display/styles.css';\n\nfunction App() {\n return (\n (\n
{`ISO: ${date.iso}; locale: ${date.localeString}`}
\n )}\n />\n );\n}\n```\n\n### Interactivity and API usage\n\nThe Bento Date Display component does not have an imperative API. However, the Bento Date Display Preact/React component does accept a `render` prop that renders the consumer's template. This `render` prop should be a function which the Bento Date Display Preact/React component can use to render its template. The `render` callback will be provided a variety of date-related parameters for consumers to interpolate in the rendered template. See the [`render` prop section](#render) for more information.\n\n### Layout and style\n\nThe Bento Date Display Preact/React component allows consumers to render their own templates. These templates may use inline styles, `\n```\n\n### Attributes\n\n#### `datetime`\n\nThe `datetime` attribute specifies the date and time in a standard ISO 8601 date\nstring (e.g. 2017-08-02T15:05:05.000Z) or the string `now`. If set to `now`,\n`bento-date-display` will use the time the page loaded to render its template.\n\n#### `timestamp-ms`\n\nThe `timestamp-ms` attribute specifies the date and time using the number of\nmilliseconds since 1970-01-01T0:00:00.000Z\n\n#### `timestamp-seconds`\n\nThe `timestamp-seconds` attribute specifies the date and time using the number\nof seconds since 1970-01-01T0:00:00.000Z\n\n#### `locale` (optional)\n\nAn internationalization language string for each timer unit. The default value\nis `en` (for English). This attribute supports all values that are supported by\nthe user's browser.\n\n#### `display-in` (optional)\n\nIf set to the value `utc`, the `display-in` attribute will convert the given\ndate to UTC.\n\n#### `offset-seconds` (optional)\n\nThe `offset-seconds` attribute specifies an integer number of seconds to shift\nthe given date.\n\n#### `data-options-\\*` (optional)\n\nThe `data-options-*` supports all the options under [Intl.DateTimeFormat.options](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/DateTimeFormat#parameters)\nparameter that specifies the formatting style to use for `localeString` format.\nValid attributes include: `data-options-date-style`, `data-options-time-style`, etc.\n\nNote that if `display-in` attrubute is set to `utc`, the value of\n`data-options-time-zone` will automatically be converted to `UTC`.\n\n### Styling\n\nYou may use the `bento-date-display` element selector to style the Bento Date Display component freely.\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/date-display\n```\n\n```javascript\nimport React from 'react';\nimport {BentoDateDisplay} from '@bentoproject/date-display/react';\nimport '@bentoproject/date-display/styles.css';\n\nfunction App() {\n return (\n (\n
{`ISO: ${date.iso}; locale: ${date.localeString}`}
\n )}\n />\n );\n}\n```\n\n### Interactivity and API usage\n\nThe Bento Date Display component does not have an imperative API. However, the Bento Date Display Preact/React component does accept a `render` prop that renders the consumer's template. This `render` prop should be a function which the Bento Date Display Preact/React component can use to render its template. The `render` callback will be provided a variety of date-related parameters for consumers to interpolate in the rendered template. See the [`render` prop section](#render) for more information.\n\n### Layout and style\n\nThe Bento Date Display Preact/React component allows consumers to render their own templates. These templates may use inline styles, `\n```\n\n### Attributes\n\n#### `datetime`\n\nThe `datetime` attribute specifies the date and time in a standard ISO 8601 date\nstring (e.g. 2017-08-02T15:05:05.000Z) or the string `now`. If set to `now`,\n`bento-date-display` will use the time the page loaded to render its template.\n\n#### `timestamp-ms`\n\nThe `timestamp-ms` attribute specifies the date and time using the number of\nmilliseconds since 1970-01-01T0:00:00.000Z\n\n#### `timestamp-seconds`\n\nThe `timestamp-seconds` attribute specifies the date and time using the number\nof seconds since 1970-01-01T0:00:00.000Z\n\n#### `locale` (optional)\n\nAn internationalization language string for each timer unit. The default value\nis `en` (for English). This attribute supports all values that are supported by\nthe user's browser.\n\n#### `display-in` (optional)\n\nIf set to the value `utc`, the `display-in` attribute will convert the given\ndate to UTC.\n\n#### `offset-seconds` (optional)\n\nThe `offset-seconds` attribute specifies an integer number of seconds to shift\nthe given date.\n\n#### `data-options-\\*` (optional)\n\nThe `data-options-*` supports all the options under [Intl.DateTimeFormat.options](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/DateTimeFormat#parameters)\nparameter that specifies the formatting style to use for `localeString` format.\nValid attributes include: `data-options-date-style`, `data-options-time-style`, etc.\n\nNote that if `display-in` attrubute is set to `utc`, the value of\n`data-options-time-zone` will automatically be converted to `UTC`.\n\n### Styling\n\nYou may use the `bento-date-display` element selector to style the Bento Date Display component freely.\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/date-display\n```\n\n```javascript\nimport React from 'react';\nimport {BentoDateDisplay} from '@bentoproject/date-display/react';\nimport '@bentoproject/date-display/styles.css';\n\nfunction App() {\n return (\n (\n
{`ISO: ${date.iso}; locale: ${date.localeString}`}
\n )}\n />\n );\n}\n```\n\n### Interactivity and API usage\n\nThe Bento Date Display component does not have an imperative API. However, the Bento Date Display Preact/React component does accept a `render` prop that renders the consumer's template. This `render` prop should be a function which the Bento Date Display Preact/React component can use to render its template. The `render` callback will be provided a variety of date-related parameters for consumers to interpolate in the rendered template. See the [`render` prop section](#render) for more information.\n\n### Layout and style\n\nThe Bento Date Display Preact/React component allows consumers to render their own templates. These templates may use inline styles, `\n```\n\n### Attributes\n\n#### `datetime`\n\nThe `datetime` attribute specifies the date and time in a standard ISO 8601 date\nstring (e.g. 2017-08-02T15:05:05.000Z) or the string `now`. If set to `now`,\n`bento-date-display` will use the time the page loaded to render its template.\n\n#### `timestamp-ms`\n\nThe `timestamp-ms` attribute specifies the date and time using the number of\nmilliseconds since 1970-01-01T0:00:00.000Z\n\n#### `timestamp-seconds`\n\nThe `timestamp-seconds` attribute specifies the date and time using the number\nof seconds since 1970-01-01T0:00:00.000Z\n\n#### `locale` (optional)\n\nAn internationalization language string for each timer unit. The default value\nis `en` (for English). This attribute supports all values that are supported by\nthe user's browser.\n\n#### `display-in` (optional)\n\nIf set to the value `utc`, the `display-in` attribute will convert the given\ndate to UTC.\n\n#### `offset-seconds` (optional)\n\nThe `offset-seconds` attribute specifies an integer number of seconds to shift\nthe given date.\n\n#### `data-options-\\*` (optional)\n\nThe `data-options-*` supports all the options under [Intl.DateTimeFormat.options](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/DateTimeFormat#parameters)\nparameter that specifies the formatting style to use for `localeString` format.\nValid attributes include: `data-options-date-style`, `data-options-time-style`, etc.\n\nNote that if `display-in` attrubute is set to `utc`, the value of\n`data-options-time-zone` will automatically be converted to `UTC`.\n\n### Styling\n\nYou may use the `bento-date-display` element selector to style the Bento Date Display component freely.\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/date-display\n```\n\n```javascript\nimport React from 'react';\nimport {BentoDateDisplay} from '@bentoproject/date-display/react';\nimport '@bentoproject/date-display/styles.css';\n\nfunction App() {\n return (\n (\n
{`ISO: ${date.iso}; locale: ${date.localeString}`}
\n )}\n />\n );\n}\n```\n\n### Interactivity and API usage\n\nThe Bento Date Display component does not have an imperative API. However, the Bento Date Display Preact/React component does accept a `render` prop that renders the consumer's template. This `render` prop should be a function which the Bento Date Display Preact/React component can use to render its template. The `render` callback will be provided a variety of date-related parameters for consumers to interpolate in the rendered template. See the [`render` prop section](#render) for more information.\n\n### Layout and style\n\nThe Bento Date Display Preact/React component allows consumers to render their own templates. These templates may use inline styles, `\n```\n\n### Attributes\n\n#### `datetime`\n\nThe `datetime` attribute specifies the date and time in a standard ISO 8601 date\nstring (e.g. 2017-08-02T15:05:05.000Z) or the string `now`. If set to `now`,\n`bento-date-display` will use the time the page loaded to render its template.\n\n#### `timestamp-ms`\n\nThe `timestamp-ms` attribute specifies the date and time using the number of\nmilliseconds since 1970-01-01T0:00:00.000Z\n\n#### `timestamp-seconds`\n\nThe `timestamp-seconds` attribute specifies the date and time using the number\nof seconds since 1970-01-01T0:00:00.000Z\n\n#### `locale` (optional)\n\nAn internationalization language string for each timer unit. The default value\nis `en` (for English). This attribute supports all values that are supported by\nthe user's browser.\n\n#### `display-in` (optional)\n\nIf set to the value `utc`, the `display-in` attribute will convert the given\ndate to UTC.\n\n#### `offset-seconds` (optional)\n\nThe `offset-seconds` attribute specifies an integer number of seconds to shift\nthe given date.\n\n#### `data-options-\\*` (optional)\n\nThe `data-options-*` supports all the options under [Intl.DateTimeFormat.options](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/DateTimeFormat#parameters)\nparameter that specifies the formatting style to use for `localeString` format.\nValid attributes include: `data-options-date-style`, `data-options-time-style`, etc.\n\nNote that if `display-in` attrubute is set to `utc`, the value of\n`data-options-time-zone` will automatically be converted to `UTC`.\n\n### Styling\n\nYou may use the `bento-date-display` element selector to style the Bento Date Display component freely.\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/date-display\n```\n\n```javascript\nimport React from 'react';\nimport {BentoDateDisplay} from '@bentoproject/date-display/react';\nimport '@bentoproject/date-display/styles.css';\n\nfunction App() {\n return (\n (\n
{`ISO: ${date.iso}; locale: ${date.localeString}`}
\n )}\n />\n );\n}\n```\n\n### Interactivity and API usage\n\nThe Bento Date Display component does not have an imperative API. However, the Bento Date Display Preact/React component does accept a `render` prop that renders the consumer's template. This `render` prop should be a function which the Bento Date Display Preact/React component can use to render its template. The `render` callback will be provided a variety of date-related parameters for consumers to interpolate in the rendered template. See the [`render` prop section](#render) for more information.\n\n### Layout and style\n\nThe Bento Date Display Preact/React component allows consumers to render their own templates. These templates may use inline styles, `\n```\n\n### Attributes\n\n#### `datetime`\n\nThe `datetime` attribute specifies the date and time in a standard ISO 8601 date\nstring (e.g. 2017-08-02T15:05:05.000Z) or the string `now`. If set to `now`,\n`bento-date-display` will use the time the page loaded to render its template.\n\n#### `timestamp-ms`\n\nThe `timestamp-ms` attribute specifies the date and time using the number of\nmilliseconds since 1970-01-01T0:00:00.000Z\n\n#### `timestamp-seconds`\n\nThe `timestamp-seconds` attribute specifies the date and time using the number\nof seconds since 1970-01-01T0:00:00.000Z\n\n#### `locale` (optional)\n\nAn internationalization language string for each timer unit. The default value\nis `en` (for English). This attribute supports all values that are supported by\nthe user's browser.\n\n#### `display-in` (optional)\n\nIf set to the value `utc`, the `display-in` attribute will convert the given\ndate to UTC.\n\n#### `offset-seconds` (optional)\n\nThe `offset-seconds` attribute specifies an integer number of seconds to shift\nthe given date.\n\n#### `data-options-\\*` (optional)\n\nThe `data-options-*` supports all the options under [Intl.DateTimeFormat.options](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/DateTimeFormat#parameters)\nparameter that specifies the formatting style to use for `localeString` format.\nValid attributes include: `data-options-date-style`, `data-options-time-style`, etc.\n\nNote that if `display-in` attrubute is set to `utc`, the value of\n`data-options-time-zone` will automatically be converted to `UTC`.\n\n### Styling\n\nYou may use the `bento-date-display` element selector to style the Bento Date Display component freely.\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/date-display\n```\n\n```javascript\nimport React from 'react';\nimport {BentoDateDisplay} from '@bentoproject/date-display/react';\nimport '@bentoproject/date-display/styles.css';\n\nfunction App() {\n return (\n (\n
{`ISO: ${date.iso}; locale: ${date.localeString}`}
\n )}\n />\n );\n}\n```\n\n### Interactivity and API usage\n\nThe Bento Date Display component does not have an imperative API. However, the Bento Date Display Preact/React component does accept a `render` prop that renders the consumer's template. This `render` prop should be a function which the Bento Date Display Preact/React component can use to render its template. The `render` callback will be provided a variety of date-related parameters for consumers to interpolate in the rendered template. See the [`render` prop section](#render) for more information.\n\n### Layout and style\n\nThe Bento Date Display Preact/React component allows consumers to render their own templates. These templates may use inline styles, `\n```\n\n### Attributes\n\n#### `datetime`\n\nThe `datetime` attribute specifies the date and time in a standard ISO 8601 date\nstring (e.g. 2017-08-02T15:05:05.000Z) or the string `now`. If set to `now`,\n`bento-date-display` will use the time the page loaded to render its template.\n\n#### `timestamp-ms`\n\nThe `timestamp-ms` attribute specifies the date and time using the number of\nmilliseconds since 1970-01-01T0:00:00.000Z\n\n#### `timestamp-seconds`\n\nThe `timestamp-seconds` attribute specifies the date and time using the number\nof seconds since 1970-01-01T0:00:00.000Z\n\n#### `locale` (optional)\n\nAn internationalization language string for each timer unit. The default value\nis `en` (for English). This attribute supports all values that are supported by\nthe user's browser.\n\n#### `display-in` (optional)\n\nIf set to the value `utc`, the `display-in` attribute will convert the given\ndate to UTC.\n\n#### `offset-seconds` (optional)\n\nThe `offset-seconds` attribute specifies an integer number of seconds to shift\nthe given date.\n\n#### `data-options-\\*` (optional)\n\nThe `data-options-*` supports all the options under [Intl.DateTimeFormat.options](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/DateTimeFormat#parameters)\nparameter that specifies the formatting style to use for `localeString` format.\nValid attributes include: `data-options-date-style`, `data-options-time-style`, etc.\n\nNote that if `display-in` attrubute is set to `utc`, the value of\n`data-options-time-zone` will automatically be converted to `UTC`.\n\n### Styling\n\nYou may use the `bento-date-display` element selector to style the Bento Date Display component freely.\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/date-display\n```\n\n```javascript\nimport React from 'react';\nimport {BentoDateDisplay} from '@bentoproject/date-display/react';\nimport '@bentoproject/date-display/styles.css';\n\nfunction App() {\n return (\n (\n
{`ISO: ${date.iso}; locale: ${date.localeString}`}
\n )}\n />\n );\n}\n```\n\n### Interactivity and API usage\n\nThe Bento Date Display component does not have an imperative API. However, the Bento Date Display Preact/React component does accept a `render` prop that renders the consumer's template. This `render` prop should be a function which the Bento Date Display Preact/React component can use to render its template. The `render` callback will be provided a variety of date-related parameters for consumers to interpolate in the rendered template. See the [`render` prop section](#render) for more information.\n\n### Layout and style\n\nThe Bento Date Display Preact/React component allows consumers to render their own templates. These templates may use inline styles, `\n```\n\n### Attributes\n\n#### `datetime`\n\nThe `datetime` attribute specifies the date and time in a standard ISO 8601 date\nstring (e.g. 2017-08-02T15:05:05.000Z) or the string `now`. If set to `now`,\n`bento-date-display` will use the time the page loaded to render its template.\n\n#### `timestamp-ms`\n\nThe `timestamp-ms` attribute specifies the date and time using the number of\nmilliseconds since 1970-01-01T0:00:00.000Z\n\n#### `timestamp-seconds`\n\nThe `timestamp-seconds` attribute specifies the date and time using the number\nof seconds since 1970-01-01T0:00:00.000Z\n\n#### `locale` (optional)\n\nAn internationalization language string for each timer unit. The default value\nis `en` (for English). This attribute supports all values that are supported by\nthe user's browser.\n\n#### `display-in` (optional)\n\nIf set to the value `utc`, the `display-in` attribute will convert the given\ndate to UTC.\n\n#### `offset-seconds` (optional)\n\nThe `offset-seconds` attribute specifies an integer number of seconds to shift\nthe given date.\n\n#### `data-options-\\*` (optional)\n\nThe `data-options-*` supports all the options under [Intl.DateTimeFormat.options](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/DateTimeFormat#parameters)\nparameter that specifies the formatting style to use for `localeString` format.\nValid attributes include: `data-options-date-style`, `data-options-time-style`, etc.\n\nNote that if `display-in` attrubute is set to `utc`, the value of\n`data-options-time-zone` will automatically be converted to `UTC`.\n\n### Styling\n\nYou may use the `bento-date-display` element selector to style the Bento Date Display component freely.\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/date-display\n```\n\n```javascript\nimport React from 'react';\nimport {BentoDateDisplay} from '@bentoproject/date-display/react';\nimport '@bentoproject/date-display/styles.css';\n\nfunction App() {\n return (\n (\n
{`ISO: ${date.iso}; locale: ${date.localeString}`}
\n )}\n />\n );\n}\n```\n\n### Interactivity and API usage\n\nThe Bento Date Display component does not have an imperative API. However, the Bento Date Display Preact/React component does accept a `render` prop that renders the consumer's template. This `render` prop should be a function which the Bento Date Display Preact/React component can use to render its template. The `render` callback will be provided a variety of date-related parameters for consumers to interpolate in the rendered template. See the [`render` prop section](#render) for more information.\n\n### Layout and style\n\nThe Bento Date Display Preact/React component allows consumers to render their own templates. These templates may use inline styles, `\n```\n\n### Attributes\n\n#### `datetime`\n\nThe `datetime` attribute specifies the date and time in a standard ISO 8601 date\nstring (e.g. 2017-08-02T15:05:05.000Z) or the string `now`. If set to `now`,\n`bento-date-display` will use the time the page loaded to render its template.\n\n#### `timestamp-ms`\n\nThe `timestamp-ms` attribute specifies the date and time using the number of\nmilliseconds since 1970-01-01T0:00:00.000Z\n\n#### `timestamp-seconds`\n\nThe `timestamp-seconds` attribute specifies the date and time using the number\nof seconds since 1970-01-01T0:00:00.000Z\n\n#### `locale` (optional)\n\nAn internationalization language string for each timer unit. The default value\nis `en` (for English). This attribute supports all values that are supported by\nthe user's browser.\n\n#### `display-in` (optional)\n\nIf set to the value `utc`, the `display-in` attribute will convert the given\ndate to UTC.\n\n#### `offset-seconds` (optional)\n\nThe `offset-seconds` attribute specifies an integer number of seconds to shift\nthe given date.\n\n#### `data-options-\\*` (optional)\n\nThe `data-options-*` supports all the options under [Intl.DateTimeFormat.options](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/DateTimeFormat#parameters)\nparameter that specifies the formatting style to use for `localeString` format.\nValid attributes include: `data-options-date-style`, `data-options-time-style`, etc.\n\nNote that if `display-in` attrubute is set to `utc`, the value of\n`data-options-time-zone` will automatically be converted to `UTC`.\n\n### Styling\n\nYou may use the `bento-date-display` element selector to style the Bento Date Display component freely.\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/date-display\n```\n\n```javascript\nimport React from 'react';\nimport {BentoDateDisplay} from '@bentoproject/date-display/react';\nimport '@bentoproject/date-display/styles.css';\n\nfunction App() {\n return (\n (\n
{`ISO: ${date.iso}; locale: ${date.localeString}`}
\n )}\n />\n );\n}\n```\n\n### Interactivity and API usage\n\nThe Bento Date Display component does not have an imperative API. However, the Bento Date Display Preact/React component does accept a `render` prop that renders the consumer's template. This `render` prop should be a function which the Bento Date Display Preact/React component can use to render its template. The `render` callback will be provided a variety of date-related parameters for consumers to interpolate in the rendered template. See the [`render` prop section](#render) for more information.\n\n### Layout and style\n\nThe Bento Date Display Preact/React component allows consumers to render their own templates. These templates may use inline styles, `\n```\n\n### Attributes\n\n#### `datetime`\n\nThe `datetime` attribute specifies the date and time in a standard ISO 8601 date\nstring (e.g. 2017-08-02T15:05:05.000Z) or the string `now`. If set to `now`,\n`bento-date-display` will use the time the page loaded to render its template.\n\n#### `timestamp-ms`\n\nThe `timestamp-ms` attribute specifies the date and time using the number of\nmilliseconds since 1970-01-01T0:00:00.000Z\n\n#### `timestamp-seconds`\n\nThe `timestamp-seconds` attribute specifies the date and time using the number\nof seconds since 1970-01-01T0:00:00.000Z\n\n#### `locale` (optional)\n\nAn internationalization language string for each timer unit. The default value\nis `en` (for English). This attribute supports all values that are supported by\nthe user's browser.\n\n#### `display-in` (optional)\n\nIf set to the value `utc`, the `display-in` attribute will convert the given\ndate to UTC.\n\n#### `offset-seconds` (optional)\n\nThe `offset-seconds` attribute specifies an integer number of seconds to shift\nthe given date.\n\n#### `data-options-\\*` (optional)\n\nThe `data-options-*` supports all the options under [Intl.DateTimeFormat.options](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/DateTimeFormat#parameters)\nparameter that specifies the formatting style to use for `localeString` format.\nValid attributes include: `data-options-date-style`, `data-options-time-style`, etc.\n\nNote that if `display-in` attrubute is set to `utc`, the value of\n`data-options-time-zone` will automatically be converted to `UTC`.\n\n### Styling\n\nYou may use the `bento-date-display` element selector to style the Bento Date Display component freely.\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/date-display\n```\n\n```javascript\nimport React from 'react';\nimport {BentoDateDisplay} from '@bentoproject/date-display/react';\nimport '@bentoproject/date-display/styles.css';\n\nfunction App() {\n return (\n (\n
{`ISO: ${date.iso}; locale: ${date.localeString}`}
\n )}\n />\n );\n}\n```\n\n### Interactivity and API usage\n\nThe Bento Date Display component does not have an imperative API. However, the Bento Date Display Preact/React component does accept a `render` prop that renders the consumer's template. This `render` prop should be a function which the Bento Date Display Preact/React component can use to render its template. The `render` callback will be provided a variety of date-related parameters for consumers to interpolate in the rendered template. See the [`render` prop section](#render) for more information.\n\n### Layout and style\n\nThe Bento Date Display Preact/React component allows consumers to render their own templates. These templates may use inline styles, `\n```\n\n### Attributes\n\n#### `datetime`\n\nThe `datetime` attribute specifies the date and time in a standard ISO 8601 date\nstring (e.g. 2017-08-02T15:05:05.000Z) or the string `now`. If set to `now`,\n`bento-date-display` will use the time the page loaded to render its template.\n\n#### `timestamp-ms`\n\nThe `timestamp-ms` attribute specifies the date and time using the number of\nmilliseconds since 1970-01-01T0:00:00.000Z\n\n#### `timestamp-seconds`\n\nThe `timestamp-seconds` attribute specifies the date and time using the number\nof seconds since 1970-01-01T0:00:00.000Z\n\n#### `locale` (optional)\n\nAn internationalization language string for each timer unit. The default value\nis `en` (for English). This attribute supports all values that are supported by\nthe user's browser.\n\n#### `display-in` (optional)\n\nIf set to the value `utc`, the `display-in` attribute will convert the given\ndate to UTC.\n\n#### `offset-seconds` (optional)\n\nThe `offset-seconds` attribute specifies an integer number of seconds to shift\nthe given date.\n\n#### `data-options-\\*` (optional)\n\nThe `data-options-*` supports all the options under [Intl.DateTimeFormat.options](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/DateTimeFormat#parameters)\nparameter that specifies the formatting style to use for `localeString` format.\nValid attributes include: `data-options-date-style`, `data-options-time-style`, etc.\n\nNote that if `display-in` attrubute is set to `utc`, the value of\n`data-options-time-zone` will automatically be converted to `UTC`.\n\n### Styling\n\nYou may use the `bento-date-display` element selector to style the Bento Date Display component freely.\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/date-display\n```\n\n```javascript\nimport React from 'react';\nimport {BentoDateDisplay} from '@bentoproject/date-display/react';\nimport '@bentoproject/date-display/styles.css';\n\nfunction App() {\n return (\n (\n
{`ISO: ${date.iso}; locale: ${date.localeString}`}
\n )}\n />\n );\n}\n```\n\n### Interactivity and API usage\n\nThe Bento Date Display component does not have an imperative API. However, the Bento Date Display Preact/React component does accept a `render` prop that renders the consumer's template. This `render` prop should be a function which the Bento Date Display Preact/React component can use to render its template. The `render` callback will be provided a variety of date-related parameters for consumers to interpolate in the rendered template. See the [`render` prop section](#render) for more information.\n\n### Layout and style\n\nThe Bento Date Display Preact/React component allows consumers to render their own templates. These templates may use inline styles, `\n```\n\n### Attributes\n\n#### `datetime`\n\nThe `datetime` attribute specifies the date and time in a standard ISO 8601 date\nstring (e.g. 2017-08-02T15:05:05.000Z) or the string `now`. If set to `now`,\n`bento-date-display` will use the time the page loaded to render its template.\n\n#### `timestamp-ms`\n\nThe `timestamp-ms` attribute specifies the date and time using the number of\nmilliseconds since 1970-01-01T0:00:00.000Z\n\n#### `timestamp-seconds`\n\nThe `timestamp-seconds` attribute specifies the date and time using the number\nof seconds since 1970-01-01T0:00:00.000Z\n\n#### `locale` (optional)\n\nAn internationalization language string for each timer unit. The default value\nis `en` (for English). This attribute supports all values that are supported by\nthe user's browser.\n\n#### `display-in` (optional)\n\nIf set to the value `utc`, the `display-in` attribute will convert the given\ndate to UTC.\n\n#### `offset-seconds` (optional)\n\nThe `offset-seconds` attribute specifies an integer number of seconds to shift\nthe given date.\n\n#### `data-options-\\*` (optional)\n\nThe `data-options-*` supports all the options under [Intl.DateTimeFormat.options](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/DateTimeFormat#parameters)\nparameter that specifies the formatting style to use for `localeString` format.\nValid attributes include: `data-options-date-style`, `data-options-time-style`, etc.\n\nNote that if `display-in` attrubute is set to `utc`, the value of\n`data-options-time-zone` will automatically be converted to `UTC`.\n\n### Styling\n\nYou may use the `bento-date-display` element selector to style the Bento Date Display component freely.\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/date-display\n```\n\n```javascript\nimport React from 'react';\nimport {BentoDateDisplay} from '@bentoproject/date-display/react';\nimport '@bentoproject/date-display/styles.css';\n\nfunction App() {\n return (\n (\n
{`ISO: ${date.iso}; locale: ${date.localeString}`}
\n )}\n />\n );\n}\n```\n\n### Interactivity and API usage\n\nThe Bento Date Display component does not have an imperative API. However, the Bento Date Display Preact/React component does accept a `render` prop that renders the consumer's template. This `render` prop should be a function which the Bento Date Display Preact/React component can use to render its template. The `render` callback will be provided a variety of date-related parameters for consumers to interpolate in the rendered template. See the [`render` prop section](#render) for more information.\n\n### Layout and style\n\nThe Bento Date Display Preact/React component allows consumers to render their own templates. These templates may use inline styles, `\n```\n\n### Attributes\n\n#### `datetime`\n\nThe `datetime` attribute specifies the date and time in a standard ISO 8601 date\nstring (e.g. 2017-08-02T15:05:05.000Z) or the string `now`. If set to `now`,\n`bento-date-display` will use the time the page loaded to render its template.\n\n#### `timestamp-ms`\n\nThe `timestamp-ms` attribute specifies the date and time using the number of\nmilliseconds since 1970-01-01T0:00:00.000Z\n\n#### `timestamp-seconds`\n\nThe `timestamp-seconds` attribute specifies the date and time using the number\nof seconds since 1970-01-01T0:00:00.000Z\n\n#### `locale` (optional)\n\nAn internationalization language string for each timer unit. The default value\nis `en` (for English). This attribute supports all values that are supported by\nthe user's browser.\n\n#### `display-in` (optional)\n\nIf set to the value `utc`, the `display-in` attribute will convert the given\ndate to UTC.\n\n#### `offset-seconds` (optional)\n\nThe `offset-seconds` attribute specifies an integer number of seconds to shift\nthe given date.\n\n#### `data-options-\\*` (optional)\n\nThe `data-options-*` supports all the options under [Intl.DateTimeFormat.options](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/DateTimeFormat#parameters)\nparameter that specifies the formatting style to use for `localeString` format.\nValid attributes include: `data-options-date-style`, `data-options-time-style`, etc.\n\nNote that if `display-in` attrubute is set to `utc`, the value of\n`data-options-time-zone` will automatically be converted to `UTC`.\n\n### Styling\n\nYou may use the `bento-date-display` element selector to style the Bento Date Display component freely.\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/date-display\n```\n\n```javascript\nimport React from 'react';\nimport {BentoDateDisplay} from '@bentoproject/date-display/react';\nimport '@bentoproject/date-display/styles.css';\n\nfunction App() {\n return (\n (\n
{`ISO: ${date.iso}; locale: ${date.localeString}`}
\n )}\n />\n );\n}\n```\n\n### Interactivity and API usage\n\nThe Bento Date Display component does not have an imperative API. However, the Bento Date Display Preact/React component does accept a `render` prop that renders the consumer's template. This `render` prop should be a function which the Bento Date Display Preact/React component can use to render its template. The `render` callback will be provided a variety of date-related parameters for consumers to interpolate in the rendered template. See the [`render` prop section](#render) for more information.\n\n### Layout and style\n\nThe Bento Date Display Preact/React component allows consumers to render their own templates. These templates may use inline styles, `\n```\n\n### Attributes\n\n#### `datetime`\n\nThe `datetime` attribute specifies the date and time in a standard ISO 8601 date\nstring (e.g. 2017-08-02T15:05:05.000Z) or the string `now`. If set to `now`,\n`bento-date-display` will use the time the page loaded to render its template.\n\n#### `timestamp-ms`\n\nThe `timestamp-ms` attribute specifies the date and time using the number of\nmilliseconds since 1970-01-01T0:00:00.000Z\n\n#### `timestamp-seconds`\n\nThe `timestamp-seconds` attribute specifies the date and time using the number\nof seconds since 1970-01-01T0:00:00.000Z\n\n#### `locale` (optional)\n\nAn internationalization language string for each timer unit. The default value\nis `en` (for English). This attribute supports all values that are supported by\nthe user's browser.\n\n#### `display-in` (optional)\n\nIf set to the value `utc`, the `display-in` attribute will convert the given\ndate to UTC.\n\n#### `offset-seconds` (optional)\n\nThe `offset-seconds` attribute specifies an integer number of seconds to shift\nthe given date.\n\n#### `data-options-\\*` (optional)\n\nThe `data-options-*` supports all the options under [Intl.DateTimeFormat.options](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/DateTimeFormat#parameters)\nparameter that specifies the formatting style to use for `localeString` format.\nValid attributes include: `data-options-date-style`, `data-options-time-style`, etc.\n\nNote that if `display-in` attrubute is set to `utc`, the value of\n`data-options-time-zone` will automatically be converted to `UTC`.\n\n### Styling\n\nYou may use the `bento-date-display` element selector to style the Bento Date Display component freely.\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/date-display\n```\n\n```javascript\nimport React from 'react';\nimport {BentoDateDisplay} from '@bentoproject/date-display/react';\nimport '@bentoproject/date-display/styles.css';\n\nfunction App() {\n return (\n (\n
{`ISO: ${date.iso}; locale: ${date.localeString}`}
\n )}\n />\n );\n}\n```\n\n### Interactivity and API usage\n\nThe Bento Date Display component does not have an imperative API. However, the Bento Date Display Preact/React component does accept a `render` prop that renders the consumer's template. This `render` prop should be a function which the Bento Date Display Preact/React component can use to render its template. The `render` callback will be provided a variety of date-related parameters for consumers to interpolate in the rendered template. See the [`render` prop section](#render) for more information.\n\n### Layout and style\n\nThe Bento Date Display Preact/React component allows consumers to render their own templates. These templates may use inline styles, `\n```\n\n### Attributes\n\n#### `datetime`\n\nThe `datetime` attribute specifies the date and time in a standard ISO 8601 date\nstring (e.g. 2017-08-02T15:05:05.000Z) or the string `now`. If set to `now`,\n`bento-date-display` will use the time the page loaded to render its template.\n\n#### `timestamp-ms`\n\nThe `timestamp-ms` attribute specifies the date and time using the number of\nmilliseconds since 1970-01-01T0:00:00.000Z\n\n#### `timestamp-seconds`\n\nThe `timestamp-seconds` attribute specifies the date and time using the number\nof seconds since 1970-01-01T0:00:00.000Z\n\n#### `locale` (optional)\n\nAn internationalization language string for each timer unit. The default value\nis `en` (for English). This attribute supports all values that are supported by\nthe user's browser.\n\n#### `display-in` (optional)\n\nIf set to the value `utc`, the `display-in` attribute will convert the given\ndate to UTC.\n\n#### `offset-seconds` (optional)\n\nThe `offset-seconds` attribute specifies an integer number of seconds to shift\nthe given date.\n\n#### `data-options-\\*` (optional)\n\nThe `data-options-*` supports all the options under [Intl.DateTimeFormat.options](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/DateTimeFormat#parameters)\nparameter that specifies the formatting style to use for `localeString` format.\nValid attributes include: `data-options-date-style`, `data-options-time-style`, etc.\n\nNote that if `display-in` attrubute is set to `utc`, the value of\n`data-options-time-zone` will automatically be converted to `UTC`.\n\n### Styling\n\nYou may use the `bento-date-display` element selector to style the Bento Date Display component freely.\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/date-display\n```\n\n```javascript\nimport React from 'react';\nimport {BentoDateDisplay} from '@bentoproject/date-display/react';\nimport '@bentoproject/date-display/styles.css';\n\nfunction App() {\n return (\n (\n
{`ISO: ${date.iso}; locale: ${date.localeString}`}
\n )}\n />\n );\n}\n```\n\n### Interactivity and API usage\n\nThe Bento Date Display component does not have an imperative API. However, the Bento Date Display Preact/React component does accept a `render` prop that renders the consumer's template. This `render` prop should be a function which the Bento Date Display Preact/React component can use to render its template. The `render` callback will be provided a variety of date-related parameters for consumers to interpolate in the rendered template. See the [`render` prop section](#render) for more information.\n\n### Layout and style\n\nThe Bento Date Display Preact/React component allows consumers to render their own templates. These templates may use inline styles, `\n```\n\n### Attributes\n\n#### `datetime`\n\nThe `datetime` attribute specifies the date and time in a standard ISO 8601 date\nstring (e.g. 2017-08-02T15:05:05.000Z) or the string `now`. If set to `now`,\n`bento-date-display` will use the time the page loaded to render its template.\n\n#### `timestamp-ms`\n\nThe `timestamp-ms` attribute specifies the date and time using the number of\nmilliseconds since 1970-01-01T0:00:00.000Z\n\n#### `timestamp-seconds`\n\nThe `timestamp-seconds` attribute specifies the date and time using the number\nof seconds since 1970-01-01T0:00:00.000Z\n\n#### `locale` (optional)\n\nAn internationalization language string for each timer unit. The default value\nis `en` (for English). This attribute supports all values that are supported by\nthe user's browser.\n\n#### `display-in` (optional)\n\nIf set to the value `utc`, the `display-in` attribute will convert the given\ndate to UTC.\n\n#### `offset-seconds` (optional)\n\nThe `offset-seconds` attribute specifies an integer number of seconds to shift\nthe given date.\n\n#### `data-options-\\*` (optional)\n\nThe `data-options-*` supports all the options under [Intl.DateTimeFormat.options](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/DateTimeFormat#parameters)\nparameter that specifies the formatting style to use for `localeString` format.\nValid attributes include: `data-options-date-style`, `data-options-time-style`, etc.\n\nNote that if `display-in` attrubute is set to `utc`, the value of\n`data-options-time-zone` will automatically be converted to `UTC`.\n\n### Styling\n\nYou may use the `bento-date-display` element selector to style the Bento Date Display component freely.\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/date-display\n```\n\n```javascript\nimport React from 'react';\nimport {BentoDateDisplay} from '@bentoproject/date-display/react';\nimport '@bentoproject/date-display/styles.css';\n\nfunction App() {\n return (\n (\n
{`ISO: ${date.iso}; locale: ${date.localeString}`}
\n )}\n />\n );\n}\n```\n\n### Interactivity and API usage\n\nThe Bento Date Display component does not have an imperative API. However, the Bento Date Display Preact/React component does accept a `render` prop that renders the consumer's template. This `render` prop should be a function which the Bento Date Display Preact/React component can use to render its template. The `render` callback will be provided a variety of date-related parameters for consumers to interpolate in the rendered template. See the [`render` prop section](#render) for more information.\n\n### Layout and style\n\nThe Bento Date Display Preact/React component allows consumers to render their own templates. These templates may use inline styles, `\n```\n\n### Attributes\n\n#### `datetime`\n\nThe `datetime` attribute specifies the date and time in a standard ISO 8601 date\nstring (e.g. 2017-08-02T15:05:05.000Z) or the string `now`. If set to `now`,\n`bento-date-display` will use the time the page loaded to render its template.\n\n#### `timestamp-ms`\n\nThe `timestamp-ms` attribute specifies the date and time using the number of\nmilliseconds since 1970-01-01T0:00:00.000Z\n\n#### `timestamp-seconds`\n\nThe `timestamp-seconds` attribute specifies the date and time using the number\nof seconds since 1970-01-01T0:00:00.000Z\n\n#### `locale` (optional)\n\nAn internationalization language string for each timer unit. The default value\nis `en` (for English). This attribute supports all values that are supported by\nthe user's browser.\n\n#### `display-in` (optional)\n\nIf set to the value `utc`, the `display-in` attribute will convert the given\ndate to UTC.\n\n#### `offset-seconds` (optional)\n\nThe `offset-seconds` attribute specifies an integer number of seconds to shift\nthe given date.\n\n#### `data-options-\\*` (optional)\n\nThe `data-options-*` supports all the options under [Intl.DateTimeFormat.options](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/DateTimeFormat#parameters)\nparameter that specifies the formatting style to use for `localeString` format.\nValid attributes include: `data-options-date-style`, `data-options-time-style`, etc.\n\nNote that if `display-in` attrubute is set to `utc`, the value of\n`data-options-time-zone` will automatically be converted to `UTC`.\n\n### Styling\n\nYou may use the `bento-date-display` element selector to style the Bento Date Display component freely.\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/date-display\n```\n\n```javascript\nimport React from 'react';\nimport {BentoDateDisplay} from '@bentoproject/date-display/react';\nimport '@bentoproject/date-display/styles.css';\n\nfunction App() {\n return (\n (\n
{`ISO: ${date.iso}; locale: ${date.localeString}`}
\n )}\n />\n );\n}\n```\n\n### Interactivity and API usage\n\nThe Bento Date Display component does not have an imperative API. However, the Bento Date Display Preact/React component does accept a `render` prop that renders the consumer's template. This `render` prop should be a function which the Bento Date Display Preact/React component can use to render its template. The `render` callback will be provided a variety of date-related parameters for consumers to interpolate in the rendered template. See the [`render` prop section](#render) for more information.\n\n### Layout and style\n\nThe Bento Date Display Preact/React component allows consumers to render their own templates. These templates may use inline styles, `\n```\n\n### Attributes\n\n#### `datetime`\n\nThe `datetime` attribute specifies the date and time in a standard ISO 8601 date\nstring (e.g. 2017-08-02T15:05:05.000Z) or the string `now`. If set to `now`,\n`bento-date-display` will use the time the page loaded to render its template.\n\n#### `timestamp-ms`\n\nThe `timestamp-ms` attribute specifies the date and time using the number of\nmilliseconds since 1970-01-01T0:00:00.000Z\n\n#### `timestamp-seconds`\n\nThe `timestamp-seconds` attribute specifies the date and time using the number\nof seconds since 1970-01-01T0:00:00.000Z\n\n#### `locale` (optional)\n\nAn internationalization language string for each timer unit. The default value\nis `en` (for English). This attribute supports all values that are supported by\nthe user's browser.\n\n#### `display-in` (optional)\n\nIf set to the value `utc`, the `display-in` attribute will convert the given\ndate to UTC.\n\n#### `offset-seconds` (optional)\n\nThe `offset-seconds` attribute specifies an integer number of seconds to shift\nthe given date.\n\n#### `data-options-\\*` (optional)\n\nThe `data-options-*` supports all the options under [Intl.DateTimeFormat.options](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/DateTimeFormat#parameters)\nparameter that specifies the formatting style to use for `localeString` format.\nValid attributes include: `data-options-date-style`, `data-options-time-style`, etc.\n\nNote that if `display-in` attrubute is set to `utc`, the value of\n`data-options-time-zone` will automatically be converted to `UTC`.\n\n### Styling\n\nYou may use the `bento-date-display` element selector to style the Bento Date Display component freely.\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/date-display\n```\n\n```javascript\nimport React from 'react';\nimport {BentoDateDisplay} from '@bentoproject/date-display/react';\nimport '@bentoproject/date-display/styles.css';\n\nfunction App() {\n return (\n (\n
{`ISO: ${date.iso}; locale: ${date.localeString}`}
\n )}\n />\n );\n}\n```\n\n### Interactivity and API usage\n\nThe Bento Date Display component does not have an imperative API. However, the Bento Date Display Preact/React component does accept a `render` prop that renders the consumer's template. This `render` prop should be a function which the Bento Date Display Preact/React component can use to render its template. The `render` callback will be provided a variety of date-related parameters for consumers to interpolate in the rendered template. See the [`render` prop section](#render) for more information.\n\n### Layout and style\n\nThe Bento Date Display Preact/React component allows consumers to render their own templates. These templates may use inline styles, `\n```\n\n### Attributes\n\n#### `datetime`\n\nThe `datetime` attribute specifies the date and time in a standard ISO 8601 date\nstring (e.g. 2017-08-02T15:05:05.000Z) or the string `now`. If set to `now`,\n`bento-date-display` will use the time the page loaded to render its template.\n\n#### `timestamp-ms`\n\nThe `timestamp-ms` attribute specifies the date and time using the number of\nmilliseconds since 1970-01-01T0:00:00.000Z\n\n#### `timestamp-seconds`\n\nThe `timestamp-seconds` attribute specifies the date and time using the number\nof seconds since 1970-01-01T0:00:00.000Z\n\n#### `locale` (optional)\n\nAn internationalization language string for each timer unit. The default value\nis `en` (for English). This attribute supports all values that are supported by\nthe user's browser.\n\n#### `display-in` (optional)\n\nIf set to the value `utc`, the `display-in` attribute will convert the given\ndate to UTC.\n\n#### `offset-seconds` (optional)\n\nThe `offset-seconds` attribute specifies an integer number of seconds to shift\nthe given date.\n\n#### `data-options-\\*` (optional)\n\nThe `data-options-*` supports all the options under [Intl.DateTimeFormat.options](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/DateTimeFormat#parameters)\nparameter that specifies the formatting style to use for `localeString` format.\nValid attributes include: `data-options-date-style`, `data-options-time-style`, etc.\n\nNote that if `display-in` attrubute is set to `utc`, the value of\n`data-options-time-zone` will automatically be converted to `UTC`.\n\n### Styling\n\nYou may use the `bento-date-display` element selector to style the Bento Date Display component freely.\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/date-display\n```\n\n```javascript\nimport React from 'react';\nimport {BentoDateDisplay} from '@bentoproject/date-display/react';\nimport '@bentoproject/date-display/styles.css';\n\nfunction App() {\n return (\n (\n
{`ISO: ${date.iso}; locale: ${date.localeString}`}
\n )}\n />\n );\n}\n```\n\n### Interactivity and API usage\n\nThe Bento Date Display component does not have an imperative API. However, the Bento Date Display Preact/React component does accept a `render` prop that renders the consumer's template. This `render` prop should be a function which the Bento Date Display Preact/React component can use to render its template. The `render` callback will be provided a variety of date-related parameters for consumers to interpolate in the rendered template. See the [`render` prop section](#render) for more information.\n\n### Layout and style\n\nThe Bento Date Display Preact/React component allows consumers to render their own templates. These templates may use inline styles, `\n```\n\n### Attributes\n\n#### `datetime`\n\nThe `datetime` attribute specifies the date and time in a standard ISO 8601 date\nstring (e.g. 2017-08-02T15:05:05.000Z) or the string `now`. If set to `now`,\n`bento-date-display` will use the time the page loaded to render its template.\n\n#### `timestamp-ms`\n\nThe `timestamp-ms` attribute specifies the date and time using the number of\nmilliseconds since 1970-01-01T0:00:00.000Z\n\n#### `timestamp-seconds`\n\nThe `timestamp-seconds` attribute specifies the date and time using the number\nof seconds since 1970-01-01T0:00:00.000Z\n\n#### `locale` (optional)\n\nAn internationalization language string for each timer unit. The default value\nis `en` (for English). This attribute supports all values that are supported by\nthe user's browser.\n\n#### `display-in` (optional)\n\nIf set to the value `utc`, the `display-in` attribute will convert the given\ndate to UTC.\n\n#### `offset-seconds` (optional)\n\nThe `offset-seconds` attribute specifies an integer number of seconds to shift\nthe given date.\n\n#### `data-options-\\*` (optional)\n\nThe `data-options-*` supports all the options under [Intl.DateTimeFormat.options](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/DateTimeFormat#parameters)\nparameter that specifies the formatting style to use for `localeString` format.\nValid attributes include: `data-options-date-style`, `data-options-time-style`, etc.\n\nNote that if `display-in` attrubute is set to `utc`, the value of\n`data-options-time-zone` will automatically be converted to `UTC`.\n\n### Styling\n\nYou may use the `bento-date-display` element selector to style the Bento Date Display component freely.\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/date-display\n```\n\n```javascript\nimport React from 'react';\nimport {BentoDateDisplay} from '@bentoproject/date-display/react';\nimport '@bentoproject/date-display/styles.css';\n\nfunction App() {\n return (\n (\n
{`ISO: ${date.iso}; locale: ${date.localeString}`}
\n )}\n />\n );\n}\n```\n\n### Interactivity and API usage\n\nThe Bento Date Display component does not have an imperative API. However, the Bento Date Display Preact/React component does accept a `render` prop that renders the consumer's template. This `render` prop should be a function which the Bento Date Display Preact/React component can use to render its template. The `render` callback will be provided a variety of date-related parameters for consumers to interpolate in the rendered template. See the [`render` prop section](#render) for more information.\n\n### Layout and style\n\nThe Bento Date Display Preact/React component allows consumers to render their own templates. These templates may use inline styles, `\n```\n\n### Attributes\n\n#### `datetime`\n\nThe `datetime` attribute specifies the date and time in a standard ISO 8601 date\nstring (e.g. 2017-08-02T15:05:05.000Z) or the string `now`. If set to `now`,\n`bento-date-display` will use the time the page loaded to render its template.\n\n#### `timestamp-ms`\n\nThe `timestamp-ms` attribute specifies the date and time using the number of\nmilliseconds since 1970-01-01T0:00:00.000Z\n\n#### `timestamp-seconds`\n\nThe `timestamp-seconds` attribute specifies the date and time using the number\nof seconds since 1970-01-01T0:00:00.000Z\n\n#### `locale` (optional)\n\nAn internationalization language string for each timer unit. The default value\nis `en` (for English). This attribute supports all values that are supported by\nthe user's browser.\n\n#### `display-in` (optional)\n\nIf set to the value `utc`, the `display-in` attribute will convert the given\ndate to UTC.\n\n#### `offset-seconds` (optional)\n\nThe `offset-seconds` attribute specifies an integer number of seconds to shift\nthe given date.\n\n#### `data-options-\\*` (optional)\n\nThe `data-options-*` supports all the options under [Intl.DateTimeFormat.options](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/DateTimeFormat#parameters)\nparameter that specifies the formatting style to use for `localeString` format.\nValid attributes include: `data-options-date-style`, `data-options-time-style`, etc.\n\nNote that if `display-in` attrubute is set to `utc`, the value of\n`data-options-time-zone` will automatically be converted to `UTC`.\n\n### Styling\n\nYou may use the `bento-date-display` element selector to style the Bento Date Display component freely.\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/date-display\n```\n\n```javascript\nimport React from 'react';\nimport {BentoDateDisplay} from '@bentoproject/date-display/react';\nimport '@bentoproject/date-display/styles.css';\n\nfunction App() {\n return (\n (\n
{`ISO: ${date.iso}; locale: ${date.localeString}`}
\n )}\n />\n );\n}\n```\n\n### Interactivity and API usage\n\nThe Bento Date Display component does not have an imperative API. However, the Bento Date Display Preact/React component does accept a `render` prop that renders the consumer's template. This `render` prop should be a function which the Bento Date Display Preact/React component can use to render its template. The `render` callback will be provided a variety of date-related parameters for consumers to interpolate in the rendered template. See the [`render` prop section](#render) for more information.\n\n### Layout and style\n\nThe Bento Date Display Preact/React component allows consumers to render their own templates. These templates may use inline styles, `\n```\n\n### Attributes\n\n#### `datetime`\n\nThe `datetime` attribute specifies the date and time in a standard ISO 8601 date\nstring (e.g. 2017-08-02T15:05:05.000Z) or the string `now`. If set to `now`,\n`bento-date-display` will use the time the page loaded to render its template.\n\n#### `timestamp-ms`\n\nThe `timestamp-ms` attribute specifies the date and time using the number of\nmilliseconds since 1970-01-01T0:00:00.000Z\n\n#### `timestamp-seconds`\n\nThe `timestamp-seconds` attribute specifies the date and time using the number\nof seconds since 1970-01-01T0:00:00.000Z\n\n#### `locale` (optional)\n\nAn internationalization language string for each timer unit. The default value\nis `en` (for English). This attribute supports all values that are supported by\nthe user's browser.\n\n#### `display-in` (optional)\n\nIf set to the value `utc`, the `display-in` attribute will convert the given\ndate to UTC.\n\n#### `offset-seconds` (optional)\n\nThe `offset-seconds` attribute specifies an integer number of seconds to shift\nthe given date.\n\n#### `data-options-\\*` (optional)\n\nThe `data-options-*` supports all the options under [Intl.DateTimeFormat.options](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/DateTimeFormat#parameters)\nparameter that specifies the formatting style to use for `localeString` format.\nValid attributes include: `data-options-date-style`, `data-options-time-style`, etc.\n\nNote that if `display-in` attrubute is set to `utc`, the value of\n`data-options-time-zone` will automatically be converted to `UTC`.\n\n### Styling\n\nYou may use the `bento-date-display` element selector to style the Bento Date Display component freely.\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/date-display\n```\n\n```javascript\nimport React from 'react';\nimport {BentoDateDisplay} from '@bentoproject/date-display/react';\nimport '@bentoproject/date-display/styles.css';\n\nfunction App() {\n return (\n (\n
{`ISO: ${date.iso}; locale: ${date.localeString}`}
\n )}\n />\n );\n}\n```\n\n### Interactivity and API usage\n\nThe Bento Date Display component does not have an imperative API. However, the Bento Date Display Preact/React component does accept a `render` prop that renders the consumer's template. This `render` prop should be a function which the Bento Date Display Preact/React component can use to render its template. The `render` callback will be provided a variety of date-related parameters for consumers to interpolate in the rendered template. See the [`render` prop section](#render) for more information.\n\n### Layout and style\n\nThe Bento Date Display Preact/React component allows consumers to render their own templates. These templates may use inline styles, `\n```\n\n### Attributes\n\n#### `datetime`\n\nThe `datetime` attribute specifies the date and time in a standard ISO 8601 date\nstring (e.g. 2017-08-02T15:05:05.000Z) or the string `now`. If set to `now`,\n`bento-date-display` will use the time the page loaded to render its template.\n\n#### `timestamp-ms`\n\nThe `timestamp-ms` attribute specifies the date and time using the number of\nmilliseconds since 1970-01-01T0:00:00.000Z\n\n#### `timestamp-seconds`\n\nThe `timestamp-seconds` attribute specifies the date and time using the number\nof seconds since 1970-01-01T0:00:00.000Z\n\n#### `locale` (optional)\n\nAn internationalization language string for each timer unit. The default value\nis `en` (for English). This attribute supports all values that are supported by\nthe user's browser.\n\n#### `display-in` (optional)\n\nIf set to the value `utc`, the `display-in` attribute will convert the given\ndate to UTC.\n\n#### `offset-seconds` (optional)\n\nThe `offset-seconds` attribute specifies an integer number of seconds to shift\nthe given date.\n\n#### `data-options-\\*` (optional)\n\nThe `data-options-*` supports all the options under [Intl.DateTimeFormat.options](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/DateTimeFormat#parameters)\nparameter that specifies the formatting style to use for `localeString` format.\nValid attributes include: `data-options-date-style`, `data-options-time-style`, etc.\n\nNote that if `display-in` attrubute is set to `utc`, the value of\n`data-options-time-zone` will automatically be converted to `UTC`.\n\n### Styling\n\nYou may use the `bento-date-display` element selector to style the Bento Date Display component freely.\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/date-display\n```\n\n```javascript\nimport React from 'react';\nimport {BentoDateDisplay} from '@bentoproject/date-display/react';\nimport '@bentoproject/date-display/styles.css';\n\nfunction App() {\n return (\n (\n
{`ISO: ${date.iso}; locale: ${date.localeString}`}
\n )}\n />\n );\n}\n```\n\n### Interactivity and API usage\n\nThe Bento Date Display component does not have an imperative API. However, the Bento Date Display Preact/React component does accept a `render` prop that renders the consumer's template. This `render` prop should be a function which the Bento Date Display Preact/React component can use to render its template. The `render` callback will be provided a variety of date-related parameters for consumers to interpolate in the rendered template. See the [`render` prop section](#render) for more information.\n\n### Layout and style\n\nThe Bento Date Display Preact/React component allows consumers to render their own templates. These templates may use inline styles, `\n```\n\n### Attributes\n\n#### `datetime`\n\nThe `datetime` attribute specifies the date and time in a standard ISO 8601 date\nstring (e.g. 2017-08-02T15:05:05.000Z) or the string `now`. If set to `now`,\n`bento-date-display` will use the time the page loaded to render its template.\n\n#### `timestamp-ms`\n\nThe `timestamp-ms` attribute specifies the date and time using the number of\nmilliseconds since 1970-01-01T0:00:00.000Z\n\n#### `timestamp-seconds`\n\nThe `timestamp-seconds` attribute specifies the date and time using the number\nof seconds since 1970-01-01T0:00:00.000Z\n\n#### `locale` (optional)\n\nAn internationalization language string for each timer unit. The default value\nis `en` (for English). This attribute supports all values that are supported by\nthe user's browser.\n\n#### `display-in` (optional)\n\nIf set to the value `utc`, the `display-in` attribute will convert the given\ndate to UTC.\n\n#### `offset-seconds` (optional)\n\nThe `offset-seconds` attribute specifies an integer number of seconds to shift\nthe given date.\n\n#### `data-options-\\*` (optional)\n\nThe `data-options-*` supports all the options under [Intl.DateTimeFormat.options](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/DateTimeFormat#parameters)\nparameter that specifies the formatting style to use for `localeString` format.\nValid attributes include: `data-options-date-style`, `data-options-time-style`, etc.\n\nNote that if `display-in` attrubute is set to `utc`, the value of\n`data-options-time-zone` will automatically be converted to `UTC`.\n\n### Styling\n\nYou may use the `bento-date-display` element selector to style the Bento Date Display component freely.\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/date-display\n```\n\n```javascript\nimport React from 'react';\nimport {BentoDateDisplay} from '@bentoproject/date-display/react';\nimport '@bentoproject/date-display/styles.css';\n\nfunction App() {\n return (\n (\n
{`ISO: ${date.iso}; locale: ${date.localeString}`}
\n )}\n />\n );\n}\n```\n\n### Interactivity and API usage\n\nThe Bento Date Display component does not have an imperative API. However, the Bento Date Display Preact/React component does accept a `render` prop that renders the consumer's template. This `render` prop should be a function which the Bento Date Display Preact/React component can use to render its template. The `render` callback will be provided a variety of date-related parameters for consumers to interpolate in the rendered template. See the [`render` prop section](#render) for more information.\n\n### Layout and style\n\nThe Bento Date Display Preact/React component allows consumers to render their own templates. These templates may use inline styles, `\n```\n\n### Attributes\n\n#### `datetime`\n\nThe `datetime` attribute specifies the date and time in a standard ISO 8601 date\nstring (e.g. 2017-08-02T15:05:05.000Z) or the string `now`. If set to `now`,\n`bento-date-display` will use the time the page loaded to render its template.\n\n#### `timestamp-ms`\n\nThe `timestamp-ms` attribute specifies the date and time using the number of\nmilliseconds since 1970-01-01T0:00:00.000Z\n\n#### `timestamp-seconds`\n\nThe `timestamp-seconds` attribute specifies the date and time using the number\nof seconds since 1970-01-01T0:00:00.000Z\n\n#### `locale` (optional)\n\nAn internationalization language string for each timer unit. The default value\nis `en` (for English). This attribute supports all values that are supported by\nthe user's browser.\n\n#### `display-in` (optional)\n\nIf set to the value `utc`, the `display-in` attribute will convert the given\ndate to UTC.\n\n#### `offset-seconds` (optional)\n\nThe `offset-seconds` attribute specifies an integer number of seconds to shift\nthe given date.\n\n#### `data-options-\\*` (optional)\n\nThe `data-options-*` supports all the options under [Intl.DateTimeFormat.options](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/DateTimeFormat#parameters)\nparameter that specifies the formatting style to use for `localeString` format.\nValid attributes include: `data-options-date-style`, `data-options-time-style`, etc.\n\nNote that if `display-in` attrubute is set to `utc`, the value of\n`data-options-time-zone` will automatically be converted to `UTC`.\n\n### Styling\n\nYou may use the `bento-date-display` element selector to style the Bento Date Display component freely.\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/date-display\n```\n\n```javascript\nimport React from 'react';\nimport {BentoDateDisplay} from '@bentoproject/date-display/react';\nimport '@bentoproject/date-display/styles.css';\n\nfunction App() {\n return (\n (\n
{`ISO: ${date.iso}; locale: ${date.localeString}`}
\n )}\n />\n );\n}\n```\n\n### Interactivity and API usage\n\nThe Bento Date Display component does not have an imperative API. However, the Bento Date Display Preact/React component does accept a `render` prop that renders the consumer's template. This `render` prop should be a function which the Bento Date Display Preact/React component can use to render its template. The `render` callback will be provided a variety of date-related parameters for consumers to interpolate in the rendered template. See the [`render` prop section](#render) for more information.\n\n### Layout and style\n\nThe Bento Date Display Preact/React component allows consumers to render their own templates. These templates may use inline styles, `\n```\n\n### Attributes\n\n#### `datetime`\n\nThe `datetime` attribute specifies the date and time in a standard ISO 8601 date\nstring (e.g. 2017-08-02T15:05:05.000Z) or the string `now`. If set to `now`,\n`bento-date-display` will use the time the page loaded to render its template.\n\n#### `timestamp-ms`\n\nThe `timestamp-ms` attribute specifies the date and time using the number of\nmilliseconds since 1970-01-01T0:00:00.000Z\n\n#### `timestamp-seconds`\n\nThe `timestamp-seconds` attribute specifies the date and time using the number\nof seconds since 1970-01-01T0:00:00.000Z\n\n#### `locale` (optional)\n\nAn internationalization language string for each timer unit. The default value\nis `en` (for English). This attribute supports all values that are supported by\nthe user's browser.\n\n#### `display-in` (optional)\n\nIf set to the value `utc`, the `display-in` attribute will convert the given\ndate to UTC.\n\n#### `offset-seconds` (optional)\n\nThe `offset-seconds` attribute specifies an integer number of seconds to shift\nthe given date.\n\n#### `data-options-\\*` (optional)\n\nThe `data-options-*` supports all the options under [Intl.DateTimeFormat.options](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/DateTimeFormat#parameters)\nparameter that specifies the formatting style to use for `localeString` format.\nValid attributes include: `data-options-date-style`, `data-options-time-style`, etc.\n\nNote that if `display-in` attrubute is set to `utc`, the value of\n`data-options-time-zone` will automatically be converted to `UTC`.\n\n### Styling\n\nYou may use the `bento-date-display` element selector to style the Bento Date Display component freely.\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/date-display\n```\n\n```javascript\nimport React from 'react';\nimport {BentoDateDisplay} from '@bentoproject/date-display/react';\nimport '@bentoproject/date-display/styles.css';\n\nfunction App() {\n return (\n (\n
{`ISO: ${date.iso}; locale: ${date.localeString}`}
\n )}\n />\n );\n}\n```\n\n### Interactivity and API usage\n\nThe Bento Date Display component does not have an imperative API. However, the Bento Date Display Preact/React component does accept a `render` prop that renders the consumer's template. This `render` prop should be a function which the Bento Date Display Preact/React component can use to render its template. The `render` callback will be provided a variety of date-related parameters for consumers to interpolate in the rendered template. See the [`render` prop section](#render) for more information.\n\n### Layout and style\n\nThe Bento Date Display Preact/React component allows consumers to render their own templates. These templates may use inline styles, `\n```\n\n### Attributes\n\n#### `datetime`\n\nThe `datetime` attribute specifies the date and time in a standard ISO 8601 date\nstring (e.g. 2017-08-02T15:05:05.000Z) or the string `now`. If set to `now`,\n`bento-date-display` will use the time the page loaded to render its template.\n\n#### `timestamp-ms`\n\nThe `timestamp-ms` attribute specifies the date and time using the number of\nmilliseconds since 1970-01-01T0:00:00.000Z\n\n#### `timestamp-seconds`\n\nThe `timestamp-seconds` attribute specifies the date and time using the number\nof seconds since 1970-01-01T0:00:00.000Z\n\n#### `locale` (optional)\n\nAn internationalization language string for each timer unit. The default value\nis `en` (for English). This attribute supports all values that are supported by\nthe user's browser.\n\n#### `display-in` (optional)\n\nIf set to the value `utc`, the `display-in` attribute will convert the given\ndate to UTC.\n\n#### `offset-seconds` (optional)\n\nThe `offset-seconds` attribute specifies an integer number of seconds to shift\nthe given date.\n\n#### `data-options-\\*` (optional)\n\nThe `data-options-*` supports all the options under [Intl.DateTimeFormat.options](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/DateTimeFormat#parameters)\nparameter that specifies the formatting style to use for `localeString` format.\nValid attributes include: `data-options-date-style`, `data-options-time-style`, etc.\n\nNote that if `display-in` attrubute is set to `utc`, the value of\n`data-options-time-zone` will automatically be converted to `UTC`.\n\n### Styling\n\nYou may use the `bento-date-display` element selector to style the Bento Date Display component freely.\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/date-display\n```\n\n```javascript\nimport React from 'react';\nimport {BentoDateDisplay} from '@bentoproject/date-display/react';\nimport '@bentoproject/date-display/styles.css';\n\nfunction App() {\n return (\n (\n
{`ISO: ${date.iso}; locale: ${date.localeString}`}
\n )}\n />\n );\n}\n```\n\n### Interactivity and API usage\n\nThe Bento Date Display component does not have an imperative API. However, the Bento Date Display Preact/React component does accept a `render` prop that renders the consumer's template. This `render` prop should be a function which the Bento Date Display Preact/React component can use to render its template. The `render` callback will be provided a variety of date-related parameters for consumers to interpolate in the rendered template. See the [`render` prop section](#render) for more information.\n\n### Layout and style\n\nThe Bento Date Display Preact/React component allows consumers to render their own templates. These templates may use inline styles, `\n```\n\n### Attributes\n\n#### `datetime`\n\nThe `datetime` attribute specifies the date and time in a standard ISO 8601 date\nstring (e.g. 2017-08-02T15:05:05.000Z) or the string `now`. If set to `now`,\n`bento-date-display` will use the time the page loaded to render its template.\n\n#### `timestamp-ms`\n\nThe `timestamp-ms` attribute specifies the date and time using the number of\nmilliseconds since 1970-01-01T0:00:00.000Z\n\n#### `timestamp-seconds`\n\nThe `timestamp-seconds` attribute specifies the date and time using the number\nof seconds since 1970-01-01T0:00:00.000Z\n\n#### `locale` (optional)\n\nAn internationalization language string for each timer unit. The default value\nis `en` (for English). This attribute supports all values that are supported by\nthe user's browser.\n\n#### `display-in` (optional)\n\nIf set to the value `utc`, the `display-in` attribute will convert the given\ndate to UTC.\n\n#### `offset-seconds` (optional)\n\nThe `offset-seconds` attribute specifies an integer number of seconds to shift\nthe given date.\n\n#### `data-options-\\*` (optional)\n\nThe `data-options-*` supports all the options under [Intl.DateTimeFormat.options](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/DateTimeFormat#parameters)\nparameter that specifies the formatting style to use for `localeString` format.\nValid attributes include: `data-options-date-style`, `data-options-time-style`, etc.\n\nNote that if `display-in` attrubute is set to `utc`, the value of\n`data-options-time-zone` will automatically be converted to `UTC`.\n\n### Styling\n\nYou may use the `bento-date-display` element selector to style the Bento Date Display component freely.\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/date-display\n```\n\n```javascript\nimport React from 'react';\nimport {BentoDateDisplay} from '@bentoproject/date-display/react';\nimport '@bentoproject/date-display/styles.css';\n\nfunction App() {\n return (\n (\n
{`ISO: ${date.iso}; locale: ${date.localeString}`}
\n )}\n />\n );\n}\n```\n\n### Interactivity and API usage\n\nThe Bento Date Display component does not have an imperative API. However, the Bento Date Display Preact/React component does accept a `render` prop that renders the consumer's template. This `render` prop should be a function which the Bento Date Display Preact/React component can use to render its template. The `render` callback will be provided a variety of date-related parameters for consumers to interpolate in the rendered template. See the [`render` prop section](#render) for more information.\n\n### Layout and style\n\nThe Bento Date Display Preact/React component allows consumers to render their own templates. These templates may use inline styles, `\n```\n\n### Attributes\n\n#### `datetime`\n\nThe `datetime` attribute specifies the date and time in a standard ISO 8601 date\nstring (e.g. 2017-08-02T15:05:05.000Z) or the string `now`. If set to `now`,\n`bento-date-display` will use the time the page loaded to render its template.\n\n#### `timestamp-ms`\n\nThe `timestamp-ms` attribute specifies the date and time using the number of\nmilliseconds since 1970-01-01T0:00:00.000Z\n\n#### `timestamp-seconds`\n\nThe `timestamp-seconds` attribute specifies the date and time using the number\nof seconds since 1970-01-01T0:00:00.000Z\n\n#### `locale` (optional)\n\nAn internationalization language string for each timer unit. The default value\nis `en` (for English). This attribute supports all values that are supported by\nthe user's browser.\n\n#### `display-in` (optional)\n\nIf set to the value `utc`, the `display-in` attribute will convert the given\ndate to UTC.\n\n#### `offset-seconds` (optional)\n\nThe `offset-seconds` attribute specifies an integer number of seconds to shift\nthe given date.\n\n#### `data-options-\\*` (optional)\n\nThe `data-options-*` supports all the options under [Intl.DateTimeFormat.options](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/DateTimeFormat#parameters)\nparameter that specifies the formatting style to use for `localeString` format.\nValid attributes include: `data-options-date-style`, `data-options-time-style`, etc.\n\nNote that if `display-in` attrubute is set to `utc`, the value of\n`data-options-time-zone` will automatically be converted to `UTC`.\n\n### Styling\n\nYou may use the `bento-date-display` element selector to style the Bento Date Display component freely.\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/date-display\n```\n\n```javascript\nimport React from 'react';\nimport {BentoDateDisplay} from '@bentoproject/date-display/react';\nimport '@bentoproject/date-display/styles.css';\n\nfunction App() {\n return (\n (\n
{`ISO: ${date.iso}; locale: ${date.localeString}`}
\n )}\n />\n );\n}\n```\n\n### Interactivity and API usage\n\nThe Bento Date Display component does not have an imperative API. However, the Bento Date Display Preact/React component does accept a `render` prop that renders the consumer's template. This `render` prop should be a function which the Bento Date Display Preact/React component can use to render its template. The `render` callback will be provided a variety of date-related parameters for consumers to interpolate in the rendered template. See the [`render` prop section](#render) for more information.\n\n### Layout and style\n\nThe Bento Date Display Preact/React component allows consumers to render their own templates. These templates may use inline styles, `\n```\n\n### Attributes\n\n#### `datetime`\n\nThe `datetime` attribute specifies the date and time in a standard ISO 8601 date\nstring (e.g. 2017-08-02T15:05:05.000Z) or the string `now`. If set to `now`,\n`bento-date-display` will use the time the page loaded to render its template.\n\n#### `timestamp-ms`\n\nThe `timestamp-ms` attribute specifies the date and time using the number of\nmilliseconds since 1970-01-01T0:00:00.000Z\n\n#### `timestamp-seconds`\n\nThe `timestamp-seconds` attribute specifies the date and time using the number\nof seconds since 1970-01-01T0:00:00.000Z\n\n#### `locale` (optional)\n\nAn internationalization language string for each timer unit. The default value\nis `en` (for English). This attribute supports all values that are supported by\nthe user's browser.\n\n#### `display-in` (optional)\n\nIf set to the value `utc`, the `display-in` attribute will convert the given\ndate to UTC.\n\n#### `offset-seconds` (optional)\n\nThe `offset-seconds` attribute specifies an integer number of seconds to shift\nthe given date.\n\n#### `data-options-\\*` (optional)\n\nThe `data-options-*` supports all the options under [Intl.DateTimeFormat.options](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/DateTimeFormat#parameters)\nparameter that specifies the formatting style to use for `localeString` format.\nValid attributes include: `data-options-date-style`, `data-options-time-style`, etc.\n\nNote that if `display-in` attrubute is set to `utc`, the value of\n`data-options-time-zone` will automatically be converted to `UTC`.\n\n### Styling\n\nYou may use the `bento-date-display` element selector to style the Bento Date Display component freely.\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/date-display\n```\n\n```javascript\nimport React from 'react';\nimport {BentoDateDisplay} from '@bentoproject/date-display/react';\nimport '@bentoproject/date-display/styles.css';\n\nfunction App() {\n return (\n (\n
{`ISO: ${date.iso}; locale: ${date.localeString}`}
\n )}\n />\n );\n}\n```\n\n### Interactivity and API usage\n\nThe Bento Date Display component does not have an imperative API. However, the Bento Date Display Preact/React component does accept a `render` prop that renders the consumer's template. This `render` prop should be a function which the Bento Date Display Preact/React component can use to render its template. The `render` callback will be provided a variety of date-related parameters for consumers to interpolate in the rendered template. See the [`render` prop section](#render) for more information.\n\n### Layout and style\n\nThe Bento Date Display Preact/React component allows consumers to render their own templates. These templates may use inline styles, `\n```\n\n### Attributes\n\n#### `datetime`\n\nThe `datetime` attribute specifies the date and time in a standard ISO 8601 date\nstring (e.g. 2017-08-02T15:05:05.000Z) or the string `now`. If set to `now`,\n`bento-date-display` will use the time the page loaded to render its template.\n\n#### `timestamp-ms`\n\nThe `timestamp-ms` attribute specifies the date and time using the number of\nmilliseconds since 1970-01-01T0:00:00.000Z\n\n#### `timestamp-seconds`\n\nThe `timestamp-seconds` attribute specifies the date and time using the number\nof seconds since 1970-01-01T0:00:00.000Z\n\n#### `locale` (optional)\n\nAn internationalization language string for each timer unit. The default value\nis `en` (for English). This attribute supports all values that are supported by\nthe user's browser.\n\n#### `display-in` (optional)\n\nIf set to the value `utc`, the `display-in` attribute will convert the given\ndate to UTC.\n\n#### `offset-seconds` (optional)\n\nThe `offset-seconds` attribute specifies an integer number of seconds to shift\nthe given date.\n\n#### `data-options-\\*` (optional)\n\nThe `data-options-*` supports all the options under [Intl.DateTimeFormat.options](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/DateTimeFormat#parameters)\nparameter that specifies the formatting style to use for `localeString` format.\nValid attributes include: `data-options-date-style`, `data-options-time-style`, etc.\n\nNote that if `display-in` attrubute is set to `utc`, the value of\n`data-options-time-zone` will automatically be converted to `UTC`.\n\n### Styling\n\nYou may use the `bento-date-display` element selector to style the Bento Date Display component freely.\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/date-display\n```\n\n```javascript\nimport React from 'react';\nimport {BentoDateDisplay} from '@bentoproject/date-display/react';\nimport '@bentoproject/date-display/styles.css';\n\nfunction App() {\n return (\n (\n
{`ISO: ${date.iso}; locale: ${date.localeString}`}
\n )}\n />\n );\n}\n```\n\n### Interactivity and API usage\n\nThe Bento Date Display component does not have an imperative API. However, the Bento Date Display Preact/React component does accept a `render` prop that renders the consumer's template. This `render` prop should be a function which the Bento Date Display Preact/React component can use to render its template. The `render` callback will be provided a variety of date-related parameters for consumers to interpolate in the rendered template. See the [`render` prop section](#render) for more information.\n\n### Layout and style\n\nThe Bento Date Display Preact/React component allows consumers to render their own templates. These templates may use inline styles, `\n```\n\n### Attributes\n\n#### `datetime`\n\nThe `datetime` attribute specifies the date and time in a standard ISO 8601 date\nstring (e.g. 2017-08-02T15:05:05.000Z) or the string `now`. If set to `now`,\n`bento-date-display` will use the time the page loaded to render its template.\n\n#### `timestamp-ms`\n\nThe `timestamp-ms` attribute specifies the date and time using the number of\nmilliseconds since 1970-01-01T0:00:00.000Z\n\n#### `timestamp-seconds`\n\nThe `timestamp-seconds` attribute specifies the date and time using the number\nof seconds since 1970-01-01T0:00:00.000Z\n\n#### `locale` (optional)\n\nAn internationalization language string for each timer unit. The default value\nis `en` (for English). This attribute supports all values that are supported by\nthe user's browser.\n\n#### `display-in` (optional)\n\nIf set to the value `utc`, the `display-in` attribute will convert the given\ndate to UTC.\n\n#### `offset-seconds` (optional)\n\nThe `offset-seconds` attribute specifies an integer number of seconds to shift\nthe given date.\n\n#### `data-options-\\*` (optional)\n\nThe `data-options-*` supports all the options under [Intl.DateTimeFormat.options](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/DateTimeFormat#parameters)\nparameter that specifies the formatting style to use for `localeString` format.\nValid attributes include: `data-options-date-style`, `data-options-time-style`, etc.\n\nNote that if `display-in` attrubute is set to `utc`, the value of\n`data-options-time-zone` will automatically be converted to `UTC`.\n\n### Styling\n\nYou may use the `bento-date-display` element selector to style the Bento Date Display component freely.\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/date-display\n```\n\n```javascript\nimport React from 'react';\nimport {BentoDateDisplay} from '@bentoproject/date-display/react';\nimport '@bentoproject/date-display/styles.css';\n\nfunction App() {\n return (\n (\n
{`ISO: ${date.iso}; locale: ${date.localeString}`}
\n )}\n />\n );\n}\n```\n\n### Interactivity and API usage\n\nThe Bento Date Display component does not have an imperative API. However, the Bento Date Display Preact/React component does accept a `render` prop that renders the consumer's template. This `render` prop should be a function which the Bento Date Display Preact/React component can use to render its template. The `render` callback will be provided a variety of date-related parameters for consumers to interpolate in the rendered template. See the [`render` prop section](#render) for more information.\n\n### Layout and style\n\nThe Bento Date Display Preact/React component allows consumers to render their own templates. These templates may use inline styles, `\n```\n\n### Attributes\n\n#### `datetime`\n\nThe `datetime` attribute specifies the date and time in a standard ISO 8601 date\nstring (e.g. 2017-08-02T15:05:05.000Z) or the string `now`. If set to `now`,\n`bento-date-display` will use the time the page loaded to render its template.\n\n#### `timestamp-ms`\n\nThe `timestamp-ms` attribute specifies the date and time using the number of\nmilliseconds since 1970-01-01T0:00:00.000Z\n\n#### `timestamp-seconds`\n\nThe `timestamp-seconds` attribute specifies the date and time using the number\nof seconds since 1970-01-01T0:00:00.000Z\n\n#### `locale` (optional)\n\nAn internationalization language string for each timer unit. The default value\nis `en` (for English). This attribute supports all values that are supported by\nthe user's browser.\n\n#### `display-in` (optional)\n\nIf set to the value `utc`, the `display-in` attribute will convert the given\ndate to UTC.\n\n#### `offset-seconds` (optional)\n\nThe `offset-seconds` attribute specifies an integer number of seconds to shift\nthe given date.\n\n#### `data-options-\\*` (optional)\n\nThe `data-options-*` supports all the options under [Intl.DateTimeFormat.options](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/DateTimeFormat#parameters)\nparameter that specifies the formatting style to use for `localeString` format.\nValid attributes include: `data-options-date-style`, `data-options-time-style`, etc.\n\nNote that if `display-in` attrubute is set to `utc`, the value of\n`data-options-time-zone` will automatically be converted to `UTC`.\n\n### Styling\n\nYou may use the `bento-date-display` element selector to style the Bento Date Display component freely.\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/date-display\n```\n\n```javascript\nimport React from 'react';\nimport {BentoDateDisplay} from '@bentoproject/date-display/react';\nimport '@bentoproject/date-display/styles.css';\n\nfunction App() {\n return (\n (\n
{`ISO: ${date.iso}; locale: ${date.localeString}`}
\n )}\n />\n );\n}\n```\n\n### Interactivity and API usage\n\nThe Bento Date Display component does not have an imperative API. However, the Bento Date Display Preact/React component does accept a `render` prop that renders the consumer's template. This `render` prop should be a function which the Bento Date Display Preact/React component can use to render its template. The `render` callback will be provided a variety of date-related parameters for consumers to interpolate in the rendered template. See the [`render` prop section](#render) for more information.\n\n### Layout and style\n\nThe Bento Date Display Preact/React component allows consumers to render their own templates. These templates may use inline styles, `\n```\n\n### Attributes\n\n#### `datetime`\n\nThe `datetime` attribute specifies the date and time in a standard ISO 8601 date\nstring (e.g. 2017-08-02T15:05:05.000Z) or the string `now`. If set to `now`,\n`bento-date-display` will use the time the page loaded to render its template.\n\n#### `timestamp-ms`\n\nThe `timestamp-ms` attribute specifies the date and time using the number of\nmilliseconds since 1970-01-01T0:00:00.000Z\n\n#### `timestamp-seconds`\n\nThe `timestamp-seconds` attribute specifies the date and time using the number\nof seconds since 1970-01-01T0:00:00.000Z\n\n#### `locale` (optional)\n\nAn internationalization language string for each timer unit. The default value\nis `en` (for English). This attribute supports all values that are supported by\nthe user's browser.\n\n#### `display-in` (optional)\n\nIf set to the value `utc`, the `display-in` attribute will convert the given\ndate to UTC.\n\n#### `offset-seconds` (optional)\n\nThe `offset-seconds` attribute specifies an integer number of seconds to shift\nthe given date.\n\n#### `data-options-\\*` (optional)\n\nThe `data-options-*` supports all the options under [Intl.DateTimeFormat.options](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/DateTimeFormat#parameters)\nparameter that specifies the formatting style to use for `localeString` format.\nValid attributes include: `data-options-date-style`, `data-options-time-style`, etc.\n\nNote that if `display-in` attrubute is set to `utc`, the value of\n`data-options-time-zone` will automatically be converted to `UTC`.\n\n### Styling\n\nYou may use the `bento-date-display` element selector to style the Bento Date Display component freely.\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/date-display\n```\n\n```javascript\nimport React from 'react';\nimport {BentoDateDisplay} from '@bentoproject/date-display/react';\nimport '@bentoproject/date-display/styles.css';\n\nfunction App() {\n return (\n (\n
{`ISO: ${date.iso}; locale: ${date.localeString}`}
\n )}\n />\n );\n}\n```\n\n### Interactivity and API usage\n\nThe Bento Date Display component does not have an imperative API. However, the Bento Date Display Preact/React component does accept a `render` prop that renders the consumer's template. This `render` prop should be a function which the Bento Date Display Preact/React component can use to render its template. The `render` callback will be provided a variety of date-related parameters for consumers to interpolate in the rendered template. See the [`render` prop section](#render) for more information.\n\n### Layout and style\n\nThe Bento Date Display Preact/React component allows consumers to render their own templates. These templates may use inline styles, `\n```\n\n### Attributes\n\n#### `datetime`\n\nThe `datetime` attribute specifies the date and time in a standard ISO 8601 date\nstring (e.g. 2017-08-02T15:05:05.000Z) or the string `now`. If set to `now`,\n`bento-date-display` will use the time the page loaded to render its template.\n\n#### `timestamp-ms`\n\nThe `timestamp-ms` attribute specifies the date and time using the number of\nmilliseconds since 1970-01-01T0:00:00.000Z\n\n#### `timestamp-seconds`\n\nThe `timestamp-seconds` attribute specifies the date and time using the number\nof seconds since 1970-01-01T0:00:00.000Z\n\n#### `locale` (optional)\n\nAn internationalization language string for each timer unit. The default value\nis `en` (for English). This attribute supports all values that are supported by\nthe user's browser.\n\n#### `display-in` (optional)\n\nIf set to the value `utc`, the `display-in` attribute will convert the given\ndate to UTC.\n\n#### `offset-seconds` (optional)\n\nThe `offset-seconds` attribute specifies an integer number of seconds to shift\nthe given date.\n\n#### `data-options-\\*` (optional)\n\nThe `data-options-*` supports all the options under [Intl.DateTimeFormat.options](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/DateTimeFormat#parameters)\nparameter that specifies the formatting style to use for `localeString` format.\nValid attributes include: `data-options-date-style`, `data-options-time-style`, etc.\n\nNote that if `display-in` attrubute is set to `utc`, the value of\n`data-options-time-zone` will automatically be converted to `UTC`.\n\n### Styling\n\nYou may use the `bento-date-display` element selector to style the Bento Date Display component freely.\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/date-display\n```\n\n```javascript\nimport React from 'react';\nimport {BentoDateDisplay} from '@bentoproject/date-display/react';\nimport '@bentoproject/date-display/styles.css';\n\nfunction App() {\n return (\n (\n
{`ISO: ${date.iso}; locale: ${date.localeString}`}
\n )}\n />\n );\n}\n```\n\n### Interactivity and API usage\n\nThe Bento Date Display component does not have an imperative API. However, the Bento Date Display Preact/React component does accept a `render` prop that renders the consumer's template. This `render` prop should be a function which the Bento Date Display Preact/React component can use to render its template. The `render` callback will be provided a variety of date-related parameters for consumers to interpolate in the rendered template. See the [`render` prop section](#render) for more information.\n\n### Layout and style\n\nThe Bento Date Display Preact/React component allows consumers to render their own templates. These templates may use inline styles, `\n```\n\n### Attributes\n\n#### `datetime`\n\nThe `datetime` attribute specifies the date and time in a standard ISO 8601 date\nstring (e.g. 2017-08-02T15:05:05.000Z) or the string `now`. If set to `now`,\n`bento-date-display` will use the time the page loaded to render its template.\n\n#### `timestamp-ms`\n\nThe `timestamp-ms` attribute specifies the date and time using the number of\nmilliseconds since 1970-01-01T0:00:00.000Z\n\n#### `timestamp-seconds`\n\nThe `timestamp-seconds` attribute specifies the date and time using the number\nof seconds since 1970-01-01T0:00:00.000Z\n\n#### `locale` (optional)\n\nAn internationalization language string for each timer unit. The default value\nis `en` (for English). This attribute supports all values that are supported by\nthe user's browser.\n\n#### `display-in` (optional)\n\nIf set to the value `utc`, the `display-in` attribute will convert the given\ndate to UTC.\n\n#### `offset-seconds` (optional)\n\nThe `offset-seconds` attribute specifies an integer number of seconds to shift\nthe given date.\n\n#### `data-options-\\*` (optional)\n\nThe `data-options-*` supports all the options under [Intl.DateTimeFormat.options](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/DateTimeFormat#parameters)\nparameter that specifies the formatting style to use for `localeString` format.\nValid attributes include: `data-options-date-style`, `data-options-time-style`, etc.\n\nNote that if `display-in` attrubute is set to `utc`, the value of\n`data-options-time-zone` will automatically be converted to `UTC`.\n\n### Styling\n\nYou may use the `bento-date-display` element selector to style the Bento Date Display component freely.\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/date-display\n```\n\n```javascript\nimport React from 'react';\nimport {BentoDateDisplay} from '@bentoproject/date-display/react';\nimport '@bentoproject/date-display/styles.css';\n\nfunction App() {\n return (\n (\n
{`ISO: ${date.iso}; locale: ${date.localeString}`}
\n )}\n />\n );\n}\n```\n\n### Interactivity and API usage\n\nThe Bento Date Display component does not have an imperative API. However, the Bento Date Display Preact/React component does accept a `render` prop that renders the consumer's template. This `render` prop should be a function which the Bento Date Display Preact/React component can use to render its template. The `render` callback will be provided a variety of date-related parameters for consumers to interpolate in the rendered template. See the [`render` prop section](#render) for more information.\n\n### Layout and style\n\nThe Bento Date Display Preact/React component allows consumers to render their own templates. These templates may use inline styles, `