Как я могу проверить начальную и конечную дату с помощью AngularJS, JavaScript и Datepicker?

Question

В настоящее время я участвую в проекте, в котором мы используем 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' && (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 = конец

Спасибо преиму се.

Answer 1

Вы уже использовали minDate возможности отключить дни на календаре теперь, вы могли бы просто еще один $scope.dateOptions для fechaFin где minDate является vm.project.fechaInicio

Answer 2

Если я получаю свой вопрос прямо, вы хотите, чтобы получить дату от первоначальной даты Datepicker а затем дать пользователю выбрать дату окончания после этой даты. Затем просто сохраните выбранную дату с «начальной даты Datepicker» в области видимости и затем передайте ее как «startDate» в настройках «date date Datepicker». Read Datepicker документы из лучшего понимания here

надежда это решить ваш вопрос

Answer 3

Это очень легко.

Для этого вам нужно создать две даты в вашем контроллере. то есть

$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 в своих вариантах датпикера соответственно.

Надеюсь, что это поможет :)