요일 선택에 따라 날짜 비활성화

Anele

요일이있는 드롭 다운 선택이 있습니다. 내가 원하는 것은 드롭 다운을 변경할 때 $scope.disabled()메서드 를 실행하는 것입니다. 따라서 date.getDay() === 2날짜 의 고정 번호를 변경합니다 .

$scope.disabled()제가하고 싶은 기능에 대한 코멘트를보실 수 있습니다 .

반쯤 작동하는 Plunker가 있습니다.

jme11

플 런커 업데이트

select 요소에서 ngOptions 를 사용하고 있으므로 select를 표현식의 일부로 사용하여 각 옵션의 값 을를 사용 하여 id로 설정할 수 ng-options="day.id as day.name for day in daysOfWeek"있습니다. 이제 선택을 변경할 때마다 selectedDay의 값이 업데이트되고 다이제스트가 시작됩니다. 즉, 아무것도 볼 필요가 없으며 비활성화 기능을 다음과 같이 단순화 할 수 있습니다.

$scope.disabled = function(date, mode) {
   var day = angular.isUndefined($scope.selectedDay) ? 0 : $scope.selectedDay;
  if (mode === 'day' && date.getDay() === $scope.selectedDay) {
    return true;
  }
  return;
};

사용자가 하루를 선택하지 않은 경우 하루 값을 0으로 설정하는 검사를 추가했지만 다음을 사용하여 선택 값을 초기화 할 수도 있습니다.

$scope.selectedDay = 0;

이제 모든 것이 작동하지만 문제가 있습니다. datepicker는 렌더링되고 내부 refreshView 함수가 호출 될 때만 비활성화 된 함수를 실행합니다. 프로그래밍 방식으로 datepicker에서 새로 고침을 트리거하는 가장 쉬운 방법은 ng-model 값을 변경하는 것입니다. 이를 위해 함수를 추가했습니다.

$scope.triggerDate = function(date) {
  $scope.dt = new Date(date);
}

select 요소의 변경 이벤트에서 triggerDate를 호출하여 현재 선택된 날짜로 datepicker의 값을 재설정합니다 (따라서 값을 전혀 변경하지 않음). 이는 지시문에서 강제로 새로 고치기에 충분합니다. 따라서 최종 선택은 다음과 같습니다.

<select class="form-control input-sm" ng-model="selectedDay" ng-options="day.id as day.name for day in daysOfWeek" ng-change="triggerDate(dt)"></select>

이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.

침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제

에서 수정
0

몇 마디 만하겠습니다

0리뷰
로그인참여 후 검토

관련 기사

분류에서Dev

ajax 요청에서 날짜 활성화 / 비활성화 : jquery calendar

분류에서Dev

선택된 ToggleButton에 따라 GridPane에서 일부 ToggleButtons 비활성화

분류에서Dev

값에 따라 선택 비활성화 / 활성화

분류에서Dev

값에 따라 선택 비활성화 / 활성화

분류에서Dev

날짜를 이동하지만 날짜 선택기 j 쿼리에서 비활성화 된 날짜를 건너 뛰나요?

분류에서Dev

JavaScript-사용자 StartDate 선택에 따라 미래 날짜를 비활성화하는 방법은 무엇입니까?

분류에서Dev

jQuery UI 날짜 선택기에서 공휴일을 비활성화하려면 어떻게합니까?

분류에서Dev

DateRangePicker에서 일부 미래 날짜 비활성화

분류에서Dev

규칙에 따라 일련의 날짜 생성

분류에서Dev

특정 날짜 이전 날짜 선택 비활성화

분류에서Dev

삽입 된 요소에서 부트 스트랩 날짜 선택기 활성화

분류에서Dev

PHP 변수 값에 따라 입력 요소 비활성화

분류에서Dev

날짜 비교에 따라 줄 제거

분류에서Dev

Android Studio의 Material 날짜 선택기에서 날짜 비활성화

분류에서Dev

부트 스트랩 날짜 선택기에서 과거 날짜 비활성화

