2015-07-10 4 views
5

Я полностью New для Angularjs и пытается проверить 2 сценария. У меня есть 2 текстовых поля с датой начала, а другая с датой окончания. Я проверяюДата начала и окончания даты Angularjs

  1. Показать ошибку проверки в пользовательском интерфейсе, если дата начала не превышает или равна сегодняшнему значению. Это должно быть сегодня или послезавтра.
  2. Показать ошибку проверки в пользовательском интерфейсе, если дата начала больше даты окончания. Дата окончания должна быть больше, чем дата начала.

Я пробовал приведенный ниже код, который не работал. Любые предложения, пожалуйста.

HTML код

<label for="endDate" class="control-label">Start Date:</label> 
<div> 
    <input type="text" class="form-control" 
      id="startDate" ng-model="startDate" /> 
</div> 

<label for="text" class="control-label">End Date:</label> 
<div> 
    <input type="text" class="form-control" 
      id="endDate" ng-model="endDate" 
      ng-change='checkErr(startDate,endDate)' /> 

</div> 

<span>{{errMessage}}</span> 

код расслоение плотной

$scope.checkErr = function(startDate,endDate){ 
    $scope.errMessage = ''; 
    $scope.curDate = new Date(); 

    if(startDate < endDate){ 
     $scope.errMessage = 'End Date should be greate than start date'; 
     return false; 
    } 
    if(startDate < curDate){ 
     $scope.errMessage = 'Start date should not be before today.'; 
     return false; 
    } 

    }; 
  • У меня есть тип ввода как текст для обеих дат controls.I я использую самозагрузки выбора даты.

ответ

8

У вас есть логика обращенной на первый бит, и вы должны построить новую дату от STARTDATE сравнить с сегодняшней датой. Также вы устанавливаете curDate в область, $scope.curDate = new Date(), но тогда вы ссылались на нее как curDate без $scope, так что она была не определена. Наконец, вам нужно отправить stateDate и endDate. В противном случае вы просто сравниваете строки.

$scope.checkErr = function(startDate,endDate) { 
    $scope.errMessage = ''; 
    var curDate = new Date(); 

    if(new Date(startDate) > new Date(endDate)){ 
     $scope.errMessage = 'End Date should be greater than start date'; 
     return false; 
    } 
    if(new Date(startDate) < curDate){ 
     $scope.errMessage = 'Start date should not be before today.'; 
     return false; 
    } 
}; 

Рабочий пример: http://jsfiddle.net/peceLm14/

+1

Код немного отличается от скрипки, которую вы опубликовали. Но это очень помогло. Пожалуйста, синхронизируйте код, который вы опубликовали, и скриптируйте, чтобы он был полезен для всех. – Kurkula

+0

Спасибо! Я забыл о литье дат в первом блоке if. –

1

Похоже, вы ссылаетесь на curDate, который не определен. Измените условное значение на if (startDate < $scope.curDate). См скрипки для работы примера http://jsfiddle.net/4ec3atzk/1/

$scope.checkErr = function(startDate,endDate){ 
    $scope.errMessage = ''; 
    $scope.curDate = new Date(); 

    if (startDate < endDate){ 
    $scope.errMessage = 'End Date should be greate than start date'; 
    return false; 
    } 

    if (new Date(startDate) < $scope.curDate){ 
    $scope.errMessage = 'Start date should not be before today.'; 
    return false; 
    } 
}; 
+0

Хорошо один Спасибо. – Kurkula

0
$scope.datepickerObjectfromdates = { 
    todayLabel: 'Today', 
    closeLabel: 'Close', 
    setLabel: 'Ok', 
    setButtonType : 'button-calm', 
    todayButtonType : 'button-calm', 
    closeButtonType : 'button-calm', 
    inputDate: new Date(), 
    mondayFirst: true, 
    templateType: 'popup', 
    showTodayButton: 'true', 
    modalHeaderColor: 'bar-calm', 
    modalFooterColor: 'bar-calm', 
    callback: function (val) { 
     var getdate = GetFormattedFromDates(val); 
     $scope.date.FromDates = getdate; 
     localStorage.date = $scope.FromDates; 

    }, 
    dateFormat: 'MM-dd-yyyy', //Optional 
    closeOnSelect: false, //Optional 
}; 
function GetFormattedFromDates(val) { 
    if(typeof(val)==='undefined') 
    { 
     $scope.date.FromDates = ''; 
    } 
    else { 

     var todayTime = new Date(val); 
     var month = todayTime.getMonth() + 1; 
     var day = todayTime.getDate(); 


     if (month < 10) { 
      month = '0' + month; 
     } 
     if (day < 10) { 
      day = '0' + day; 
     } 


     var year = todayTime.getFullYear(); 
     return day + "/" + month + "/" + year; 
    } 

} 


$scope.datepickerObjecttodates = { 

    todayLabel: 'Today', 
    closeLabel: 'Close', 
    setLabel: 'Ok', 
    setButtonType : 'button-calm', 
    todayButtonType : 'button-calm', 
    closeButtonType : 'button-calm', 
    inputDate: new Date(), 
    mondayFirst: true, 
    templateType: 'popup', 
    allowOldDates: false, 

    showTodayButton: 'true', 
    modalHeaderColor: 'bar-calm', 
    modalFooterColor: 'bar-calm', 

    callback: function (val) { 
     var getdate = GetFormattedToDates(val); 
     $scope.date.ToDates = getdate; 
     //$scope.date.ToDates = getdate.clear(); 


    }, 

    dateFormat: 'dd-MM-yyyy', //Optional 
    closeOnSelect: false, //Optional 

}; 
function GetFormattedToDates(val) { 
    if (typeof(val) === 'undefined') { 
     $scope.ToDates = ''; 
    } 
    else { 
     var todayTime = new Date(val); 

     var month = todayTime.getMonth() + 1; 
     var day = todayTime.getDate(); 


     if (day < 10) { 
      day = '0' + day; 
     } 
     if (month < 10) { 
      month = '0' + month; 
     } 
     var year = todayTime.getFullYear(); 
     return day + "/" + month + "/" + year; 
    } 

}