jQuery UI 날짜 선택기가 대화 상자에서 자동으로 열립니다.

jQuery UI 날짜 선택기가 대화 상자에서 자동으로 열립니다.

jQuery 대화 상자 개체 내에서 사용되는 날짜 선택기가 있습니다.대화상자 콘텐츠의 원본은 다음과 같이 로드됩니다..load()대화 상자에서 텍스트 입력용 날짜 선택기를 만드는 스크립트를 만들었습니다.

$("#date").datepicker({ ... });

처음 대화 상자를 열면 모든 것이 정상이지만 닫았다가 다시 열면 날짜 선택기가 자동으로 트리거됩니다(그런 옵션은 없습니다).autoOpen:false이 문제를 예방할 수 있는 방법이 있습니까?또, 무엇을 잘못하고 있습니까?

내가 찾은 훨씬 간단한 방법:

$("#dialogPopper").click(
                    function() {
                        $("#date").datepicker("disable");
                        $("#dialog").dialog("open");
                        $("#date").datepicker("enable");
                        return false;
                    }
                  );

대화상자 시작 부분에 날짜 선택 필드를 놓으면 날짜 선택 필드가 자동으로 날짜 선택 필드가 열립니다.대화상자의 시작 부분에 숨겨진 입력을 배치할 수 있습니다.

<input type="text" style="width: 0; height: 0; top: -100px; position: absolute;"/>

나는 이 문제를 정확히 가지고 있었고 tvanfosson의 기술을 약간 변형시켜 해결했다.어떤 이유에서인지 아래 날짜 선택 필드에 "클릭" 이벤트를 수동으로 첨부해야 했습니다.

 $('#dialog').dialog({
 open: function(event, ui) {
    $(ui).find('#date').datepicker().click(function(){
        $(this).datepicker('show');
    });
 },
 close: function(event,ui) {
    $(ui).find('#date').datepicker('destroy');
 }});

(죄송합니다.tvanfosson의 투고에 코멘트로 투고하고 싶었지만, 필요한 담당자가 없습니다.)

대화상자가 닫힐 때 날짜 선택기를 삭제하고 대화상자 작성 시 스크립트로 포함하지 않고 대화상자의 열려 있는 이벤트핸들러에 날짜 선택기를 작성하는 것을 검토해 주세요.

 $('#dialog').dialog({
     open: function(event, ui) {
        $(ui).find('#date').datepicker();
     },
     close: function(event,ui) {
        $(ui).find('#date').datepicker('destroy');
     }
 });

재현할 필요가 있는지 확인하기 위해 다양한 이벤트/방법을 시험해 볼 수도 있지만, 이 방법이 효과적이라고 생각합니다.

그 이유는 모달 형식의 첫 번째 항목은 날짜 선택 도구 텍스트 필드이며 모달 실행 시 활성 컨트롤이 날짜 선택 도구에 포함되어 있기 때문입니다.

두 가지 대안을 찾았습니다.

1. 필드의 순서를 변경합니다.1등을 하려면 데이트 피커가 있는 사람을 피하세요.

2. 날짜 선택기를 별도의 코드의 필드에 설정하지 말고 대화 상자를 여는 함수 내에서 수행합니다(열린 직후).$("#dialog").dialog("open");).

선택기가 자동으로 열리는 이유는 처음 선택기를 연 후에도 입력 필드가 계속 포커스를 유지하기 때문입니다.

흐리게 할 필요가 있습니다.

$input.datepicker({
  onClose: function(dateText) {
    $(this).trigger('blur');
  }
});

대화 상자의 초점일 뿐입니다.api.jqueryui.com/dialog/

대화 상자를 열면 포커스가 다음 항목과 일치하는 첫 번째 항목으로 자동으로 이동합니다.

1. 자동 포커스 속성을 가진 대화상자의 첫 번째 요소
2. 대화상자 콘텐츠 내의 첫 번째 : 탭 가능 요소
3. 대화상자 버튼페인 내의 첫 번째 : 탭 가능 요소
4. 대화상자의 닫기 버튼
5. 대화 상자 자체

은 ★★★★★★★★★★★★를 사용하는 것입니다.autofocus" " 에서의 datepicker.

저도 비슷한 문제가 있었어요.jquery UI 대화상자에 jquery 날짜 선택기가 있습니다.대화상자를 열었을 때 IE에서 달력 선택기가 자동으로 열리고 있었습니다.Firefox나 Chrome에서는 그렇지 않았습니다.$(문서)에서 작성 시 날짜 선택기를 비활성화하여 문제를 해결했습니다.다음과 같이 준비:

$('.ConfirmMove #from').datepicker({
  duration: ''
}).datepicker('disable');

그런 다음 이 날짜 선택기가 포함된 대화상자를 열었을 때 대화상자의 열린 이벤트 핸들러에서 해당 날짜 선택기를 활성화했습니다.

$(".ConfirmMove").dialog({
  close: function() { 
     $('.ConfirmMove #from').datepicker('disable'); 
  },
  open: function() {
     $('.ConfirmMove #from').datepicker('enable');
  }
});

또한 대화 상자를 닫을 때 다시 비활성화해야 합니다.

이렇게 하면 대화상자를 열고 닫을 때마다 날짜 선택기를 삭제하거나 다시 만들지 않아도 됩니다.

이것이 내가 문제를 해결하기 위해 한 일이다.

이 코드는 대화 상자 생성에 있습니다.

document.getElementById('date').disabled = true;
setTimeout('document.getElementById("date").disabled = false;', 100);

이렇게 하면 대화 상자가 열리면 다른 컨트롤에 초점이 맞춰집니다.

타임아웃을 테스트하여 더 적은 지연을 얻을 수 있지만, 저는 100으로 괜찮았습니다.

제 결정은 jsonx와 Pawel Furmaniak의 솔루션을 결합하는 것입니다.

<input id='fake-input' type='text' style='width: 0; height: 0; top: -100px; position: absolute;'/>

$( '.datepickerclass' ).datepicker({
   onClose: function() {
$('#fake-input').trigger("focus");
 }

오래된 질문인 것은 알지만, 나에게 효과가 있는 솔루션 중 하나는 달력 아이콘을 트리거하는 것이었습니다.

$( ".date" ).datepicker({
  showOn: "button",
  buttonImage: "../css/imgs/calendar.gif",
  buttonImageOnly: true
});

이니셜라이저에 애니메이션 옵션을 입력했을 때 어떤 이유로 인해 캘린더가 다음 동작을 하지 않게 되었습니다.

show Anim:떨어지다

소스코드로부터 알았다.jQuery.Dialog 트랙 " " "focusin, 및 「」를 설정합니다focus대화상자가 활성화 상태가 된 후 해당 요소에서 이벤트가 발생합니다.이 동작을 방지하려면 포커스를 맞추고 있는 요소에서 버블이벤트 전파를 정지합니다.

$("#input").on("focusin", function (e) {
   return false; // or e.stopPropagation();
}).datepicker();

• 두 가지 사이에는 점에 유의하시기 바랍니다.jQuery(복수)
• 티켓 http://bugs.jqueryui.com/ticket/9125

언급URL : https://stackoverflow.com/questions/932420/jquery-ui-datepicker-opens-automatically-within-dialog