Convertir calendario occidental al japones con código JavaScript

Es fácil convertir el calendario occidental al calendario japonés con unas pocas líneas de JavaScript, combinar el datepicker para mostrar el idioma japonés y visualizar la era japonesa. Hay algunos artículos para compartir al respecto. En este artículo, compartiré el código JavaScript para realizar lo mostrado a continuación, asumiendo que el código está en lenguaje PHP, similar a otros lenguajes.

1. HTML: muestra el texto de entrada para elegir la fecha en el archivo 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: Puedes editar el color del calendario aquí.

<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. Biblioteca de scripts: Jquery, datepicker, moment js

– Incluir biblioteca en 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>

– Establecer texto de entrada para mostrar la fecha. Cuando eliges la fecha, se convierte al calendario japonés.

$(‘.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));
}
});

– Cambiar el calendario occidental al calendario japonés.

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]);

        //明治5年以降のみ
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;
}

Descargar codigo para convertir calendario occidental al japones

Deja un comentario