Здесь я прикрепил свою зависимость выбора даты и времени
angular.module('HrApp', ['angularjs-datetime-picker']).controller('LeaveController', function($scope, $http) {
$scope.beforeRender = function($view, $dates, $leftDate, $upDate, $rightDate) {
var index = Math.floor(Math.random() * $dates.length);
$dates[index].selectable = false;
}
$scope.start = {
value: new Date(new Date().getFullYear(), new Date().getMonth(), new Date().getDate(), new Date().getHours() + 1, 0)
};
$scope.end = {
value: new Date(new Date().getFullYear(), new Date().getMonth(), new Date().getDate(), new Date().getHours() + 2, 0)
};
// $scope.day=CalculateDays.add($scope.end-$scope.start);
$scope.success = false;
$scope.error = false;
$scope.type = ["Sick Leave", "Annual Leave", "Unpaid Leave", "Maternity", "Bereavement"];
$scope.fetchData = function() {
$http.get('Fetch_LeaveApplication_Data.php').then(function(response) {
$scope.leaveApplicationData = response.data;
});
};
$scope.openModal = function() {
var modal_popup = angular.element('#crudmodal');
modal_popup.modal('show');
};
$scope.closeModal = function() {
var modal_popup = angular.element('#crudmodal');
modal_popup.modal('hide');
};
$scope.addData = function() {
$scope.modalTitle = 'Add Leave Application';
$scope.submit_button = 'Insert';
$scope.TypeOfLeave = "";
$scope.openModal();
};
$scope.fetchSingleData = function(id) {
$http({
method: "POST",
url: "LeaveAction.php",
data: {
'id': id,
'action': 'fetch_single_data'
}
}).then(function(data) {
$scope.TypeOfLeave = data.TypeOfLeave;
$scope.LeaveStart = data.LeaveStart;
$scope.LeaveEnd = data.LeaveEnd;
$scope.hidden_id = id;
$scope.modalTitle = 'Edit Leave Application';
$scope.submit_button = 'Edit';
$scope.openModal();
});
};
/*
$scope.sendEmail=function()
{
$http({
method:"POST",
URL:"SendEmail.php",
data:{
'TypeOfLeave':$scope.TypeOfLeave,
'LeaveStart':$scope.start,
'LeaveEnd':$scope.end
}
}).success(function(data){
if(data.error != '')
{
$scope.success = false;
$scope.error = true;
$scope.errorMessage = data.error;
}
else
{
$scope.success = true;
$scope.error = false;
$scope.successMessage = data.message;
}
});
}
*/
$scope.submitForm = function() {
$http({
method: "POST",
url: "LeaveAction.php",
data: {
'TypeOfLeave': $scope.TypeOfLeave,
'LeaveStart': $scope.start,
'LeaveEnd': $scope.end,
'action': $scope.submit_button,
'id': $scope.hidden_id
}
}).success(function(data) {
if (data.error != '') {
$scope.success = false;
$scope.error = true;
$scope.errorMessage = data.error;
} else {
$scope.success = true;
$scope.error = false;
$scope.successMessage = data.message;
$scope.form_data = {};
$scope.closeModal();
$scope.fetchData();
}
});
};
});
Маршрутизация
/* Routing
*/
var app=angular.module('HrApp',['ngRoute','datatables'])
app.config(['$routeProvider',function($routeProvider){
$routeProvider.when('/leave',{
templateUrl:'imodules/Leave/view/Leave.php',
controller:'LeaveController'
}).when('/profile',{
templateUrl:'imodules/Profile/view/profile.html',
controller:'ProfileController'
}).
otherwise({
redirectTo: 'imodules/Leave/view/Leave.php',
})
}]);
Это мой код просмотра
<!DOCTYPE html>
<html>
<head>
<title>AL</title>
<script src="jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-route.js"></script>
<script src="jquery.dataTables.min.js"></script>
<script src="angular-datatables.min.js"></script>
<script src="bootstrap.min.js"></script>
<link rel="stylesheet" href="bootstrap.min.css">
<link rel="stylesheet" href="datatables.bootstrap.css">
<link rel="stylesheet" href="angularjs-datetime-picker.css" />
<script src="angularjs-datetime-picker.js"></script>
<link href="src/datepicker.css" rel="stylesheet">
<script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.8.4/moment.min.js"></script>
<script src="src/datepicker.js"></script>
<!-- Bootstrap library -->
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
<script src="bootstrap/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.6/moment-with-locales.js"></script>
<script src="vendor/angular-moment-picker/angular-moment-picker.min.js"></script>
<link href="vendor/angular-moment-picker/angular-moment-picker.min.css" rel="stylesheet">
</head>
<body ng-app="HrApp" ng-controller="LeaveController">
<div class="container" ng-init="fetchData()">
<br />
<br />
<div class="alert alert-success alert-dismissible" ng-show="success">
<a href="#" class="close" data-dismiss="alert" aria-label="close">×</a> {{successMessage}}
</div>
<div align="right">
<button type="button" name="add_button" ng-click="addData()" class="btn btn-success">Add</button>
</div>
<br />
<div class="table-responsive" style="overflow-x: unset;">
<table datatable="ng" dt-options="vm.dtOptions" class="table table-bordered table-striped">
<thead>
<tr>
<th>Leave Type</th>
<th>Start Date</th>
<th>End Date</th>
<th>Date Submitted</th>
<th>Approved by Delegated Person</th>
<th>Approved by HR Person</th>
<th>Approved by Management</th>
<th>Validity</th>
<th>Withdraw</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="name in leaveApplicationData">
<td>{{name.TypeOfLeave}}</td>
<td>{{name.LeaveStart}}</td>
<td>{{name.LeaveEnd}}</td>
<td>{{name.CreatedDateTime}}</td>
<td><button type="button" class="btn btn-danger btn-xs">Not Approve</button></td>
<td><button type="button" class="btn btn-danger btn-xs">Not Approve</button></td>
<td><button type="button" class="btn btn-danger btn-xs">Not Approve</button></td>
<td><button type="button" class="btn btn-success btn-xs">Valid</button></td>
<td><button type="button" ng-click="deleteData(name.LeaveID)" class="btn btn-danger btn-xs">Withdraw</button></td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
</html>
<div class="modal fade" tabindex="-1" role="dialog" id="crudmodal">
<div class="modal-dialog" role="document">
<div class="modal-content">
<form method="post" ng-submit="submitForm()">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title">{{modalTitle}}</h4>
</div>
<div class="modal-body">
<div class="alert alert-danger alert-dismissible" ng-show="error">
<a href="#" class="close" data-dismiss="alert" aria-label="close">×</a> {{errorMessage}}
</div>
<div class="form-group">
<label>Type Of Leave</label>
<select ng-model="TypeOfLeave" name="TypeOfLeave" class="form-control">
<option ng-repeat="x in type">{{x}}</option>
</select>
</div>
<div class="form-group">
<label>Leave Start Date Time</label>
<input type="datetime-local" value="" id="dateTimeInput" size="16" class="form-control" ng-model='start'>
</div>
<div class="form-group">
<label>Leave End Date Time</label>
<input type="datetime-local" value="" id="dateTimeInput" size="16" class="form-control" ng-model='end'>
</div>
<div class="form-group">
<label>Hour</label>
<input type="text" value="{{ (end - start)/3600000 }}" id="" size="16" class="form-control" readonly>
</div>
<div class="form-group">
<label>Days</label>
<input type="text" ng-model='day' id="" size="16" class="form-control" readonly>
</div>
<div class="form-group">
<label>Upload files</label>
<input type="file" />
</div>
<div class="form-group">
<label>Total emergency leave taken</label>
<input type="text" value="0" id="" size="16" class="form-control" readonly>
</div>
</div>
<div class="modal-footer">
<input type="hidden" name="hidden_id" value="{{hidden_id}}" />
<input type="submit" name="submit" id="submit" class="btn btn-info" value="{{submit_button}}" />
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</form>
</div>
</div>
</div>
Если я добавил ['angularjs -datetime-picker '] в модуле выходит с ошибкой inject modulerr. Любая идея, как ее решить.
добавить зависимость выбора даты и времени в модуль
