Responsive Website Design: Responsive Appointment Form using Angular js

index.html

<!doctype html>
<html ng-app="ui.bootstrap.demo">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.13/angular.js"></script>
<script src="https://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.13.0.js"></script>
<script src="reg.js"></script>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
<style>
.full button span {
 background-color: limegreen;
 border-radius: 32px;
 color: black;
}
.partially button span {
 background-color: orange;
 border-radius: 32px;
 color: black;
}
.container {
 padding:10px;
 margin:auto;
}
pre {
 color:#FF0000;
}
.panel-default {
 border-color: #ddd;
 padding: 10px;
}
</style>
</head>
<body>
<header>
  <p>schedule Appointment</p>
</header>
<div class="container">
  <div class="row">
    <div class="col-md-12">
      <section class="panel panel-default  post-comments">
        <div class="panel-heading"><a name="2">Book your Appointment note(Saturday/Sunday is holidays)</a> </div>
        <div ng-controller="DatepickerDemoCtrl">
          <pre>Your Selected Appointment date is: <em>{{dt | date:'fullDate' }}</em></pre>
          <form role="form">
            <div class="form-group">
              <label for="email">Select Date:</label>
              <div class="row">
                <div class="col-md-6">
                  <p class="input-group">
                    <input type="text" class="form-control" datepicker-popup="{{format}}" ng-model="dt" is-open="opened" min-date="minDate" max-date="'2020-06-22'" datepicker-options="dateOptions" date-disabled="disabled(date, mode)" ng-required="true" close-text="Close" />
                    <span class="input-group-btn">
                    <button type="button" class="btn btn-default" ng-click="open($event)"><i class="glyphicon glyphicon-calendar"></i></button>
                    </span> </p>
                </div>
              </div>
            </div>
          </form>
        </div>
        <form role="form">
          <div class="form-group">
            <label for="email">Email:</label>
            <input type="email" class="form-control" id="email" placeholder="Enter email">
          </div>
          <div class="form-group">
            <label for="pwd">Mobile no.:</label>
            <input type="password" class="form-control" id="pwd" placeholder="Enter Mobile no.">
          </div>
          <div class="form-group">
            <label for="name">Name:</label>
            <input type="name" class="form-control" id="name" placeholder="Enter name">
          </div>
          <div class="form-group">
            <label for="name">Address:</label>
            <input type="address" class="form-control" id="address" placeholder="Enter address">
          </div>
          <div class="form-group">
            <label for="select">Reason</label>
            <select class="selectpicker">
              <optgroup label="Reason">
              <option>Reason2</option>
              <option>Reason3</option>
              <option>Reason4</option>
              </optgroup>
              <optgroup label="Other">
              <option>Reason5</option>
              <option>Reason6</option>
              <option>Reason7</option>
              </optgroup>
            </select>
          </div>
          
          <button type="submit" class="btn btn-success">Submit</button>
        </form>
      </section>
    </div>
  </div>
</div>
</body>
</html>

reg.js

angular.module('ui.bootstrap.demo', ['ui.bootstrap']);
angular.module('ui.bootstrap.demo').controller('DatepickerDemoCtrl', function ($scope) {
  $scope.today = function() {
    $scope.dt = new Date();
  };
  $scope.today();

$scope.clear = function () {
    $scope.dt = null;
  };

// Disable weekend selection
  $scope.disabled = function(date, mode) {
    return ( mode === 'day' && ( date.getDay() === 0 || date.getDay() === 6 ) );
  };

$scope.toggleMin = function() {
    $scope.minDate = $scope.minDate ? null : new Date();
  };
  $scope.toggleMin();

$scope.open = function($event) {
    $event.preventDefault();
    $event.stopPropagation();

$scope.opened = true;
  };

$scope.dateOptions = {
    formatYear: 'yy',
    startingDay: 1
  };

$scope.formats = ['dd-MMMM-yyyy', 'yyyy/MM/dd', 'dd.MM.yyyy', 'shortDate'];
  $scope.format = $scope.formats[0];

var tomorrow = new Date();
  tomorrow.setDate(tomorrow.getDate() + 1);
  var afterTomorrow = new Date();
  afterTomorrow.setDate(tomorrow.getDate() + 2);
  $scope.events =
    [
      {
        date: tomorrow,
        status: 'full'
      },
      {
        date: afterTomorrow,
        status: 'partially'
      }
    ];

$scope.getDayClass = function(date, mode) {
    if (mode === 'day') {
      var dayToCheck = new Date(date).setHours(0,0,0,0);

for (var i=0;i<$scope.events.length;i++){
        var currentDay = new Date($scope.events[i].date).setHours(0,0,0,0);

if (dayToCheck === currentDay) {
          return $scope.events[i].status;
        }
      }
    }

return '';
  };
});

Wednesday 6 May 2015

Responsive Appointment Form using Angular js

index.html

reg.js

1 comment: