date-japanese
Version:
Convert Japanese calendar dates to Western calendar dates and vice versa. Full support for Kanji numerals in Wareki dates.
113 lines (99 loc) • 3.38 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Date-Japanese Browser Demo</title>
<style>
table {
border-collapse: collapse;
width: 50%; /* Adjust table width */
}
table img {
height: 16px;
width: 16px;
}
td, th {
border: 1px solid #ddd; /* Set table border */
padding: 8px; /* Add cell padding */
text-align: left;
}
th {
background-color: #f2f2f2; /* Set header background color */
}
</style>
</head>
<body>
<h1>Date-Japanese Conversion Demo</h1>
<div class="table-container">
<h2>Japanese Calendar to Western Calendar</h2>
<table id="japaneseToWesternTable">
<thead>
<tr>
<th>Input (Japanese)</th>
<th>Format</th>
<th>Output (Western)</th>
</tr>
</thead>
<tbody></tbody>
</table>
</div>
<div class="table-container">
<h2>Western Calendar to Japanese Calendar</h2>
<table id="westernToJapaneseTable">
<thead>
<tr>
<th>Input (Western)</th>
<th>Output (Japanese)</th>
</tr>
</thead>
<tbody></tbody>
</table>
</div>
<script type="module">
import {toWesternCalendar, toJapaneseCalendar} from '../../dist/build.mjs';
// Data for the tables
const japaneseDates = [
{input: '明治元年1月25日', format: 'YYYY-MM-DD', expected: '1868-01-25'},
{input: '明治45年7月29日', format: 'YYYY-MM-DD', expected: '1912-07-29'},
];
const westernDates = [
'1868-01-25',
'1912-07-29',
];
/**
* Populates a table with date conversion results.
* @param {string} tableId The ID of the table to populate.
* @param {Array<object>} data The data to use for conversion.
* @param {function} convertFunction The function to use for conversion.
*/
const populateTable = async (tableId, data, convertFunction) => {
const tbody = document.querySelector(`#${tableId} tbody`);
for (const item of data) {
const row = tbody.insertRow();
const inputCell = row.insertCell();
let outputCell;
if (tableId === 'japaneseToWesternTable') {
// Add a format cell for japaneseToWesternTable
const formatCell = row.insertCell();
outputCell = row.insertCell();
formatCell.textContent = item.format || '';
} else {
// No format cell needed for westernToJapaneseTable
outputCell = row.insertCell();
}
inputCell.textContent = item.input || item;
outputCell.innerHTML = '<img src="loading.gif">';
// Simulate a delay for demonstration purposes
await new Promise(resolve => setTimeout(resolve, 50));
const output = convertFunction(item.input || item, item.format);
outputCell.textContent = output;
}
}
// Populate the tables with conversion results
populateTable('japaneseToWesternTable', japaneseDates, toWesternCalendar);
populateTable('westernToJapaneseTable', westernDates, toJapaneseCalendar);
</script>
</body>
</html>