JSFiddle - React, Tailwind, and code Playground

by ifonecoder

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-animate.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-touch.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/2.5.0/ui-bootstrap.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/2.5.0/ui-bootstrap-tpls.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<div ng-app ng-controller="PlansAppController">
    <div class="container">
      <uib-tabset active="activeForm">
        <uib-tab index="0" heading="Drives">
              <div class="col-md-3">
                    <div class="form-group move-down">
                      <input type="text" class="form-control"  ng-model="formdata.trip_from" placeholder="From"/>
                    </div>
              </div>
              <div class="col-md-3">
                    <div class="form-group move-down">
                      <input type="text"  class="form-control"  ng-model="formdata.trip_to" placeholder="To"/>
                    </div>
              </div>
              <div class="col-md-2">
                <button type="submit" class="btn btn-default" ng-click="add_plan(); " >Add</button>
              </div>
        </uib-tab>
      </uib-tabset>
    </div>
  </div>

CSS

form.tab-form-demo .tab-pane {
      margin: 20px 20px;
    }
    .container{
      width: 100%;
      margin: 0 auto;
      margin-top: 20px;
    }

JavaScript

function PlansAppController($scope, $http) {

  $scope.oneAtATime = true;

  $scope.formdata = {}
  $scope.plans = [
    {
      from: "aus",
      to: "dallas",
      date: "10/04/2017"
    },
    {
      from: "aus",
      to: "houston",
      date: "10/06/2017"
    },
    {
      from: "aus",
      to: "lousiana",
      date: "10/10/2017"
    },];


  $scope.plansdesc = function(plan){
        return plan["from"] + "->" + plan["to"];
  };


$scope.dateOptions = {
    dateDisabled: false,
    formatYear: 'yy',
    maxDate: new Date(2020, 5, 22),
    minDate: new Date(),
    startingDay: 1
  };
  $scope.formats = ['dd-MMMM-yyyy', 'yyyy/MM/dd', 'dd.MM.yyyy', 'shortDate'];
  $scope.format = $scope.formats[0];
  $scope.altInputFormats = ['M!/d!/yyyy'];

  $scope.popup1 = {
    opened: false
  };

$scope.open1 = function() {
    $scope.popup1.opened = true;
  };

$scope.add_plan = function(){
       $scope.plans.push({from: $scope.formdata.trip_from, to: $scope.formdata.trip_to, time: $scope.formdata.trip_dt});
       $scope.clearInputs();
};

$scope.clearInputs = function(){
        $scope.formdata.trip_dt="";
        $scope.formdata.trip_to="";
        $scope.formdata.trip_from="";
}

};