2013-01-02 1 views
0

최신 버전의 jquery 사용자 설명서의 datepicker를 사용하여 선택한 날짜에 따라 숨겨진 div 하나를 표시하고 싶습니다.datepicker 선택에 해당하는 DIV 표시하기

아이디어는 날짜 표시기를 인라인으로 표시하고 사용자가 날짜를 선택하면 해당 날짜에 해당하는 숨겨진 div가 표시됩니다.

다음은 내가 지금까지 가지고있는 것입니다 ... onSelect를 사용해야한다고 생각하지만 다른 stackoverflow 질문을 기반으로 문제를 해결하는 데 어려움이 있습니다.

$("#inlinedatepicker").datepicker({ 
    onSelect: function(date) { 
     $('.tohide').hide(); 
     $('#date' + date).show(); 
    }, 
    inline: true, 
    minDate: new Date(currentYear), 
    beforeShowDay: function(date) { 
     if (date.getDay() == 0 || date.getDay() == 1 || date.getDay() == 2 || date.getDay() == 3) { 
      return [false, '']; 
     } else { 
      return [true, '']; 
     } 
    } 
}); 

2013 년 1 월 1 일을 선택하면 ID가 date01/01/2013 인 div가 표시됩니다. 슬래시가 받아 들여지지 않는다고 가정합니다. 그래서이 문제를 해결할 수있는 방법이 있습니까? 문제의

1 월 (1) 2013 년 사업부에 대한 HTML은 다음과 같을 것입니다 ...

<div id="date01/01/2013">...</div> 
+0

이 코드로 인해 발생하는 오류를 업데이트 할 수 있습니까? – Wolf

+0

오류 메시지가 표시되지 않습니다. datepicker가 제대로 표시되지만 선택한 날짜가 해당 div를 열지 않습니다. .show()의 날짜를 제대로 캡처하고 있는지 알 수 없습니다. 성명서. – ARice

+0

나는 약간 혼란 스럽다. 그래서이 숨겨진 div에 무엇이 있는가. html을 제공 할 수 있습니까? – Dom

답변

1

하나는 onSelect를 이벤트 핸들러에 전달되는 "날짜"형식의 문자열 일 수 있었다 '01/18/2013'(브라우저의 문화 설정에 따라 다름) 그리고이 문자열 (날짜가 추가 된)을 사용하여 div를 선택하는 것처럼 보입니다. 그러나 jQuery 선택기는 "/"와 같은 특수 문자를 만날 때 예외를 throw합니다. 한 가지 해결책은 또한 슬래시하지 않고 선택의 ID를 설정 한 다음 onSelect를 이벤트 처리기에서 문자열에서 슬래시를 제거 할 수

document.getElementById('date' + date).style.display = "block"; // this works 
                   // with "date01/18/2013" 

사용하고, JQuery와 선택기에서 그것을 사용하는 것입니다.

+0

당신은이 이슈를 이해하는 것 같고 날짜가 슬래시로 포맷되어 있다는 것과 관련이 있을지도 모른다고 생각했지만 제공 한 코드 줄을 사용하는 방법을 잘 모르겠습니다. – ARice

+0

줄'$ ('date'+ date) .show();'대신에 내가 제공 한 코드 줄을 사용할 수 있습니다. 그러나 DOM 요소 선택기 코드를 일관성있게 유지하려면 옵션 2 (슬래시없이 div에 이름을 지정하는 것)와 이벤트 처리기에서 전달 된 "날짜"매개 변수에서 슬래시를 제거하는 것이 더 좋습니다. jQuery를 사용하여 div를 표시합니다. _ 문제 해결에 도움이된다면 제 해결책을 답으로 표시하십시오 ._ –

관련 문제