JSFiddle - React, Tailwind, and code Playground

by Premchand R

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-material/1.1.1/angular-material.js"></script>
<div ng-app="testMod" ng-controller="testCtrl">

  <p>Basic Mode: {{date | date:'yyyy/MM/dd HH:mm a'}}</p>
  <div class="modal-dialog">
    <div class="modal-content">
      <time-date-picker ng-model="date"></time-date-picker>
    </div>
  </div>
  <p>Start on Time: {{date | date:'yyyy/MM/dd HH:mm a'}}</p>
  <div class="modal-dialog">
    <div class="modal-content">
      <time-date-picker ng-model="date" default-mode="time"></time-date-picker>
    </div>
  </div>
  <p>Time Only: {{date | date:'yyyy/MM/dd HH:mm a'}}</p>
  <div class="modal-dialog">
    <div class="modal-content">
      <time-date-picker ng-model="date" display-mode="time"></time-date-picker>
    </div>
  </div>
  <p>Date Only: {{date | date:'yyyy/MM/dd HH:mm a'}}</p>
  <div class="modal-dialog">
    <div class="modal-content">
      <time-date-picker ng-model="date" display-mode="date"></time-date-picker>
    </div>
  </div>
  <script type="text/ng-template" id="time-date.tpl">
    <div ng-class="modeClass()" class="time-date">
      <div ng-click="modeSwitch()" class="display">
        <div class="title">{{display.title()}}</div>
        <div class="content">
          <div class="super-title">{{display.super()}}</div>
          <div ng-bind-html="display.main()" class="main-title"></div>
          <div class="sub-title">{{display.sub()}}</div>
        </div>
      </div>
      <div class="control">
        <div class="slider">
          <div class="date-control">
            <div class="title"><span class="month-part">{{date | date:'MMMM'}}
                <select ng-model="calendar._month" ng-change="calendar.monthChange()" ng-options="calendar._months.indexOf(month) as month for month in calendar._months"></select></span>
              <input ng-model="calendar._year" ng-change="calendar.monthChange()" type="number" class="year-part">
            </div>
            <div class="headers">
...

JavaScript

angular.module('testMod', []).controller('testCtrl', function($scope) {
  return $scope.date = new Date();
}).directive('timeDatePicker', [
  '$filter', '$sce', function($filter, $sce) {
    return {
      restrict: 'AE',
      replace: true,
      scope: {
        _modelValue: '=ngModel'
      },
      require: 'ngModel',
      templateUrl: 'time-date.tpl',
      link: function(scope, element, attrs, ngModel) {
        var ref;
        scope._mode = (ref = attrs.defaultMode) != null ? ref : 'date';
        scope._displayMode = attrs.displayMode;
        ngModel.$render = function() {
          scope.date = ngModel.$modelValue != null ? new Date(ngModel.$modelValue) : new Date();
          scope.calendar._year = scope.date.getFullYear();
          scope.calendar._month = scope.date.getMonth();
          return scope.clock._minutes = scope.date.getMinutes();
        };
        scope.save = function() {
          return scope._modelValue = scope.date;
        };
        return scope.cancel = function() {
          return ngModel.$render();
        };
      },
      controller: [
        '$scope', function(scope) {
          scope.date = new Date();
          scope.display = {
            title: function() {
              if (scope._mode === 'date') {
                return $filter('date')(scope.date, 'EEEE h:mm a');
              } else {
                return $filter('date')(scope.date, 'MMMM d yyyy');
              }
            },
            "super": function() {
              if (scope._mode === 'date') {
                return $filter('date')(scope.date, 'MMM');
              } else {
                return '';
              }
            },
            main: function() {
              return $sce.trustAsHtml(scope._mode === 'date' ? $filter('date')(scope.date, 'd') : ($filter('date')(scope.date, 'h:mm')) + "<small>" + ($filter('date')(scope.date, 'a')) + "</small>");
            },
            sub: function() {
              if (scope._mode === 'date') {
  ...