<div id="app"></div>
table{
border-collapse: collapse;
}
tbody td {
text-align: center;
}
th,td {
padding: 10px;
border: 1px solid gray;
}
import * as dateFns from "https://cdn.skypack.dev/date-fns@2.28.0";
const app = document.getElementById("app");
app.innerHTML = `
<table>
<thead>
<tr>
<th>date</th>
<th>new Date()</th>
<th>dateFns.parse()</th>
</tr>
</thead>
<tbody>
<tr>
<td>2022-13-01</td>
<td>${new Date('2022-13-01')}</td>
<td>${dateFns.parse('2022-13-01', 'yyyy-MM-dd', new Date())}</td>
</tr>
<tr>
<td>2022-01-32</td>
<td>${new Date('2022-01-32')}</td>
<td>${dateFns.parse('2022-01-32', 'yyyy-MM-dd', new Date())}</td>
</tr>
<tr>
<td>2022-02-29</td>
<td>${new Date('2022-02-29')}</td>
<td>${dateFns.parse('2022-02-29', 'yyyy-MM-dd', new Date())}</td>
</tr>
<tr>
<td>2022-04-31</td>
<td>${new Date('2022-04-31T00:00:00.000Z')}</td>
<td>${dateFns.parse('2022-04-31', 'yyyy-MM-dd', new Date())}</td>
</tr>
</tbody>
</table>
`;
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.