JSFiddle - React, Tailwind, and code Playground

by divyanshu013

HTML

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-html -->

    <html lang="en" ng-app="timeExample">
    <head>
      <meta charset="UTF-8">
      <title>Example - example-time-input-directive-production</title>
      
      <script src="//code.angularjs.org/snapshot/angular.min.js"></script>
        
    </head>
    <body>
      <script>
     angular.module('timeExample', [])
       .controller('DateController', ['$scope', function($scope) {
         $scope.example = {
           value: new Date(1970, 0, 1, 14, 56)
         };
       }]);
    </script>
    <form name="myForm" ng-controller="DateController as dateCtrl">
       <label for="exampleInput">Pick a time between 8am and 5pm:</label>
       <input type="time" id="exampleInput" name="input" ng-model="example.value"
           placeholder="HH:mm" min="08:00" max="17:00" required />
       <div role="alert">
         <span class="error" ng-show="myForm.input.$error.required">
             Required!</span>
         <span class="error" ng-show="myForm.input.$error.time">
             Not a valid date!</span>
       </div>
       <tt>value = {{example.value | date: "HH:mm

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-html -->

    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>


<!-- end snippet -->

"}}</tt><br/>
       <tt>myForm.input.$valid = {{myForm.input.$valid}}</tt><br/>
       <tt>myForm.input.$error = {{myForm.input.$error}}</tt><br/>
       <tt>myForm.$valid = {{myForm.$valid}}</tt><br/>
       <tt>myForm.$error.required = {{!!myForm.$error.required}}</tt><br/>
    </form>
    </body>
    </html>

<!-- end snippet -->