JSFiddle - React, Tailwind, and code Playground

by houman kargaran

HTML

<div ng-app>
  <h2>Todo</h2>
  <div ng-controller="TodoCtrl">
    <form name="user_submission" novalidate="novalidate" method="post">
      <input type="date" name="date_of_birth" ng-focus="save_data()" ng-model-options="{timezone: 'UTC'}" ng-pattern="/^(19\d{2}|[2-9]\d{3})-(0?[1-9]|1[012])-(0?[1-9]|[12][0-9]|3[01])$/" ng-model="step_content.date_of_birth" required ng-maxlength="10" ng-minlength="10">
      <br>
      <span class="error" ng-show="user_submission.date_of_birth.$error.pattern">Wrong format!</span>
      <span class="error" ng-show="user_submission.date_of_birth.$error.date">Wrong Date!</span>
      <span class="error" ng-show="user_submission.date_of_birth.$error.minlength">Wrong Date!</span>
      <span class="error" ng-show="user_submission.date_of_birth.$error.maxlength">Wrong Date!</span>
    </form>
    {{step_content}}
  </div>

</div>

JavaScript

function TodoCtrl($scope) {
  $scope.step_content = {
    date_of_birth: new Date()
  }

};