JSFiddle - React, Tailwind, and code Playground

by lega911

HTML

<script src="https://angularlight.org/bin/alight_0.14.last.min.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.0/themes/smoothness/jquery-ui.css">
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js"></script>
<div>
  <h1>value: {{date}}</h1>
  twoway:
  <datepicker :value="date" @change="date=$value"></datepicker>
  oneway (out)
  <datepicker @change="date=$value"></datepicker>
  oneway (in)
  <datepicker :value="date"></datepicker>
</div>

CSS

.ui-datepicker {font-size:11px;}

JavaScript

alight.component('datepicker', function(scope, element) {
	element.innerHTML = '<div></div>';
  var $el = $(element.children[0]).datepicker({
  	onSelect: (value) => scope.$sendEvent('change', value)
  });
  
	return {
    props: {
    	value: (value) => $el.datepicker('setDate', value)
    },
    onDestroy: () => $el.datepicker('destroy')
  }
});

alight('body', {date: '01/01/2017'});