플러그인-daterangepicker 매개 변수 & 사용 요약
api 주소
options
$('#id').data('daterangepicker').setStartDate(‘2018-12-11’);
이벤트
$('#id').on('apply.daterangepicker', function (ev, picker) {
// code
// console.log("start = "+picker.startDate.format('YYYY-MM-DD')+" end = "+picker.endDate.format('YYYY-MM-DD'));
});
묶음해제daterangepicker
$('#id').off('.daterangepicker');
minDate
minDate: "", // minDate
minDate가 필요하지 않으면 minDate:null을 설정해야 하거나 주의를 설정하지 않아야 합니다: startDate와endDate는null을 설정할 수 없습니다. 그렇지 않으면 null을 잘못 보고한 후에 typeof options를 발견할 수 있습니다.minDate==='object'는 다음 문장을 실행하여 좌우 전환 화살표가 보이지 않기 때문에 minDate가 없으면 패스false로 변경합니다
if (typeof options.minDate === 'object')
this.minDate = moment(options.minDate);
리셋에서 현재 요소 - this를 호출합니다.element
$('#date').daterangepicker({
startDate: '2018-01-01',
endDate: '2018-12-10',
autoUpdateInput:false,
applyClass : 'btn-sm btn-success',
cancelClass : 'btn-sm btn-default',
locale: {
applyLabel: ' ',
cancelLabel: ' ',
fromLabel : ' ',
toLabel : ' ',
customRangeLabel : ' ',
firstDay : 1,
format: 'YYYY-MM-DD',
},
opens : 'right', //
separator : ' ',
"showDropdowns": true
}, function(start, end, label) { //
// this.element
})
기본 날짜 확인 을 클릭하면 데이터가 채워지지 않습니다
날짜 창을 초기화할 때 들어오는 리셋 함수는 사용자가 특정한 날짜를 클릭한 후에만 터치합니다. 사용자가 기본 날짜를 선택하면 터치하지 않습니다.
$('#date').daterangepicker({
startDate: '2018-01-01',
endDate: '2018-12-10',
autoUpdateInput:false,
applyClass : 'btn-sm btn-success',
cancelClass : 'btn-sm btn-default',
locale: {
applyLabel: ' ',
cancelLabel: ' ',
fromLabel : ' ',
toLabel : ' ',
customRangeLabel : ' ',
firstDay : 1,
format: 'YYYY-MM-DD',
},
opens : 'right', //
separator : ' ',
"showDropdowns": true
}, function(start, end, label) { //
// input ， ，
})
해결 방법: 감청 apply.daterangepicker 이벤트
$('#date').on('apply.daterangepicker', function (ev, picker) {
//
console.log(picker.startDate.format('YYYY-MM-DD'));
});
콜백에서 현재 요소 가져오기
this로.element
$(obj).daterangepicker({
autoUpdateInput:false,
clearBtn:true,
"singleDatePicker": true,
"showDropdowns": true,
locale : {
format: 'YYYY-MM-DD',
}
},function(start, end, label) {
this.element.val(start.format('YYYY-MM-DD'))
if (is_clear) {
this.element.after('')
this.element.nextAll('.date_img').hide()
this.element.nextAll('.clear_time').show()
}
});
이중 달력의 시작과 끝 선택은 서로 영향을 주지 않는다
약서 주소 참조
더블 달력 클릭 공백에서 닫기, 다시 클릭 오류 보고
달력 확장 표시가 완전하지 않습니다.
포지셔닝 소자가 어느 방향에서 창이 넘칠 때 원소를 목표의 다른 쪽으로 뒤집어 충돌 검사를 다시 실행하여 적합한지 확인하기 위해 파라미터 클립을 추가합니다
this.flip = false; // ， ，
if (typeof options.flip === 'boolean')
this.flip = options.flip;
move:function에서
move: function() {
var parentOffset = { top: 0, left: 0 },
containerTop;
var parentRightEdge = $(window).width();
if (!this.parentEl.is('body')) {
parentOffset = {
top: this.parentEl.offset().top - this.parentEl.scrollTop(),
left: this.parentEl.offset().left - this.parentEl.scrollLeft()
};
parentRightEdge = this.parentEl[0].clientWidth + this.parentEl.offset().left;
}
if (this.drops == 'up')
containerTop = this.element.offset().top - this.container.outerHeight() - parentOffset.top;
else
containerTop = this.element.offset().top + this.element.outerHeight() - parentOffset.top;
this.container[this.drops == 'up' ? 'addClass' : 'removeClass']('dropup');
/*************************** new add start ***********************/
if (this.flip && this.parentEl.is('body')) {
// ，
var dropUpFlag = this.drops == 'up' ? true : false;
if (this.drops == 'up') {
if (containerTop < 0) {
var tempTopDown = this.element.offset().top + this.element.outerHeight() - parentOffset.top;
if (tempTopDown + this.container.outerHeight() < $('body').height()) {
containerTop = tempTopDown;
dropUpFlag = false;
} else {
containerTop = 0;
}
}
} else {
if (containerTop + this.container.outerHeight() > $('body').height()) {
var tempTopUp = this.element.offset().top - this.container.outerHeight() - parentOffset.top;
if (tempTopUp >= 0) {
containerTop = tempTopUp;
dropUpFlag = true;
} else {
containerTop = $('body').height() - this.container.outerHeight();
}
}
}
this.container[dropUpFlag ? 'addClass' : 'removeClass']('dropup');
}
/*************************** new add end***********************/
var m_num= this.container.find('.single').length;
var isEmpty_customPickers = $.isEmptyObject(this.customPickers);
if(m_num==1){
if (!isEmpty_customPickers) {
this.container.css({
width:440
});
} else {
this.container.css({
width:350
});
}
}else{
if (!isEmpty_customPickers) {
this.container.css({
width:800
});
} else {
this.container.css({
width:710
});
}
}
if (this.opens == 'left') {
this.container.css({
top: containerTop,
right: parentRightEdge - this.element.offset().left - this.element.outerWidth(),
left: 'auto'
});
if (this.container.offset().left < 0) {
this.container.css({
right: 'auto',
left: 9
});
}
} else if (this.opens == 'center') {
this.container.css({
top: containerTop,
left: this.element.offset().left - parentOffset.left + this.element.outerWidth() / 2
- this.container.outerWidth() / 2,
right: 'auto'
});
if (this.container.offset().left < 0) {
this.container.css({
right: 'auto',
left: 9
});
}
} else {
this.container.css({
top: containerTop,
left: this.element.offset().left - parentOffset.left,
right: 'auto'
});
if (this.container.offset().left + this.container.outerWidth() > $(window).width()) {
this.container.css({
left: 'auto',
right: 0
});
}
}
},
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
Portswigger의 연구실 작성: CSRF 토큰 보호를 사용한 기본 클릭재킹이 견습생 수준 실습에서는 일부 CSRF 토큰 보호가 있음에도 불구하고 클릭재킹에 취약한 웹사이트에서 계정 삭제 흐름을 악용합니다. 주어진 자격 증명으로 로그인하면 계정 페이지로 이동한 후 사용자 계정을 삭제하는 데...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