분류에서Dev

속성에 따라 스타일 선택

분류에서Dev

날짜가 어느 요일인지에 따라 결정

분류에서Dev

선택한 값에 따라 select2 옵션 비활성화

분류에서Dev

비활성화 된 선택 요소에서 클라이언트 측 유효성 검사 활성화

분류에서Dev

라디오 버튼 선택 및 옵션 선택에 따라 양식 필드 활성화 및 비활성화

분류에서Dev

이전 선택 옵션에 따라 선택 입력 비활성화

분류에서Dev

DatePicker Android에서 날짜 비활성화

분류에서Dev

일요일 및 기타 특정 날짜 비활성화

분류에서Dev

PHP Codeigniter에서 "종료일"에 대해 선택한 "시작일"의 이전 날짜를 비활성화하는 방법

분류에서Dev

일요일을 제외한 week () 결과에 따라 날짜 표시

분류에서Dev

extjs 4-clickrepeater 비활성화 버그 및 날짜 선택기

분류에서Dev

Android에서 미래 날짜 선택기를 비활성화하는 방법

분류에서Dev

DatePicker에서 선택한 날짜로 비활성화 된 필드 채우기

분류에서Dev

ItemsList에서 선택한 항목에 따라 버튼 비활성화

Related 관련 기사

  1. 1

    ajax 요청에서 날짜 활성화 / 비활성화 : jquery calendar

  2. 2

    선택된 ToggleButton에 따라 GridPane에서 일부 ToggleButtons 비활성화

  3. 3

    값에 따라 선택 비활성화 / 활성화

  4. 4

    값에 따라 선택 비활성화 / 활성화

  5. 5

    날짜를 이동하지만 날짜 선택기 j 쿼리에서 비활성화 된 날짜를 건너 뛰나요?

  6. 6

    JavaScript-사용자 StartDate 선택에 따라 미래 날짜를 비활성화하는 방법은 무엇입니까?

  7. 7

    jQuery UI 날짜 선택기에서 공휴일을 비활성화하려면 어떻게합니까?

  8. 8

    DateRangePicker에서 일부 미래 날짜 비활성화

  9. 9

    규칙에 따라 일련의 날짜 생성

  10. 10

    특정 날짜 이전 날짜 선택 비활성화

  11. 11

    삽입 된 요소에서 부트 스트랩 날짜 선택기 활성화

  12. 12

    PHP 변수 값에 따라 입력 요소 비활성화

  13. 13

    날짜 비교에 따라 줄 제거

  14. 14

    Android Studio의 Material 날짜 선택기에서 날짜 비활성화

  15. 15

    부트 스트랩 날짜 선택기에서 과거 날짜 비활성화

  16. 16

    속성에 따라 스타일 선택

  17. 17

    날짜가 어느 요일인지에 따라 결정

  18. 18

    선택한 값에 따라 select2 옵션 비활성화

  19. 19

    비활성화 된 선택 요소에서 클라이언트 측 유효성 검사 활성화

  20. 20

    라디오 버튼 선택 및 옵션 선택에 따라 양식 필드 활성화 및 비활성화

  21. 21

    이전 선택 옵션에 따라 선택 입력 비활성화

  22. 22

    DatePicker Android에서 날짜 비활성화

  23. 23

    일요일 및 기타 특정 날짜 비활성화

  24. 24

    PHP Codeigniter에서 "종료일"에 대해 선택한 "시작일"의 이전 날짜를 비활성화하는 방법

  25. 25

    일요일을 제외한 week () 결과에 따라 날짜 표시

  26. 26

    extjs 4-clickrepeater 비활성화 버그 및 날짜 선택기

  27. 27

    Android에서 미래 날짜 선택기를 비활성화하는 방법

  28. 28

    DatePicker에서 선택한 날짜로 비활성화 된 필드 채우기

  29. 29

    ItemsList에서 선택한 항목에 따라 버튼 비활성화

뜨겁다태그

보관