JSFiddle - React, Tailwind, and code Playground

by Pradeep Shankar

HTML

<link rel="stylesheet" href="https://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<div id="app" ng-app="myApp" ng-controller="myCtrl">
  <form name="myform">
    <div data-ng-class="{'has-error': (myform.fmDate.$touched && myform.fmDate.$invalid)}">
      <input type="text" name="fmDate" id="fmDate" placeholder="Enter from date" ng-model="fmDate" required>
      <ng-messages for="myform.fmDate.$error" data-ng-show="(myform.fmDate.$touched && myform.fmDate.$invalid)">
        <ng-message when="required">Date is required</ng-message>
      </ng-messages>
    </div><br/>
    <div>
      <input type="text" name="test2" id="test2" placeholder="Test 2" ng-model="test2" name="test2" required>
       <ng-messages for="myform.test2.$error" data-ng-show="(myform.test2.$touched && myform.test2.$invalid)">
        <ng-message when="required">required</ng-message>
      </ng-messages>
    </div>
  </form>
</div>

JavaScript

angular.module('myApp', []).controller('myCtrl', function($scope) {
  $scope.nodate = true;
  $("#fmDate").datepicker({
    dateFormat: 'dd M, yy',
    defaultDate: new Date(),
    yearRange: "-100:+0",
    maxDate: '0',
    changeMonth: true,
    changeYear: true,
    onSelect: function(date) {
      $scope.fmDate = date;
      $scope.nodate = false;
    }

  });

});