JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html ng-app="app">
<head>
  <title>Playground</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.min.js"></script>
  <script>
    (function () {
      var app = angular.module('app', []);
      app.controller('GlobalController', function ($scope) {
        $scope.options = { timezone: 'PST' };
      });
    })();
  </script>
</head>
<body ng-controller="GlobalController">
  <form>
    <div>
      <label>TZ:</label>
      <select ng-model="options.timezone">
        <option value="PST">PST</option>
        <option value="EST">EST</option>
      </select>
    </div>
    <div>
      <div>
        <label>Date:</label>
        <input type="date" ng-model="scheduled" ng-model-options="options" />
      </div>
      <div>
        <label>Time:</label>
        <input type="time" ng-model="scheduled" ng-model-options="options" />
      </div>
    </div>
    <div>
      <p>Summary: {{scheduled | date : 'medium' : options.timezone}} {{options.timezone}}</p>
    </div>
  </form>
</body>
</html>