> 웹 프론트엔드 > JS 튜토리얼 > jQuery_jquery를 기반으로 한 날짜 선택 제어

jQuery_jquery를 기반으로 한 날짜 선택 제어

WBOY
풀어 주다: 2016-05-16 18:43:14
원래의
1487명이 탐색했습니다.

그렇지만 문제도 있습니다. 첫째, 달력 그리기가 조금 느리다는 점입니다. 둘째, IE 전용으로는 호환성이 좋지 않습니다. 셋째, jQuery를 기반으로 하지 않습니다.

아직은 낡은 규칙이니 효과를 확인하고 하세요

image image
더 멋진 Ext 스타일입니다.
위 그림에서 이 컨트롤에는 실제로 날짜 및 월 보기와 연도 및 월 선택 보기의 두 가지 보기가 있음을 알 수 있습니다.
1: HTML부터 시작하겠습니다

날짜 제어를 위한 HTML을 결정하는 것은 실제로 비교적 간단합니다. 왜냐하면 분명히 목록 데이터 형식이고 물론 주로 테이블을 사용하기 때문입니다.
두 개의 보기는 각각 두 개의 Div로 둘러싸여 있습니다. div의 표시 및 숨기기를 제어하여 보기를 전환할 수 있습니다. 완전한 HTMl 구조를 보려면 IEDeveloper를 사용하여 데모 구조를 살펴볼 수 있습니다.
image
2: CSS 기반 작성 HTML과 렌더링에
사실 Ext 스타일이기 때문에 Ext CSS와 이미지를 직접 복사합니다. .
CSS는 분석되지 않으며 코드가 직접 업로드됩니다.
블로그 파크의 구문 강조는 CSS를 지원하지 않기 때문에 여기에 게시하지 않겠습니다. 다운로드 주소를 알려주십시오:
사용된 모든 이미지:

btn-arrow btn-arrow-light cal

3: CSS를 마친 후 자바스크립트 작성을 시작했습니다.
위에 완전한 코드가 있습니다

코드 복사 코드는 다음과 같습니다.

