그렇지만 문제도 있습니다. 첫째, 달력 그리기가 조금 느리다는 점입니다. 둘째, IE 전용으로는 호환성이 좋지 않습니다. 셋째, jQuery를 기반으로 하지 않습니다.
아직은 낡은 규칙이니 효과를 확인하고 하세요
더 멋진 Ext 스타일입니다. 위 그림에서 이 컨트롤에는 실제로 날짜 및 월 보기와 연도 및 월 선택 보기의 두 가지 보기가 있음을 알 수 있습니다. 1: HTML부터 시작하겠습니다
날짜 제어를 위한 HTML을 결정하는 것은 실제로 비교적 간단합니다. 왜냐하면 분명히 목록 데이터 형식이고 물론 주로 테이블을 사용하기 때문입니다. 두 개의 보기는 각각 두 개의 Div로 둘러싸여 있습니다. div의 표시 및 숨기기를 제어하여 보기를 전환할 수 있습니다. 완전한 HTMl 구조를 보려면 IEDeveloper를 사용하여 데모 구조를 살펴볼 수 있습니다. 2: CSS 기반 작성 HTML과 렌더링에 사실 Ext 스타일이기 때문에 Ext CSS와 이미지를 직접 복사합니다. . CSS는 분석되지 않으며 코드가 직접 업로드됩니다. 블로그 파크의 구문 강조는 CSS를 지원하지 않기 때문에 여기에 게시하지 않겠습니다. 다운로드 주소를 알려주십시오: 사용된 모든 이미지:
코드는 다음과 같습니다. var def = { weekStart: 0,//한 주가 시작되는 요일, 0 일요일을 나타냅니다 weekName: ["Day", "Monday" , "two", " three", "four", "five", "six"], //주 형식
monthName: ["one" , "2", "3", "4", " 5", "6", "7", "8", "9", "10", "11", "12"], //형식 of the Month
monthp: "month",// 월의 접미사 Year: new Date().getFullYear(), //연도를 정의하는 변수의 초기 값 Month: new Date().getMonth() 1, //월을 정의하는 변수의 초기값 Day: new Date().getDate(), //일을 정의하는 변수의 초기값 today: new Date(),//today btnOk: "OK",//OK 버튼 텍스트 btnCancel: "Cancel", //취소 버튼 텍스트 btnToday: "오늘" , //오늘 버튼의 텍스트 inputDate: null, //쓸모가 없으며, 코드에 저장하는 용도로만 사용됩니다. Data onReturn: false, //날짜 선택 시 다시 호출되는 함수 version: "1.0", //버전 applyrule: false, //날짜 선택 규칙, 선택 가능한 날짜 범위 함수를 설정할 수 있습니다. (){};return rule={startdate,endate} showtarget: null , //캘린더 확장이 의존하는 개체인 캐리어를 표시하며 기본값은 개체 자체입니다. picker: "" //추가 클릭 이벤트 개체 $.extend(def, o) ;//전달된 매개변수를 사용하여 기본
if ($.browser .msie6) { / /IE6 팝업 레이어 커버인 경우 cpHA.push(''); } cpHA.push("< table class='dp-maintable' cellpacing='0' cellpadding='0' style='width:175px;'>
"); //头yo cpHA.push("
< ;em>
"); cpHA.push("
"); cpHA.push("
"); //주 cpHA.push ("
"); //주 생성 for (var i = def.weekStart, j = 0; j < 7; j ) { cpHA.push("
", def.weekName[i], "< ;/span>< ;/th>"); if (i == 6) { i = 0; } else { i ; } } .....//일부 코드 생략 cpHA.push("
") cpHA.push("") cpHA.push(" "); var s = cpHA.join(""); $(document.body).append(s); //본문에 추가 cp = $("#BBIT_DP_CONTAINER"); //다시 받기 initevents(); //초기화 이벤트 }
여기서 중요한 점은 날짜의 HTML 출력과 이벤트 초기화가 한 번만 수행된다는 것입니다. 기본적으로 두 개가 동시에 같은 페이지에서 열리지 않기 때문입니다. 생성된 HTML에는 몇 가지 특별한 사용자 정의 속성도 있습니다. 주의 깊게 살펴보면 이러한 속성이 후속 시간 처리에서 큰 역할을 한다는 것을 알 수 있습니다. 그럼 이벤트를 살펴볼까요
$("#BBIT- DP-TODAY").click(returntoday);//오늘의 버튼 이벤트 cp.click(returnfalse);//버블 방지 $("#BBIT_DP_INNER tbody").click( tbhandler);/ /각 td에 $("#BBIT_DP_LEFTBTN").click(prevm)을 추가하는 대신 월중 뷰 본문에 클릭 이벤트를 추가합니다.//지난 달 $( "#BBIT_DP_RIGHTBTN").click( nextm);//다음 달 $("#BBIT_DP_YMBTN").click(showym);//연도 및 월간 보기로 전환 $("#BBIT-DP- MP").click(mpclick) ;//연도 및 월 보기의 클릭 이벤트도 배포에 사용됩니다 $("#BBIT-DP-MP-PREV").click(mpprevy);//이전 연도 $("#BBIT- DP-MP-NEXT").click(mpnexty);//내년 $("#BBIT-DP-MP-OKBTN").click(mpok);/ /확인 버튼 이벤트 $ ("#BBIT-DP-MP-CANCELBTN").click(mpcancel);//취소 버튼 이벤트
필요한 각 요소에 이벤트 추가 여기에는 두 곳이 있는데, 월별 보기의 경우 전통적인 방법은 각 TD에 이벤트를 추가하는 것입니다. TD가 생성될 때마다 추가하면 그 영향은 Performance에 영향을 미치므로 컨테이너에 직접 클릭 이벤트를 추가하고 다른 연도, 월의 뷰를 선택하여 이벤트 소스를 판단하여 배포하는 것도 위와 같은 논리입니다. , 그럼 월별 클릭 이벤트를 분석해 보겠습니다. 실제로 각 TD가 생성되면 xdate 사용자 정의 속성 이 등록됩니다.
function tbhandler(e) { var et = e.target || e.srcElement; //이벤트 소스 찾기 var td = getTd(et); //이벤트 소스가 재귀적으로 td를 조회합니다. if (td == null) 🎜>return false; } var $td = $(td);
if (!$(td).hasClass("bbit-dp-disabled")) 비활성화되지 않았습니다 var s = $td.attr("xdate");//td의 자체 값 가져오기 속성 날짜 데이터 정의 var arrs = s.split("-") cp .data("indata", new Date(arrs[0],parseInt(arrs[1], 10) - 1, arrs[2])) returndate();//반환 날짜 🎜>} return false }
var obj = $(this).addClass("bbit-dp-input");//입력에 스타일 추가
var picker = $(def.picker);//선택기 개체 가져오기 //If showtarget이 null이 아니면 입력 뒤에 선택기를 등록합니다 //그렇지 않으면 사용자가 선택기 위치를 직접 처리합니다. 즉, 선택기는 페이지 자체에 이미 존재합니다 //차이점을 볼 수 있습니다 예제의 호출 1과 3 사이 def.showtarget == null && obj.after(picker) picker.click(function( e) { ....//코드 생략 })
피커의 클릭 이벤트는 상대적으로 길다는 점은 따로 이야기하는 것이 좋을 것 같습니다. 두 번째는 실제 숨겨진 이벤트의 처리입니다. 두 번째는 기간 가장자리 문제 처리이고, 세 번째는 기간 규칙 처리입니다.
이 등록됩니다. 
는 내 창작물에 datepicker를 적용한 것입니다. 마지막으로 이 글이 도움이 되셨다면 [추천]을 눌러주세요. 
코드 패키징 스크립트 홈
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
