Javascript code convert Western calendar to Japanese calendar

It’s easy to convert western calendar to Japanese calendar with a few lines of Javascript (西 暦 を 日本 暦 に 変 換 す る), to combine the datepicker to display the Japanese language, to display the Japanese era, there are few articles to share. In this article, I will share the javascript code to perform as shown below, assuming the code is in php language, similar to other languages.

1. Html: Show input text to choose date in file index.php

<input class=”form-control date” type=”text” value=”<?php echo date(‘Y-m-d’); ?>” autocomplete=”off”>
<span class=”show_date”></span>

2. Css: You can edit the calendar color at here.

<style type=”text/css”>
.ui-datepicker-calendar thead {
background: #cee4f7;
}
.ui-datepicker-week-end, .ui-datepicker-week-end a{
background: #facbcb !important;
}
.ui-datepicker-calendar .ui-datepicker-week-end .ui-state-active{
background: #007fff !important;
color: #fff
}
</style>

3. Script library: Jquery, datepicker, moment js

– Include library to index.php

<script src=”assets/jquery2.2.0/jquery.min.js”></script>

<!– // for datetime wareki –>
<link rel=”stylesheet” href=”assets/datetime-wareki/jquery-ui.css”>
<script src=”assets/datetime-wareki/jquery-ui.js”></script>
<script src=”assets/datetime-wareki/jquery.ui.datepicker-ja.min.js”></script>
<script src=”assets/datetime-wareki/moment.min.js”></script>

– Set input text to show date. When you choose date, it convert to Japanese calendar.

$(‘.show_date’).html(toWareki(“<?php echo date(‘Y-m-d’);?>”));

$(‘.date’).datepicker({
changeYear: true,
changeMonth: true,
dateFormat: ‘yy-mm-dd’,
locale: ‘ja’,
yearRange: “-120:+0”,
onSelect: function(dateText) {
$(‘.show_date’).text(toWareki(dateText));
}
});

– Change Western calendar to Japanese calendar

function toWareki(dateText) {
if (!dateText) {
return ”;
}

        if (dateText.indexOf(‘/’) !== -1) {
dateText = dateText.replace(‘/’, ‘-‘);
}
if (dateText.indexOf(‘/’) !== -1) {
dateText = dateText.replace(‘/’, ‘-‘);
}

        var date_split = formatDate(dateText);
var dates = date_split.split(‘,’);
var y = parseInt(dates[0]);
var m = parseInt(dates[1]);
var d = parseInt(dates[2]);

        //明治５年以降のみ
if (y < 1873) {
return false;
}

        var date =  formatDate(dateText, 1);
var label = ”; var localYear = ”;
//日付で分割
// console.log(“date”, date);
if (date >= 20190501) {
label = ‘令和’;
localYear = y – 2019 +1; /////
} else if (date >= 19890108) {
label = ‘平成’;
localYear = y – 1988;
} else if (date >= 19261225) {
label = ‘昭和’;
localYear = y – 1925;
} else if (date >= 19120730){
label = ‘大正’;
localYear = y – 1911;
} else {
label = ‘明治’;
localYear = y – 1868;
}
//1年は元年
if (localYear == 1) {
wareki = label + ‘元年’;
} else {
wareki = label + localYear + ‘年’;
}

        return wareki + m + ‘月’ + d + ‘日’;
}

    function formatDate(date, option, format) {
// format is ‘/’ or ‘-‘
var d = new Date(date),
month = ” + (d.getMonth() + 1),
day = ” + d.getDate(),
year = d.getFullYear();

        if (month.length < 2) month = ‘0’ + month;
if (day.length < 2) day = ‘0’ + day;

        var result;
if (!option) {
result = [year, month, day].join(format);
} else {
result = [year, month, day].join(”);
}
return result;
}

Download full code at here