;(function($) {
var userAgent = window.navigator.userAgent.toLowerCase();
$.browser.msie8 = $.browser.msie && /msie 8.0/i. 테스트(userAgent);
$.browser.msie7 = $.browser.msie && /msie 7.0/i.test(userAgent)
$.browser.msie6 = !$.browser.msie8 && !$. browser.msie7 && $.browser.msie && /msie 6.0/i.test(userAgent);
Date.prototype.Format = function(format) {
var o = {
"M ": this .getMonth() 1,
"d": this.getDate(),
"h": this.getHours(),
"H": this.getHours(),
"m ": this.getMinutes(),
"s ": this.getSeconds(),
"q ": Math.floor((this.getMonth() 3) / 3),
"w" : "0123456".indexOf(this.getDay()),
"S": this.getMilliseconds()
}
if (/(y )/.test(format)) {
format = format.replace(RegExp.$1, (this.getFullYear() "").substr(4 - RegExp.$1.length))
}
for (var k in o) {
if (new RegExp("(" k ")").test(format))
format = format.replace(RegExp.$1,
RegExp.$1.length == 1 ? o[k] :
("00" o[k]).substr(("" o[k]).length))
}
반환 형식;
};
function DateAdd(interval, number, idate) {
number =parseInt(number);
var 날짜;
if (typeof (idate) == "string") {
date = idate.split(/D/);
eval("var date = new Date(" date.join(",") ")");
}
if (typeof (idate) == "object") {
date = new Date(idate.toString());
}
스위치(간격) {
case "y": date.setFullYear(date.getFullYear() number); 부서지다;
case "m": date.setMonth(date.getMonth() number); 부서지다;
case "d": date.setDate(date.getDate() number); 부서지다;
케이스 "w": date.setDate(date.getDate() 7 * 숫자); 부서지다;
case "h": date.setHours(date.getHours() number); 부서지다;
case "n": date.setMinutes(date.getMinutes() number); 부서지다;
case "s": date.setSeconds(date.getSeconds() number); 부서지다;
case "l": date.setMilliseconds(date.getMilliseconds() number); 부서지다;
}
귀국일;
};
$.fn.datepicker = function(o) {
var def = {
weekStart: 0,
weekName: ["日", "一", "two", "三", "4", "5", "六"], //star期的格式
monthName: ["1", "2", "3", "4", "5", "六", "七", "八", "九", "十", "十一", "十two"], //월별 格式
monthp: "월",
연도: new Date().getFullYear (), //정해진 년도의 初始值
월: new Date().getMonth() 1, //정월의 적중률적初始值
일: new Date().getDate(), //결정된 날짜의 初始值
today: new Date(),
btnOk: " 确定 ",
btnCancel: " 取消 ",
btnToday: "今天",
inputDate : null,
onReturn: false,
버전: "1.1",
applyrule: false, //function(){};return rule={startdate,endate};
showtarget: null,
picker: ""
};
$.extend(def, o);
var cp = $("#BBIT_DP_CONTAINER");
if (cp.length == 0) {
var cpHA = [];
cpHA.push("
");
if ($.browser.msie6) {
cpHA.push('');
}
cpHA.push("");
cpHA.push("");
cpHA.push("");
cpHA.push("
");
//头哟
cpHA.push("
 
");
cpHA.push("
");
//周
cpHA.push("");
//生成周
for (var i = def.weekStart, j = 0; j < 7; j ) {
cpHA.push("");
if (i == 6) { i = 0; } else { 나는; }
}
cpHA.push("");
//生成tBody,需要重新生成的
cpHA.push("
", def .weekName[i], "
");
//生成tBody结束
cpHA.push("
");
//输出下来框
cpHA.push("
");
cpHA.push("");
//1月,7月 按钮两个
cpHA.push("");
cpHA.push("");
cpHA.push("");
cpHA.push("");
cpHA.push("");
cpHA.push("");
cpHA.push("");
cpHA.push("");
cpHA.push("");
cpHA.push("");
cpHA.push("");
cpHA.push("");
cpHA.push("");
cpHA.push("");
cpHA.push("");
cpHA.push("");
cpHA.push("");
cpHA.push("");
cpHA.push("");
cpHA.push("");
cpHA.push("
", def.monthName[0], "", def.monthName[6], "
", def.monthName[1], "", def.monthName[7], "
", def.monthName[2], "", def.monthName[8], "
", def.monthName[3], "", def.monthName[9], "
", def.monthName[4], "", def.monthName[10], "
", def.monthName[5], "", def.monthName[11], "
");
cpHA.push("
");
cpHA.push("
");
var s = cpHA.join("");
$(document.body).append(s);
var cp = $("#BBIT_DP_CONTAINER");
initevents();
}
function initevents() {
//1 today
$("#BBIT-DP-TODAY").click(returntoday); 클릭(returnfalse);
$("#BBIT_DP_INNER tbody").click(tbhandler)
$("#BBIT_DP_LEFTBTN").click(prevm)
$("#BBIT_DP_RIGHTBTN"); (다음);
$("#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)
}
function mpcancel() {
$("#BBIT-DP -MP").animate({ top: -193 }, { 기간: 200, 완료: function() { $("#BBIT-DP-MP").hide(); } });
return false ;
}
function mpok() {
def.Year = def.cy;
def.Month = def.cm 1
def.Day = 1; "#BBIT-DP-MP").animate({ top: -193 }, { 기간: 200, 완료: function() { $("#BBIT-DP-MP").hide(); } });
writecb();
return false;
}
function mpprevy() {
var y = def.ty - 10
def.ty = y;
rryear(y);
거짓을 반환합니다.
}
function mpnexty() {
var y = def.ty 10
def.ty = y;
rryear(y);
거짓을 반환합니다.
}
function rryear(y) {
var s = y - 4;
var ar = [];
for (var i = 0; i ar.push(s i);
ar.push(s i 5);
}
$("#BBIT-DP-MP td.bbit-dp-mp-year").each(function(i) {
if (def.Year == ar[i]) {
$(this).addClass("bbit-dp-mp-sel");
}
else {
$(this).removeClass("bbit-dp-mp-sel" );
}
$(this).html("" ar[i] "").attr(" xyear", ar[i]);
});
}
function mpclick(e) {
var panel = $(this);
var et = e.target || e.srcElement;
var td = getTd(et);
if (td == null) {
false를 반환;
}
if ($(td).hasClass("bbit-dp-mp-month")) {
if (!$(td).hasClass("bbit-dp-mp-sel" )) {
var ctd = panel.find("td.bbit-dp-mp-month.bbit-dp-mp-sel");
if (ctd.length > 0) {
ctd.removeClass("bbit-dp-mp-sel");
}
$(td).addClass("bbit-dp-mp-sel")
def.cm =parseInt($(td).attr("xmonth"));
}
}
if ($(td).hasClass("bbit-dp-mp-year")) {
if (!$(td).hasClass("bbit-dp- mp-sel")) {
var ctd = panel.find("td.bbit-dp-mp-year.bbit-dp-mp-sel");
if (ctd.length > 0) {
ctd.removeClass("bbit-dp-mp-sel");
}
$(td).addClass("bbit-dp-mp-sel")
def.cy =parseInt($(td).attr("xyear"));
}
}
false를 반환합니다.
}
function showym() {
var mp = $("#BBIT-DP-MP");
var y = def.연도;
def.cy = def.ty = y;
var m = def.Month - 1;
def.cm = m;
var ms = $("#BBIT-DP-MP td.bbit-dp-mp-월");
for (var i = ms.length - 1; i >= 0; i--) {
var ch = $(ms[i]).attr("xmonth");
if (ch == m) {
$(ms[i]).addClass("bbit-dp-mp-sel");
}
else {
$(ms[i]).removeClass("bbit-dp-mp-sel");
}
}
rryear(y);
mp.css("top", -193).show().animate({ top: 0 }, { 지속 시간: 200 });
}
function getTd(elm) {
if (elm.tagName.toUpperCase() == "TD") {
return elm;
}
else if (elm.tagName.toUpperCase() == "BODY") {
return null;
}
else {
var p = $(elm).parent();
if (p.length > 0) {
if (p[0].tagName.toUpperCase() != "TD") {
return getTd(p[0]);
}
else {
return p[0];
}
}
}
null을 반환합니다.
}
function tbhandler(e) {
var et = e.target || e.srcElement;
var td = getTd(et);
if (td == null) {
false를 반환;
}
var $td = $(td);
if (!$(td).hasClass("bbit-dp-disabled")) {
var s = $td.attr("xdate");
var arrs = s.split("-");
cp.data("indata", new Date(arrs[0],parseInt(arrs[1], 10) - 1, arrs[2]));
귀국일();
}
false를 반환합니다.
}
function returnfalse() {
return false;
}
function prevm() {
if (def.Month == 1) {
def.Year--;
def.Month = 12;
}
else {
def.Month--
}
writecb();
거짓을 반환합니다.
}
function nextm() {
if (def.Month == 12) {
def.Year ;
def.Month = 1;
}
else {
def.Month
}
writecb();
거짓을 반환합니다.
}
function returntoday() {
cp.data("indata", new Date());
귀국일();
}
function returndate() {
var ct = cp.data("ctarget");
var ck = cp.data("cpk");
var re = cp.data("onReturn");
var ndate = cp.data("indata")
var Ads = cp.data("ads");
var ade = cp.data("ade");
var dis = false;
if (광고 && ndate < 광고) {
dis = true;
}
if (ade && ndate > ade) {
dis = true;
}
if (dis) {
return;
}
if (re && jQuery.isFunction(re)) {
re.call(ct[0], cp.data("indata"));
}
else {
ct.val(cp.data("indata").Format("yyyy-MM-dd"));
}
ck.attr("isshow", "0");
cp.removeData("ctarget").removeData("cpk").removeData("indata").removeData("onReturn")
.removeData("ads").removeData("ade");
cp.css("가시성", "숨김");
ct = ck = null;
}
function writecb() {
var tb = $("#BBIT_DP_INNER tbody");
$("#BBIT_DP_YMBTN").html(def.monthName[def.Month - 1] def.monthp " " def.Year);
var firstdate = new Date(def.Year, def.Month - 1, 1);
var diffday = def.weekStart - firstdate.getDay();
var showmonth = def.Month - 1;
if (diffday > 0) {
diffday -= 7;
}
var startdate = DateAdd("d", diffday, firstdate);
var enddate = DateAdd("d", 42, startdate);
var Ads = cp.data("ads");
var ade = cp.data("ade");
var bhm = [];
var tds = def.today.Format("yyyy-MM-dd");
var indata = cp.data("indata");
var ins = indata != null ? indata.Format("yyyy-MM-dd") : "";
for (var i = 1; i <= 42; i ) {
if (i % 7 == 1) {
bhm.push("");
}
var ndate = DateAdd("d", i - 1, startdate);
var tdc = [];
var dis = false;
if (광고 && ndate < 광고) {
dis = true;
}
if (ade && ndate > ade) {
dis = true;
}
if (ndate.getMonth() < showmonth) {
tdc.push("bbit-dp-prevday");
}
else if (ndate.getMonth() > showmonth) {
tdc.push("bbit-dp-nextday");
}
if (dis) {
tdc.push("bbit-dp-disabled");
}
else {
tdc.push("bbit-dp-active");
}
var s = ndate.Format("yyyy-MM-dd");
if (s == tds) {
tdc.push("bbit-dp-today");
}
if (s == ins) {
tdc.push("bbit-dp-selected");
}
bhm.push("", ndate.getDate( ), "");
if (i % 7 == 0) {
bhm.push("");
}
}
tb.html(bhm.join(""));
}
var dateReg = /^(d{1,4})(-|/|.)(d{1,2})2(d{1,2})$/;
return $(this).each(function() {
var obj = $(this).addClass("bbit-dp-input");
var picker = $(def.picker);
def.showtarget == null && obj.after(picker);
picker.click(function(e) {
var isshow = $(this).attr("isshow");
//先隐藏
var me = $(this);
if (cp.css("visibility") == "visible") {
cp.css(" visible", "hidden") ;
}
if (isshow == "1") {
me.attr("isshow", "0")
cp.removeData("ctarget").removeData("cpk ").removeData("indata").removeData("onReturn");
return false;
}
var v = obj.val();
if (v != "") {
v = v.match(dateReg);
}
if (v == null || v == "") {
def.Year = new Date().getFullYear() ;
def.Month = new Date().getMonth() 1;
def.Day = new Date().getDate()
def.inputDate = null
}
else {
def.Year =parseInt(v[1], 10);
def.Month =parseInt(v[3], 10)
def.Day =parseInt(v[4], 10 );
def.inputDate = new Date(def.Year, def.Month - 1, def.Day)
}
cp.data("ctarget", obj).data("cpk" , 나).data("indata", def.inputDate).data("onReturn", def.onReturn);
if (def.applyrule && $.isFunction(def.applyrule)) {
var rule = def.applyrule.call(obj, obj[0].id);
if (규칙) {
if (rule.startdate) {
cp.data("ads", rule.startdate);
}
else {
cp.removeData("광고");
}
if (rule.enddate) {
cp.data("ade", rule.enddate);
}
else {
cp.removeData("ade");
}
}
}
else {
cp.removeData("ads").removeData("ade")
}
writecb();
$("#BBIT-DP-T").height(cp.height());
var t = def.showtarget || obj;
var pos = t.offset();
var height = t.outerHeight();
var newpos = { 왼쪽: pos.left, 위쪽: pos.top 높이 };
var w = cp.width();
var h = cp.height();
var bw = document.documentElement.clientWidth;
var bh = document.documentElement.clientHeight;
if ((newpos.left w) >= bw) {
newpos.left = bw - w - 2;
}
if ((newpos.top h) >= bh) {
newpos.top = pos.top - h - 2;
}
if (newpos.left < 0) {
newpos.left = 10;
}
if (newpos.top < 0) {
newpos.top = 10;
}
$("#BBIT-DP-MP").hide();
newpos.visibility = "표시됨";
cp.css(newpos);
//cp.show();
$(this).attr("isshow", "1");
$(document).one("click", function(e) {
me.attr("isshow", "0");
cp.removeData("ctarget").removeData(" cpk").removeData("indata");
cp.css("visibility", "hidden");
});
거짓을 반환합니다.
});
});
};
})(jQuery); # >


复主代码
代码如下:

;(function($) {
//$.fn.extend(datepicker:function(o){})를 사용할 수도 있습니다.
$.fn.datepicker= function(o) {
} ( 이러한 매개변수의 의미를 설명하기 위해 주석이 코드에 추가되었습니다. 여러 언어에 대해 weekName, MonthName



과 같은 여러 매개변수가 설정되어 있습니다. 코드 복사
코드는 다음과 같습니다. 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) ;//전달된 매개변수를 사용하여 기본


두 번째 부분은 월 보기와 연도 및 월 선택을 초기화하는 것입니다. 보기의 HTML은



코드 복사


코드는 다음과 같습니다. cpHA.push("
")
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 사용자 정의 속성
image이 등록됩니다.
코드 복사 코드는 다음과 같습니다.
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
}


모든 날짜 선택 시간 초기화(1회) 후 각 선택기에 클릭 이벤트를 추가해야 합니다


코드 복사 코드는 다음과 같습니다. return $(this).each(function() {
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) {
....//코드 생략
})


피커의 클릭 이벤트는 상대적으로 길다는 점은 따로 이야기하는 것이 좋을 것 같습니다. 두 번째는 실제 숨겨진 이벤트의 처리입니다. 두 번째는 기간 가장자리 문제 처리이고, 세 번째는 기간 규칙 처리입니다.


코드 복사 코드는 다음과 같습니다.

function(e) {
//현재 표시 여부 가져오기
var isshow = $(this).attr("isshow")
var me = $(this) ;
//표시된 경우 숨김, 선택기를 클릭하여 표시한 다음 선택기를 클릭하여 숨기는 논리를 처리하는 데 사용됩니다.
if (cp.css("visibility") == "visible" ) {
cp.css(" visible", "hidden");
}
//표시되는 경우
if (isshow == "1") {
me. attr("isshow", " 0");
//임시 데이터를 제거합니다. 이는 싱글톤이므로 현재 어떤 입력인지 표시해야 합니다.
cp.removeData("ctarget").removeData("cpk ").removeData("indata").removeData("onReturn");
return false; //버블링 방지
}
//숨겨진 경우 입력 값 가져오기
var v = obj .val();
if (v != "") {
v = v.match(dateReg);//형식이 맞는지 확인
}
if (v == null || v == "") { //형식이 올바르지 않거나 비어 있으면 현재 날짜를 사용합니다.
def.Year = new Date().getFullYear()
def.Month = new Date() .getMonth() 1;
def.Day = new Date().getDate();
def.inputDate = null
}
else {
//그렇지 않으면 입력 날짜를 사용하세요. 🎜>def.Year = parInt(v[1 ], 10);
def.Month =parseInt(v[3], 10)
def.Day =parseInt(v[4], 10);
def.inputDate = new Date(def .Year, def.Month - 1, def.Day)
}
//임시 데이터 등록
cp.data("ctarget", obj) .data("cpk", me).data ("indata", def.inputDate).data("onReturn", def.onReturn)
//규칙을 호출하고 선택적 날짜 범위를 반환합니다
(def.applyrule && $.isFunction(def.applyrule)) {
var rule = def.applyrule.call(obj, obj[0].id)
if (rule) {
if ( rule.startdate) {
cp.data ("ads", rule.startdate)
}
else {
cp.removeData("ads")
}
if (rule.enddate) {
cp.data("ade", rule.enddate)
}
else {
cp.removeData("ade")
}
}
}
else {
//제한사항이 없으면 제거
cp.removeData("ads").removeData("ade")
}
// 월별 달력의 내용은 td
writecb();
$("#BBIT-DP-T").height(cp.height())//표시된 첨부 객체 가져오기
var t = def.showtarget || obj;
/ /객체 위치 가져오기
var pos = t.offset()
//객체 높이 가져오기
var height = t.outerHeight();
//날짜 선택 상자의 위치가 첨부됩니다. 객체의 위치와 높이
var newpos = { left: pos.left, top: pos.top height } ;
//다음은 모두 창 경계 문제를 다루고 있습니다.
var h = cp.height()
var bw = document.documentElement.clientWidth; ;
var bh = document.documentElement.clientHeight;
if ((newpos.left w) > ;= bw) {
newpos.left = bw - w - 2
if ((newpos.top h) >= bh) {
newpos.top = pos.top - h - 2
}
if (newpos.left < 0) {
newpos; .left = 10;
}
if (newpos.top < 0) {
newpos.top = 10;
}
//월 날짜 보기로 강제 설정
$("#BBIT-DP-MP").hide();
newpos.visibility = "visible" ;
cp.css(newpos); //알려진 위치로 이동하여 표시
//cp.show();
$(this).attr("isshow", "1")//날짜 선택기를 숨기는 문제를 해결하려면 문서에 단일 클릭 이벤트를 등록하세요. 날짜 선택기를 연 후 다른 곳을 클릭
$(document).one("click", function(e) {
me.attr("isshow", "0");
cp.removeData(" ctarget").removeData("cpk").removeData("indata");
cp.css("visibility ", "hidden");
});
return false;//조직 버블
}


지난 달, 다음 달 등 일부 코드는 날짜 연산 기능입니다. 코드에 대해 궁금한 점이 있으면 잠시 소개하지 않겠습니다. 메시지를 남겨 주시면 답변해 드리겠습니다.

첫 번째 예는 세 가지 유형이 있으며 호출 방법에 대한 설명도 있습니다. >
http://jscs.cloudapp.net/ControlsSample/dpdemo


두 번째 예시는 제가 작성한 일정 관리 컨트롤과 결합된 datepicker 애플리케이션입니다(이것을 먼저 보시면 됩니다) )
http://xuanye.cloudapp.net/
위치는

입니다. image 는 내 창작물에 datepicker를 적용한 것입니다. 마지막으로 이 글이 도움이 되셨다면 [추천]을 눌러주세요. image코드 패키징 스크립트 홈

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
최신 이슈
인기 추천
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