2012-07-24 2 views
1

datepicker가있는 텍스트 상자가 있습니다. 내 요구 사항에 따라 사용자는 해당 월의 첫 번째 화요일 또는 두 번째 화요일을 선택해야합니다. 그래서 나는 다음 코드와 그 잘 작동하는 것을 사용하여 나머지 날짜를 비활성화했다.텍스트 상자에서 값을 입력 할 수 없도록 설정하십시오.

var dates_allowed = { 
     '2012-07-24': 1, 
     '2012-08-14': 1, 
     '2012-08-21': 1, 
     '2012-09-11': 1, 
    '2012-09-18': 1, 
     '2012-10-09': 1, 
     '2012-10-16': 1 
}; 
$("#" + webinarDate.id).datepicker({ 
    // called for every date before it is displayed 
    beforeShowDay: function(date) { 

     // prepend values lower than 10 with 0 
     function addZero(no) { 
      if (no < 10){ 
       return "0" + no; 
      } else { 
       return no; 
      } 
     } 

     var date_str = [ 
      addZero(date.getFullYear()), 
      addZero(date.getMonth() + 1), 
      addZero(date.getDate())  
     ].join('-'); 

     if (dates_allowed[date_str]) { 
      return [true, 'good_date', 'This date is selectable']; 
     } else { 
      return [false, 'bad_date', 'This date is NOT selectable']; 
     } 
    } 
}); 

하지만 문제는 사용자가 datepicker (원하는 것은 아닙니다)를 사용하는 대신 텍스트 상자에 날짜를 입력 할 수 있다는 것입니다. 수동으로 입력하는 대신 datepicker에서 날짜를 선택하도록 사용자를 제한하는 방법. 나는 당신이 이해하기를 바랍니다.

+0

사용합니다 데이트 피커? 유일한 선택 사항이 매월 1 일 또는 2 일 화요일이면 드롭 다운이 더 나은 선택 일 수 있습니까? –

+0

참고 : 값을 확인하고 사용하지 않도록 설정된 필드에만 의존하지 않도록 서버 측 유효성 검사를 수행해야합니다. – Amalea

+0

@TheZ "disabled"텍스트 상자는 POST에서 보내지지 않으므로 읽기 전용이 올바른 선택입니다. – Amalea

답변

2

이 뜻입니까?

다음을 사용하여 datepicker 입력 텍스트를 읽기 전용으로 설정할 수 있습니다. $("#" + webinarDate.id)


<input type='text' id='datepickerTxt' readonly='true'> 

또는 :

$("#datepickerTxt").attr('readonly', 'true'); 

또는 : 현대의 jQuery 버전의

$("#datepickerTxt").keypress(function(e){ e.preventDefault(); }); 

: 귀하의 경우

이 요소에있을 것입니다

$("#datepickerTxt").prop('readonly', 'true'); 
나는이 대답 볼 것이다
+0

. 그 일. – Srav

0

여기에 정확한 해결책이 있습니까? 다음 날짜 선택 가능한 드롭 다운 목록처럼 느껴집니다.

그렇다면 사용자가 onblur로 입력을 타겟팅하고 테스트를 수행 할 수 있습니다.

또는 onfocus가 트리거 된 경우 키보드 입력을 사용하지 않도록 설정하십시오.

0

해제 - 드래그하고 txt_Date의 ID로 AJAX 캘린더 익스텐더, 변경 ControlToValidate (날짜 텍스트 상자) 드롭을 변경 사실이에 읽기 전용 속성을 변경, 거짓

다음

텍스트 상자 속성에

에 클라이언트 스크립트를 사용 ..

(당신은 이미 익스텐더가 작동하려면 스크립트 관리자를 드래그 확인)

이제

만, 따라서 잘못된 날짜를 입력 할 수 없음 달력 Extender를 사용하여 날짜를 변경할 수 있습니다 ..

관련 문제