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://hifive.github.io/hifive-ui-library/hifive-ui-library/WebContent/components/calendar/src/CalendarController.js"></script>
<link rel="stylesheet" href="https://hifive.github.io/hifive-ui-library/hifive-ui-library/WebContent/components/calendar/src/CalendarController.css">
<div id="container"></div>
<p>
  <input type="number" value="" id="year" size="4" />年
  <input type="number" value="" id="month" size="2" />月
</p>

CSS

#year {
  width: 80px;
}
#month, #day {
  width: 40px;
}

JavaScript

$(function(){
	var mainController = {
		__name : 'h5.ui.container.MainController',
		calendarController: h5.ui.components.Calendar,
		__meta : {
			calendarController: {
				rootElement: '#container'
			},
		},

		__init: function(){
      var d = new Date;
    	this.$find("#year").val(d.getFullYear());
      this.$find("#month").val(d.getMonth() + 1);
		},
    
    '#year change': function(context, $el) {
    	this.calendarController.setYear($el.val());
    },

    '#month change': function(context, $el) {
      if ($el.val() != 12) {
        $el.val($el.val() % 12);
      }
    	this.calendarController.setMonth($el.val() - 1);
    }
	};

	h5.core.controller('body', mainController);

});