jQuery UI datepicker를 * 완전히 * 제거하려면 어떻게합니까?
부분적인 날짜 문자열을 처리하는 자체 텍스트 처리 스크립트가 있기 때문에 가끔 DatePicker를 첨부하고 싶은 날짜 텍스트 필드 가 있습니다. .remove 또는 .destroy를 호출하면 입력 필드에 텍스트 형식화 동작이 남지만 "8"문자열이 "8/18/2010"으로 변환됩니다. 더 나쁜 것은 내가 삭제를 시작하면 "8/18/20"에 도달하면 실제로 "8/18/2020"을 원한다고 꾸준히 가정합니다 .
내 페이지에서 datepicker를 완전히 완전히 제거하는 가장 좋은 방법은 무엇입니까? 항상 입력 한 텍스트를 완전히 무시하는 경우에도 사용할 수 있지만,이 경우 항상 그런 것은 아니지만 두 번 클릭 / 버튼으로 이미지에 표시되는 것을 선호합니다.
편집하다:
이것은 모두 jqGrid 내에 있으며 'selector'는 날짜 열의 텍스트 상자입니다.
function showPicker(selector) {
$(selector).datepicker({
onClose: function() {
$(selector).datepicker('remove');
// or 'destroy' or $('.datepicker').remove(); or $(this).datepick('remove');
}
});
}
이것은 그것이 다시 돌아 오는 것을 막지 만 내 텍스트 필드를 조작하는 것은 아닙니다. 다른 코드 (내가 알고있는)는 해당 필드의 내용을 조작하지 않으며 jqGrid가 데이터를 보내기 위해 Enter 키를 감시하는 것뿐입니다. 페이지의 생성 된 코드를 보면 datepicker div가 여전히 맨 아래에 있습니다.
edit2 : 이렇게하면 똑같은 동작이 나타납니다.
<html>
<body>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.4/jquery-ui.js"></script>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.4/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
$(document).ready( function(){
$("#pickle").datepicker({
onClose: function(){
$(this).datepicker('remove');
}
});
});
</script>
<input type="text" id="pickle" />
</body>
</html>
그것은 내가보고있는 것과 동일한 동작을 일으키지 만 '파괴'로 변경하면 여기에서 작동 하지만 내 페이지에서는 작동 하지 않습니다. 이상한.
이렇게하면 .datepicker완전히 제거됩니다 .
$( selector ).datepicker( "destroy" );
$( selector ).removeClass("hasDatepicker").removeAttr('id');
문서 :
http://docs.jquery.com/UI/Datepicker#method-destroy
도 아래 주석을 읽으십시오.
datepicker 클래스를 제거한 다음 datepicker에 연결된 요소에서 unbind 메서드를 호출하여 문제를 해결했습니다. 그것은 그것을 제거하는 것 같았습니다!
예 :
$('#myelement').datepicker();
/////////datepicker attached to myelement//////
그리고:
$('#myelement').removeClass('calendarclass');
$('#myelement').removeClass('hasDatepicker');
$('#myelement').unbind();
클래스를 제거하는 것만으로도 여전히 입력 요소가 클릭 할 때 datepicker를 호출하게합니다. 아마도 unbind()그 자체로 작업을 수행 할 수 있지만 저는 일종의 벨트 및 중괄호 챕터입니다.
상황에 따라 서버 측에서 할 수 있습니다.
전의. asp와 같은 구문으로
<% if( showDatePicker ) {%>
$('#dp-div').DatePicker(); // or whatever
<% } %>
편집 datepicker
의 dateFormat 을 설정하는 방법은 무엇입니까? 즉
$( ".selector" ).datepicker({ dateFormat: 'yy-mm-dd' });
당신은 원할 수 있습니다
$( ".selector" ).datepicker({ dateFormat: '...' });
단일 페이지 응용 프로그램에서 페이지의 내용이 변경 되더라도 jquery ui는 가비지로 남아 있습니다. 그래서 단일 페이지 응용 프로그램에서 이것을 좋아합니다.
(function($) {
if ($.ui !== null && typeof $.ui !== typeof undefined) {
/**
* dialog fix
*/
var $oDialog = $.fn.dialog
$.fn.dialog = function(mth, dialogOpts) {
if (mth !== null && typeof mth === 'string') {
if (mth === 'clean') {
var id = $(this).attr('id'); // you must set id
if (id !== null && typeof id !== typeof undefined) {
// garbage jquery ui elements remove
$('[aria-describedby="' + id + '"]', document).each(function() {
if ($(this).dialog('instance')) {
$(this).dialog('destroy');
}
$(this).remove();
});
}
return this;
} else if (mth === 'open' && dialogOpts !== null && typeof dialogOpts === 'object') {
if ($oDialog.apply(this, ['instance'])) {
$oDialog.apply(this, ['option', dialogOpts]);
return $oDialog.apply(this, ['open']);
} else {
return $oDialog.apply(this, dialogOpts);
}
}
}
return $oDialog.apply(this, arguments);
};
}
})(jQuery);
페이지 스크립트에서 이와 같이 사용
// target layer in my page
var $xlsDiv = $('#xlsUpFormDiv');
$xlsDiv.dialog('clean'); // clean garbage dialog
var dialogOpts = {
autoOpen: false,
closeOnEscape: true,
height: 800,
width: 600,
modal: true,
buttons: ...,
close: function() {
$xlsForm.reset();
}
};
// initialize original jquery ui
$xlsDiv.dialog(dialogOpts);
// open button click
$('#btnViewXlsUpForm').on("click", function() {
$xlsDiv.dialog('open', dialogOpts);
});
참고URL : https://stackoverflow.com/questions/3516995/how-do-i-completely-remove-a-jquery-ui-datepicker
'IT TIP' 카테고리의 다른 글
| C에서 stdin 및 stdout 경로 변경 (0) | 2020.12.03 |
|---|---|
| IIS7에서 net.tcp 활성화 (0) | 2020.12.03 |
| 사람들이 코드에 메시지 / 이벤트 버스를 사용하는 이유는 무엇입니까? (0) | 2020.12.03 |
| jQuery를 사용하여 모든 행에서 첫 번째 TD 선택 (0) | 2020.12.03 |
| 목록 항목 내에서 div를 사용할 수 있습니까? (0) | 2020.12.03 |