JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="https://code.htmlhifive.com/h5.css">
<script src="https://code.htmlhifive.com/ejs-h5mod.js"></script>
<script src="https://hifive.github.io/hifive-res/fw/current/h5.dev.js"></script>
<script src="https://www.htmlhifive.com/ja/res/lib/jqplugins/jqueryui/jquery-ui-1.9.1.custom.min.js"></script>
<link rel="stylesheet" href="https://www.htmlhifive.com/ja/res/lib/jqplugins/jqueryui/smoothness/jquery-ui-1.9.1.custom.min.css">
<div id="container">
<input type="text" id="datepicker" value="" />
</div>
JavaScript
/* Japanese initialisation for the jQuery UI date picker plugin. */
/* Written by Kentaro SATO ([email protected]). */
$(function(){
let data = {
closeText: '閉じる', prevText: '<前', nextText: '次>',
currentText: '今日', weekHeader: '週', dateFormat: 'yy/mm/dd',
firstDay: 0, isRTL: false, showMonthAfterYear: true, yearSuffix: '年',
monthNames: [], monthNamesShort: [], dayNames: [],
dayNamesShort: [], dayNamesMin: []
};
// 日付の作成(1〜12月)
for (let i = 1; i <= 12; i++) {
data.monthNames.push(`${i}月`);
data.monthNamesShort.push(`${i}月`);
}
// 曜日の作成(日〜土曜日)
let weekdays = ['日','月','火','水','木','金','土'];
for (let index in weekdays) {
data.dayNames.push(`${weekdays[index]}曜日`);
data.dayNamesShort.push(weekdays[index]);
data.dayNamesMin.push(weekdays[index]);
}
$.datepicker.regional['ja'] = data;
$.datepicker.setDefaults($.datepicker.regional['ja']);
var controller = {
__name: 'DatepickerController',
__ready: function() {
$('#datepicker').datepicker();
}
};
// コントローラの作成と要素へのバインド.
h5.core.controller('#container', controller);
});