【发布时间】：2016-10-19 08:44:43
【问题描述】：
我目前参与了一个使用 Angular、JavaScript 和 C# 的项目。在这个项目中，我们有一个用于创建项目的表单，其中包含以下字段：项目代码、描述、初始日期、结束日期、客户、技术和每小时金额。
对于输入“初始日期”和“结束日期”，我使用了一个日期选择器，以便为用户提供一个日历，让他们可以选择所需的日期。我正在处理的问题是“结束日期”的验证。到目前为止，我在日历中禁用了当前日期之前的周末和几天。
我的想法是在“最终日期”的日历中禁用前几天到初始选定日期，因此它不能小于“初始日期”。
JavaScript 和 HTML 代码：
(function() {
angular.module('app.project')
.controller('projectCreateCtrl', ['$state', 'alerts', 'project', projectCreateCtrl])
.controller('DatepickerPopupDemoCtrl', ['$scope', DatepickerPopupDemoCtrl]);
//Controller for the initial and end date
function DatepickerPopupDemoCtrl($scope) {
$scope.today = function() {
$scope.vm.project.fechaInicio = new Date();
$scope.vm.project.fechaFin = new Date();
};
$scope.today();
$scope.inlineOptions = {
customClass: getDayClass,
minDate: new Date(),
showWeeks: true
};
$scope.dateOptions = {
dateDisabled: disabled,
formatYear: 'yy',
maxDate: new Date(2050, 1, 1),
minDate: new Date(),
startingDay: 1
};
// Disable weekend selection
function disabled(data) {
var date = data.date,
mode = data.mode;
return mode === 'day' && (date.getDay() === 0 || date.getDay() === 6);
}
$scope.toggleMin = function() {
$scope.minDate = $scope.minDate ? null : new Date();
};
$scope.toggleMin();
$scope.open1 = function() {
$scope.popup1.opened = true;
};
$scope.open2 = function() {
$scope.popup2.opened = true;
};
$scope.setDate = function(year, month, day) {
$scope.vm.project.fechaInicio = new Date(year, month, day);
$scope.vm.project.fechaFin = new Date(year, month, day);
};
//Date format
$scope.format = 'dd/MM/yyyy';
$scope.popup1 = {
opened: false
};
$scope.popup2 = {
opened: false
};
var tomorrow = new Date();
tomorrow.setDate(tomorrow.getDate() + 1);
var afterTomorrow = new Date();
afterTomorrow.setDate(tomorrow.getDate() + 1);
$scope.events = [{
date: tomorrow,
status: 'full'
}, {
date: afterTomorrow,
status: 'partially'
}];
function getDayClass(data) {
var date = data.date,
mode = data.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 '';
}
}
//Form controller
function projectCreateCtrl($state, alerts, project) {
var vm = this;
vm.project = project;
//Warning about the new project being saved
vm.insert = function() {
alerts.confirmSave('', 'Se guardará el proyecto \n¿Está seguro?', vm.save);
}
//Back button
vm.volver = function() {
$state.go("app.project.index")
}
//saves project
vm.save = function() {
//projectService.saveProject(vm.project)
project.$save(
function() { //OK
alerts.success("Se ha guardado el proyecto correctamente.", '', function() {
});
},
function(error) { //ERROR
alerts.error(error);
});
}
}
})();<div ng-controller="DatepickerPopupDemoCtrl">
<div class="form-group row m-t">
<label for="fechaInicio" class="col-md-1 control-label">Fecha Inicio</label>
<div class="col-md-5">
<div class="has-feedback" ng-class="{ 'has-error': (form.fechaInicio.$dirty || form.fechaInicio.$touched) && form.fechaInicio.$invalid, 'has-success':form.fechaInicio.$valid}">
<p class="input-group">
<input type="text" uib-datepicker-popup="{{format}}" ng-class="{ 'form-control input': form.fechaInicio.$valid, 'form-control input mandatory': !form.fechaInicio.$valid }" id="fechaInicio" name="fechaInicio" readonly ng-model="vm.project.fechaInicio"
is-open="popup1.opened" datepicker-options="dateOptions" ng-required="true" close-text="Close" alt-input-formats="altInputFormats" min-date="minDate" />
<span class="input-group-btn">
<button type="button" class="btn btn-default" ng-click="open1()"><i class="glyphicon glyphicon-calendar"></i></button>
</span>
</p>
<span class="glyphicon glyphicon-ok form-control-feedback" ng-show="form.fechaInicio.$valid" aria-hidden="true"></span>
<span class="glyphicon glyphicon-remove form-control-feedback" ng-show="!form.fechaInicio.$valid && form.fechaInicio.$dirty" aria-hidden="true"></span>
<div class="help-block" ng-messages="form.fechaInicio.$error" ng-show="form.fechaInicio.$dirty || form.fechaInicio.$touched">
<div ng-messages-include="wwwroot/app/project/messages.html"></div>
</div>
</div>
</div>
</div>
<div class="form-group row m-t">
<label for="fechaFin" class="col-md-1 control-label">Fecha Fin</label>
<div class="col-md-5">
<div class="has-feedback" ng-class="{ 'has-error': (form.fechaFin.$dirty || form.fechaFin.$touched) && form.fechaFin.$invalid, 'has-success':form.fechaFin.$valid}">
<p class="input-group">
<input type="text" uib-datepicker-popup="{{format}}" ng-class="{ 'form-control input': form.fechaFin.$valid, 'form-control input mandatory': !form.fechaFin.$valid }" id="fechaFin" name="fechaFin" readonly data-min-date="fechaInicio" ng-model="vm.project.fechaFin"
is-open="popup2.opened" datepicker-options="dateOptions" ng-required="true" close-text="Close" alt-input-formats="altInputFormats" />
<span class="input-group-btn">
<button type="button" class="btn btn-default" ng-click="open2()"><i class="glyphicon glyphicon-calendar"></i></button>
</span>
</p>
<span class="glyphicon glyphicon-ok form-control-feedback" ng-show="form.fechaFin.$valid" aria-hidden="true"></span>
<span class="glyphicon glyphicon-remove form-control-feedback" ng-show="!form.fechaFin.$valid && form.fechaFin.$dirty" aria-hidden="true"></span>
<div class="help-block" ng-messages="form.fechaFin.$error" ng-show="form.fechaFin.$dirty || form.fechaFin.$touched">
<div ng-messages-include="wwwroot/app/project/messages.html"></div>
</div>
</div>
</div>
</div>
</div>需要翻译：
fechaInicio = 初始日期
fechaFin = 结束日期
提前谢谢你。
【问题讨论】：
标签： javascript angularjs date datepicker