申请的目的是在当天举办活动，效果很好。同时，用户可以使事件在同一时间段内已经存在。
如果存在，是否有任何快速选项可以防止同时发生事件？
演示：http ://plnkr.co/edit/k450PRyeG8c2vIxnrCYV?p=preview
我认为Timepicker应该设置min和max
vm.startOption = {
"mstep" : 5,
"startTime": moment().startOf('day'),
"endTime": moment().endOf('day')
};
vm.endOption = {
"mstep" : 5,
"startTime": moment().hours(2).minutes(8),
"endTime": moment().hours(23).minutes(10)
};
并且每次更新。
angular.module('mwl.calendar.docs', ['mwl.calendar', 'ngAnimate', 'ui.bootstrap', 'colorpicker.module']);
angular
.module('mwl.calendar.docs')
.controller('KitchenSinkCtrl', function(moment) {
var vm = this;
vm.calendarView = 'month';
vm.viewDate = new Date();
vm.events = [];
vm.mytime = {
"title": moment().format('dddd'),
"startsAt": moment().startOf('day'),
"endsAt": moment().endOf('day')
}
vm.addEvent = function() {
vm.events.push(vm.mytime);
vm.mytime = {
"title": moment().format('dddd'),
"startsAt": moment().startOf('day'),
"endsAt": moment().endOf('day')
}
};
vm.clickOnEvent = function(calendarCell) {
vm.mytime = {
"title": calendarCell.date.format('dddd'),
"startsAt": moment().startOf('day'),
"endsAt": moment().endOf('day')
}
}
vm.startOption = {
"mstep": 5,
"startTime": moment().startOf('day'),
"endTime": moment().endOf('day')
};
vm.endOption = {
"mstep": 5,
"startTime": moment().hours(2).minutes(8),
"endTime": moment().hours(23).minutes(10)
};
vm.updateChangeStart = function() {
if (moment(vm.mytime.startsAt).isSameOrAfter(moment(vm.mytime.endsAt))) {
vm.mytime.endsAt = vm.mytime.startsAt;
} else {
console.log("thudangi kayinj avasanikunu");
}
};
vm.updateChangeEnd = function() {};
});<script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.11.1/moment.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/interact.js/1.2.4/interact.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-animate.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/2.0.0/ui-bootstrap-tpls.min.js"></script>
<script src="//cdn.rawgit.com/jkbrzt/rrule/v2.1.0/lib/rrule.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-bootstrap-colorpicker/3.0.25/js/bootstrap-colorpicker-module.min.js"></script>
<script src="//mattlewis92.github.io/angular-bootstrap-calendar/dist/js/angular-bootstrap-calendar-tpls.min.js"></script>
<script src="example.js"></script>
<script src="helpers.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<link href="//cdnjs.cloudflare.com/ajax/libs/angular-bootstrap-colorpicker/3.0.25/css/colorpicker.min.css" rel="stylesheet">
<link href="//mattlewis92.github.io/angular-bootstrap-calendar/dist/css/angular-bootstrap-calendar.min.css" rel="stylesheet">
<div class="container-fluid" ng-app="mwl.calendar.docs" ng-controller="KitchenSinkCtrl as availtrl">
<div class="row">
<div class="col-sm-6">
<div class="row">
<div class="col-sm-6">
<label>Start At:</label>
<div uib-timepicker minute-step="availtrl.startOption.mstep" ng-model="availtrl.mytime.startsAt" ng-change="availtrl.updateChangeStart()" show-meridian="false" min="availtrl.startOption.startTime" max="availtrl.startOption.endTime"></div>
</div>
<div class="col-sm-6">
<label>End At:</label>
<div uib-timepicker minute-step="availtrl.startOption.mstep" ng-model="availtrl.mytime.endsAt" ng-change="availtrl.updateChangeEnd()" show-meridian="false" min=""></div>
</div>
<div class="col-sm-12">
<button type="button" name="button" class="btn btn-primary btn-block" ng-click="availtrl.addEvent()">Add</button>
</div>
</div>
</div>
<div class="col-sm-6">
<pre class="alert alert-info"> Start: {{availtrl.mytime.startsAt | date:'M/d/yyyy HH:mm' }}</pre>
<pre class="alert alert-info"> End: {{availtrl.mytime.endsAt | date:'M/d/yyyy HH:mm'}} </pre>
<pre class="alert alert-info"> {{availtrl.mytime | json}} </pre>
</div>
</div>
<div class="row form-group ">
<div class="col-sm-6">
<div class="btn-group">
<button class="btn btn-primary" mwl-date-modifier date="availtrl.viewDate" decrement="availtrl.calendarView">
Previous
</button>
<button class="btn btn-default" mwl-date-modifier date="availtrl.viewDate" set-to-today>
Today
</button>
<button class="btn btn-primary" mwl-date-modifier date="availtrl.viewDate" increment="availtrl.calendarView">
Next
</button>
</div>
</div>
<div class="col-sm-6 text-right">
<div class="btn-group">
<label class="btn btn-primary" ng-model="availtrl.calendarView" uib-btn-radio="'month'">Month</label>
<label class="btn btn-primary" ng-model="availtrl.calendarView" uib-btn-radio="'week'">Week</label>
<label class="btn btn-primary" ng-model="availtrl.calendarView" uib-btn-radio="'day'">Day</label>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<mwl-calendar view="availtrl.calendarView" view-date="availtrl.viewDate" events="availtrl.events" view-title="calendarTitle" on-timespan-click="availtrl.clickOnEvent(calendarCell)">
</mwl-calendar>
</div>
</div>
</div>