JSFiddle - React, Tailwind, and code Playground

by mmansion

HTML

<script>
	new onyx.sample.TimePickerSample().renderInto(document.body);
</script>

CSS

.onyx-sample {
	padding: 10px;
}
.onyx-sample-tools {
	padding-bottom:10px;
}
.onyx-sample-tools > * {
	margin: 3px;
}
.onyx-sample-divider {
	color: #F49200;
	text-transform: uppercase;
	font-family: Segoe UI, Prelude Medium, Helvetica, Verdana, sans-serif;
	font-size: 14px;
	font-weight: bold;
	margin-bottom: 8px;
}
.onyx-sample-result-box {
	width:100%;
}
.onyx-sample-result {
	padding:8px;
}
.onyx-sample-spaced-button {
	margin:3px;
}
.onyx-sample-animate-label {
	vertical-align:middle; 
	padding-left:5px;
	margin-right: 15px;
}
.onyx-sample-label {
	color: #1879CD;
	font-size: 18px;
	text-transform: uppercase;
}
.onyx-sample-popup {
	font-size: 30px;
	text-align: center;
}
.onyx-contextualpopup-button-container{
	padding:10px;
}

JavaScript

enyo.kind({
	name: "onyx.sample.TimePickerSample",
	kind: "FittableRows",
	classes: "onyx enyo-fit",
	handlers: {
		onSelect: "updateTimeValues"
	},
	components: [
		{kind: "onyx.Toolbar", content:$L("Times")},
		{kind: "FittableColumns", style: "padding: 10px", components:[
			{components: [
				{content:$L("Choose Locale:"), classes:"onyx-sample-divider"},
				{kind: "onyx.PickerDecorator", style:"padding:10px;", onSelect: "pickerHandler", components: [
					{content: "Pick One...", style: "width: 200px"},
					{kind: "onyx.Picker", components: [
						{content: 'en_us', active:true},
						{content: 'en_ca'},
						{content: 'en_ie'},
						{content: 'en_gb'},
						{content: 'en_mx'},
						{content: 'de_de'},
						{content: 'fr_fr'},
						{content: 'fr_ca'},
						{content: 'it_it'},
						{content: 'es_es'},
						{content: 'es_mx'},
						{content: 'es_us'}
					]}
				]}
			]}
		]},

		{kind:"onyx.Button",content:"Get Times", style:"margin:10px;", ontap:"getTimes"},
		{kind:"onyx.Button",content:"Reset Times", ontap:"resetTimes"},

		{style:"width:100%;height:5px;background-color:black;margin-bottom:5px;"},
		{caption: "Dates", style: "padding: 10px", components: [
				{content:"TIME",classes:"onyx-sample-divider"},
			{classes: "onyx-toolbar-inline", components: [
				{name:"timePicker1", kind:"onyx.TimePicker"}
			]},
			{kind: "onyx.Groupbox", style:"padding:5px;", components: [
				{kind: "onyx.GroupboxHeader", content: "Value"},
				{name:"timePicker1Value", style:"padding:15px;"}
			]},
			{content:"TIME 24 HOUR MODE",classes:"onyx-sample-divider"},
			{classes: "onyx-toolbar-inline", components: [
				{name:"timePicker2", kind:"onyx.TimePicker", is24HrMode:true}
			]},
			{kind: "onyx.Groupbox", style:"padding:5px;", components: [
				{kind: "onyx.GroupboxHeader", content: "Localized Value"},
				{name:"timePicker2Value", style:"padding:15px;"}
			]},
			{content:"DISABLED",classes:"onyx-sample-divider"},
			{classes: "onyx-toolbar-inline",...