#javascript #angularjs #date #datepicker
#javascript #angularjs #Дата #datepicker
Вопрос:
В настоящее время я участвую в проекте, где мы используем Angular, JavaScript и C #. В этом проекте у нас есть форма для создания проектов с полями: код проекта, описание, начальная дата, дата окончания, клиент, технология и количество в час.
Для ввода «начальной даты» и «конечной даты» я использую datepicker, чтобы предоставить пользователям календарь, в котором они могут выбрать желаемую дату. Проблема, с которой я имею дело, заключается в проверке «конечной даты». До сих пор я отключал выходные и дни до текущей даты в календаре.
Моя идея состоит в том, чтобы отключить предыдущие дни до начальной выбранной даты в календаре «окончательной даты», чтобы она не могла быть меньше «начальной даты».
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' amp;amp; (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) amp;amp; 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 amp;amp; 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) amp;amp; 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 amp;amp; 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 = конечная дата
Заранее благодарю вас.
Ответ №1:
Вы уже использовали minDate опцию для отключения дней в календаре с этого момента, вы могли бы просто использовать другую $scope.dateOptions для fechaFin где minDate находится vm.project.fechaInicio
Комментарии:
1. Спасибо за вашу помощь. Я уже пробовал это, но по какой-то причине я все еще могу выбрать конечную дату, предшествующую начальной дате, выбранной в календаре.
Ответ №2:
Если я правильно понял ваш вопрос, вы хотите получить дату из начальной даты Datepicker, а затем предоставить пользователю возможность выбрать конечную дату после этой даты. Затем просто сохраните выбранную дату из «initial date Datepicker» в области видимости, а затем передайте ее как «StartDate» в параметрах «end date Datepicker». Прочитайте документы datepicker для лучшего понимания здесь
надеюсь, это решило вашу проблему
Комментарии:
1. Спасибо за вашу помощь, я посмотрю на это.
Ответ №3:
Это очень просто.
Для этого вам нужно создать два dateOptions в вашем контроллере. т.Е.
$scope.fromOptions = {
dateDisabled: disabled,
formatYear: 'yy',
maxDate: new Date(2050, 1, 1),
minDate: new Date(),
startingDay: 1
};
$scope.tillOptions = {
dateDisabled: disabled,
formatYear: 'yy',
maxDate: new Date(2050, 1, 1),
minDate: $scope.project.fechaInicio, // use from scope value here.
startingDay: 1
};
и используйте эти параметры выбора даты в их datepicker-options соответственно.
Надеюсь, это поможет 🙂
Комментарии:
1. Спасибо за вашу помощь. Я сделал это, но по какой-то причине я все еще могу выбрать конечную дату, предшествующую выбранной начальной дате. Я добавил новые параметры для даты окончания в файл JavaScript и datepicker-options=»tillOptions» во ввод даты окончания HTML.