<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.5/angular.min.js"></script>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<script language="javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.7.5/angular-animate.js"></script>
<script language="javascript" src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.14.3.js"></script>
<style>
.dateDiv {
position: relative;
}
.dateDiv .dropdown-menu {
left: auto !important;
right: 0px;
background-color:aliceblue!important;
}
</style>
<script>
var app = angular.module('testApp', ['ngAnimate', 'ui.bootstrap']);
app.controller('spCustomerController', ["$scope", "$http","$window", function ($scope, $http,$window) {
//This will
hide the docking DIV by default.
$scope.dateformat = "MM/dd/yyyy";
$scope.showcalendar = function ($event) {
$scope.showdp = true;
};
$scope.showdp = false;
}]);
</script>
</head>
<body>
<div ng-app="testApp">
<div ng-controller="spCustomerController">
<div class="dateDiv">
<div class="form-group col-md-3 col-sm-3">
<label for="tNumber">Start Date *</label>
<input type="text" class="form-control" ng-click="showcalendar($event)" uib-datepicker-popup="{{dateformat}}" ng-model="dtStartDate" is-open="showdp" show-weeks="false" show-button-bar="false" />
</div>
</div>
</div>
</div>
</body>
</html>
