117 lines
2.8 KiB
JavaScript
117 lines
2.8 KiB
JavaScript
import { css } from '@lion/core';
|
|
import { html, storiesOf } from '@open-wc/demoing-storybook';
|
|
import { formatDate } from '../index.js';
|
|
|
|
const formatDateDemoStyle = css`
|
|
.demo-table {
|
|
border-collapse: collapse;
|
|
text-align: right;
|
|
}
|
|
|
|
.demo-table thead > tr {
|
|
border-bottom: 1px solid grey;
|
|
}
|
|
|
|
.demo-table thead > tr > :first-child,
|
|
.demo-table tbody > tr > :first-child,
|
|
.demo-table tfoot > tr > :first-child {
|
|
text-align: left;
|
|
}
|
|
|
|
.demo-table th,
|
|
.demo-table td {
|
|
padding: 8px;
|
|
}
|
|
`;
|
|
|
|
storiesOf('Localize System|Date').add(
|
|
'formatDate',
|
|
() => html`
|
|
<style>
|
|
${formatDateDemoStyle}
|
|
</style>
|
|
<table class="demo-table">
|
|
<thead>
|
|
<tr>
|
|
<th>Options</th>
|
|
<th>Code</th>
|
|
<th>Output</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td>Default</td>
|
|
<td><code>formatDate(new Date())</code></td>
|
|
<td>${formatDate(new Date())}</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Date display</td>
|
|
<td>
|
|
<code
|
|
>formatDate(new
|
|
Date(){weekday:'long',year:'numeric',month:'long',day:'2-digit'})</code
|
|
>
|
|
</td>
|
|
<td>
|
|
${formatDate(new Date(), {
|
|
weekday: 'long',
|
|
year: 'numeric',
|
|
month: 'long',
|
|
day: '2-digit',
|
|
})}
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Date without year</td>
|
|
<td>
|
|
<code>
|
|
formatDate(new Date(), {weekday:'long',month:'long',day:'2-digit'})
|
|
</code>
|
|
</td>
|
|
<td>
|
|
${formatDate(new Date(), {
|
|
weekday: 'long',
|
|
month: 'long',
|
|
day: '2-digit',
|
|
})}
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Date without month</td>
|
|
<td>
|
|
<code>
|
|
formatDate(new Date(), {weekday:'long',year:'numeric',day:'2-digit'})
|
|
</code>
|
|
</td>
|
|
<td>
|
|
${formatDate(new Date(), {
|
|
weekday: 'long',
|
|
year: 'numeric',
|
|
day: '2-digit',
|
|
})}
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Date without day</td>
|
|
<td>
|
|
<code>
|
|
formatDate(new Date(), {weekday:'long',year:'numeric',month:'long'})
|
|
</code>
|
|
</td>
|
|
<td>
|
|
${formatDate(new Date(), {
|
|
weekday: 'long',
|
|
month: 'long',
|
|
year: 'numeric',
|
|
})}
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Locale</td>
|
|
<td><code>formatDate(new Date(){locale:'nl-NL'})</code></td>
|
|
<td>${formatDate(new Date(), { locale: 'nl-NL' })}</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
`,
|
|
);
|