var app = angular.module('plunker', ['daterangepicker']);
app.controller('MainCtrl', function($scope) {
//$scope.name = 'World';
var startingDate = null;
var endingDate = null;
$scope.rosCal = [];
$scope.rosData = [];
loadingDate = function() {
$scope.rosData.date = {
startDate: moment(),
endDate: moment().add(4, "days")
};
};
$scope.initialTable = function() {
loadingDate();
startingDate = $scope.rosData.date.startDate;
endingDate = $scope.rosData.date.endDate;
$scope.displayTable();
};
$scope.dateRangeOptions = {
locale: {
format: 'MMMM D, YYYY'
},
eventHandlers: {
'apply.daterangepicker': function() {
$scope.rosCal = null; //clear the array
$scope.rosCalJ = null;
$scope.rosCal = [];
$scope.rosCalJ = [];
startingDate = null;
endingDate = null;
startingDate = $scope.rosData.date.startDate;
endingDate = $scope.rosData.date.endDate;
$scope.displayTable();
}
}
};
$scope.displayTable = function() {
var i = 0;
var thisdates = null;
//$scope.rosCal = [];
//$scope.rosCalJ = [];
$scope.obj = [{
"id": "0",
"name": "Roger"
}, {
"id": "1",
"name": "Helen"
}];
//$http.get('php/rosstaff.php')
// .then(
// function (response) {
// $scope.obj = response.data;
// },
// function (response) {
// error handling routine
// }
// );
for (thisdates = startingDate; thisdates <= endingDate; thisdates = moment(thisdates).add(1, "days")) {
$scope.rosCal.push({
date: thisdates
});
}
$scope.rosCalJ = JSON.parse(JSON.stringify($scope.rosCal));
};
});
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script data-require="jquery@2.2.4" data-semver="2.2.4" src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script data-require="moment.js@*" data-semver="2.14.1" src="https://npmcdn.com/moment@2.14.1"></script>
<script data-require="angular.js@1.5.x" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.11/angular.min.js" data-semver="1.5.11"></script>
<script src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js" type="text/javascript"></script>
<script src="angular-daterangepicker.min.js" type="text/javascript"></script>
<link data-require="bootstrap@*" data-semver="4.1.1" rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" />
<link href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" rel="stylesheet" />
<link rel="stylesheet" href="style.css" />
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl" ng-init="initialTable()">
<!--<p>Hello {{name}}!</p>-->
<div class="container">
<form ng-submit="createRoster()" name="rosterForm" method="POST">
<div class="form-row">
<div class="form-group col-md-4">
<label for="daterange1" class="control-label">Select Roster Dates:</label>
<div class="input-group">
<div class="input-group-prepend">
<div class="input-group-text">
<i class="fa fa-calendar-check-o"></i>
</div>
</div>
<input date-range-picker="" class="form-control form-control-sm date-picker" id="daterange1" name="daterange1" ng-model="rosData.date" options="dateRangeOptions" type="text" />
</div>
</div>
</div>
<div class="table-responsive">
<table class="table table-striped table-hover" ng-model="roster">
<thead class="thead-dark">
<tr>
<th class="text-center">Date</th>
<th class="text-center">Shift 1</th>
<th class="text-center">Shift 2</th>
<th class="text-center">Sleep Over</th>
</tr>
</thead>
<tbody>
<tr class="text-center" ng-repeat="x in rosCalJ track by $index">
<td>{{x.date | date:'EEE, MMMM dd, yyyy'}}</td>
<td>
<select class="form-control form-control-sm" ng-model="rosData.shift1[$index]" ng-options="x.id as x.name for x in obj"></select>
</td>
<td>
<select class="form-control form-control-sm" ng-model="rosData.shift2[$index]" ng-options="x.id as x.name for x in obj"></select>
</td>
<td>
<select class="form-control form-control-sm" ng-model="rosData.sleep[$index]" ng-options="x.id as x.name for x in obj"></select>
</td>
</tr>
</tbody>
</table>
<!--<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#addModal">Add Staff</button>
<button type="button" class="btn btn-success" data-toggle="modal" data-target="#editModal">Edit Staff</button>
<button type="button" class="btn btn-secondary" data-toggle="modal" data-target="#deleteModal">Delete User</button>-->
</div>
<div class="form-group has-feedback">
<label for="message">Roster Notes</label>
<textarea class="form-control" rows="3" id="notes" name="notes" ng-model="rosData.notes" placeholder=""></textarea>
<i class="fa fa-pencil form-control-feedback"></i>
</div>
<label>Shift Times:</label>
<p>
<strong>Shift 1</strong> 8:30am - 4:30pm (8 hrs)
<br />
<strong>Shift 2</strong> 9:00am - 3:00pm (6 hrs)</p>
<br />
<button type="submit" class="btn btn-primary">Save Roster</button>
<button type="reset" value="Reset" class="btn btn-secondary">Clear</button>
</form>
</div>
</body>
</html>
/* Put your css in here */
(function(){var a;a=angular.module("daterangepicker",[]),a.constant("dateRangePickerConfig",{clearLabel:"Clear",locale:{separator:" - ",format:"YYYY-MM-DD"}}),a.directive("dateRangePicker",["$compile","$timeout","$parse","dateRangePickerConfig",function(a,b,c,d){return{require:"ngModel",restrict:"A",scope:{min:"=",max:"=",model:"=ngModel",opts:"=options",clearable:"="},link:function(a,b,c,e){var f,g,h,i,j,k,l,m,n,o,p,q,r,s;return i=function(){var a,b;return b=angular.extend.apply(angular,Array.prototype.slice.call(arguments).map(function(a){return null!=a?a.locale:void 0}).filter(function(a){return!!a})),a=angular.extend.apply(angular,arguments),a.locale=b,a},r=$(b),q=a.opts,s=i({},d,q),j=null,f=function(){return j.setStartDate(),j.setEndDate()},k=function(a){return function(b){return j&&b?a(moment(b)):void 0}},m=k(function(a){return j.endDate<a&&j.setEndDate(a),s.startDate=a,j.setStartDate(a)}),l=k(function(a){return j.startDate>a&&j.setStartDate(a),s.endDate=a,j.setEndDate(a)}),n=function(a){return function(b,c){return b&&c?a(moment(b),moment(c)):!0}},p=n(function(a,b){return a.isBefore(b)||a.isSame(b,"day")}),o=n(function(a,b){return a.isAfter(b)||a.isSame(b,"day")}),e.$formatters.push(function(a){var b;return b=function(a){return moment.isMoment(a)?a.format(s.locale.format):moment(a).format(s.locale.format)},s.singleDatePicker&&a?b(a):a.startDate?[b(a.startDate),b(a.endDate)].join(s.locale.separator):""}),e.$render=function(){return e.$modelValue&&e.$modelValue.startDate?(m(e.$modelValue.startDate),l(e.$modelValue.endDate)):f(),r.val(e.$viewValue)},e.$parsers.push(function(a){var b,c,d;return b=function(a){return moment(a,s.locale.format)},c={startDate:null,endDate:null},angular.isString(a)&&a.length>0&&(s.singleDatePicker?c=b(a):(d=a.split(s.locale.separator).map(b),c.startDate=d[0].startOf("day"),c.endDate=d[1].endOf("day"))),c}),e.$isEmpty=function(a){return!(angular.isString(a)&&a.length>0)},g=function(){var b,c;r.daterangepicker(angular.extend(s,{autoUpdateInput:!1}),function(b,c){return a.$apply(function(){return a.model=s.singleDatePicker?b:{startDate:b,endDate:c}})}),j=r.data("daterangepicker"),c=[];for(b in s.eventHandlers)c.push(r.on(b,function(b){var c;return c=b.type+"."+b.namespace,a.$evalAsync(s.eventHandlers[c])}));return c},g(),a.$watch("model.startDate",function(a){return m(a)}),a.$watch("model.endDate",function(a){return l(a)}),h=function(b,d,f,h){return c[b]?(e.$validators[b]=function(a){return a&&d(s[h],a[f])},a.$watch(b,function(a){return s[h]=a?moment(a):!1,g()})):void 0},h("min",p,"startDate","minDate"),h("max",o,"endDate","maxDate"),c.options&&a.$watch("opts",function(a){return s=i(s,a),g()},!0),c.clearable&&a.$watch("clearable",function(b){return b&&(s=i(s,{locale:{cancelLabel:s.clearLabel}})),g(),b?r.on("cancel.daterangepicker",function(){return a.$apply(function(){return a.model=s.singleDatePicker?null:{startDate:null,endDate:null}})}):void 0}),a.$on("$destroy",function(){return null!=j?j.remove():void 0})}}}])}).call(this);