2012-09-28 7 views
1

이 작업을 수행하는 데 필생적으로 보일 수 없습니다. 기본적으로 시나리오는 이렇게됩니다. 나는 실행되는 함수를 가지고 있고 jQuery 다이얼로그 창에 datepicker가 임베디드되어있다. 사용자가 날짜를 선택하고 presto를 선택하면 날짜가 선택되고 자동 메시지가 var에 캡처됩니다. 문제는 동일한 유형의 코드가 다시 실행될 때 sdate는 변경되지만 텍스트는 새로운 날짜와 동일하게 유지된다는 것입니다. 나는 동적 인 날짜를 가진 동적 텍스트를 원합니다. 이것은 datePicker가 콜백 함수라는 것을 알고 있기 때문에 까다 롭습니다. 기본적으로 자바 스크립트 코딩에 대한 지식을 넘어서 있습니다.jQuery UI Datepicker 및 var

<div style="display:none" id="dd"> 
<div id="d1"></div> 
</div> 

예 : 테스트 ('1') 테스트 ('2')

var sdate, text 

//========================================================================== 
    function test(x) { 
     //========================================================================== 
     if (x == '1') { 

      $('#dd') 
       .dialog({ 
       autoOpen: true, 
       modal: true, 
       overlay: { 
        opacity: 1.0, 
        background: 'black' 
       }, 
       title: "SELECT DATE 1...", 
       height: 235, 
       width: 235, 
       draggable: false, 
       resizable: false 
      }); 
      $('#d1') 
       .datepicker({ 
       onSelect: function() { 

        sdate = $(this) 
         .val(); 
        $("#dd") 
         .dialog("close"); 

        text = 'THE DATE YOU HAVE CHOSEN IS: ' + sdate + '.' 
        alert(text) 

       } //end of onSelect: function() { 
      }); //end of datepicker 

     } //end of (x == '1') 


     else if (x == '2') { 

      $('#dd') 
       .dialog({ 
       autoOpen: true, 
       modal: true, 
       overlay: { 
        opacity: 1.0, 
        background: 'black' 
       }, 
       title: "SELECT DATE 2...", 
       height: 235, 
       width: 235, 
       draggable: false, 
       resizable: false 
      }); 
      $('#d1') 
       .datepicker({ 
       onSelect: function() { 

        sdate = $(this) 
         .val(); 
        $("#dd") 
         .dialog("close"); 

        text = 'THE 2ND DATE YOU HAVE CHOSEN IS: ' + sdate + '.' 
        alert(text) 

       } //end of onSelect: function() { 
      }); //end of datepicker 

     } //end of (x == '2') 

    } //end of function 

하는 것은 미친가는이 포럼에서 전문가의 도움이 필요합니다.

당신이 그것을에서 실행, 그래서 몇 가지를 변경한다는 지원 ​​

+0

동적 텍스트가 포함 된이 동적 텍스트의 의미는 무엇입니까? –

+0

복사/붙여 넣기의 유물 일 수도 있지만 코드에 많은 세미콜론이 누락 된 것 같습니다. 또한 모달 대화 상자를 datepicker와 결합해야합니까? jqueryui datepicker에는 이미 구성 가능한 팝업 위젯 동작이 있습니다. 실제로'test (1)'과'test (2)'를 호출하는 코드를 보여줄 수 있습니까? –

+0

이제는 [여기] (http://jsfiddle.net/pVDyM/)가 아닌 것을 설명 할 수 있습니까? –

답변

1

내가 순서에 약간의 문제가 있었다 모든 도움을 많이 감사 감사. 나는 jsFiddle이 달렸다 :

jQuery(document).ready(function(){ 
    jQuery("button").click(function(){ 
     test(jQuery(this).attr("data"));   
    }); 
}); 

var sdate, text 

function test(x) { 
    if (x == '1') { 
     $('#d1').datepicker({ 
      onSelect: function() { 
       sdate = $(this).val(); 
       $("#dd").dialog("close"); 
       text = 'THE DATE YOU HAVE CHOSEN IS: '+ sdate +'.'; 
       alert(text); 
       //jQuery(this).datepicker("destroy"); 
      }//end of onSelect: function() { 
     });//end of datepicker 

     $('#dd').dialog({ 
      autoOpen: true, 
      modal: true, 
      overlay: { 
       opacity: 1.0, 
       background: 'black' 
      }, 
      title: "SELECT DATE 1...", 
      height: 400, 
      width: 400, 
      draggable: false, 
      resizable: false}); 

    } else if (x == '2') { 
     $('#d1').datepicker({ 
      onSelect: function() { 
       sdate = $(this).val(); 
       $("#dd").dialog("close"); 
       text = 'THE 2ND DATE YOU HAVE CHOSEN IS: '+ sdate +'.'; 
       alert(text); 
      //jQuery(this).datepicker("destroy"); 

      }//end of onSelect: function() { 
     });//end of datepicker 

     $('#dd').dialog({ 
      autoOpen: true, 
      modal: true, 
      overlay: { 
       opacity: 1.0, 
       background: 'black' 
      }, 
      title: "SELECT DATE 2...", 
      height: 400, 
      width: 400, 
      draggable: false, 
      resizable: false}); 

    }//end of (x == '2') 

}//end of function 

유일한 : 버튼은 단지

내가 사용하는 코드를 다음 스크립트를 실행하는 데 사용되는

<link type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/themes/redmond/jquery-ui.css" rel="stylesheet" /> 

<div style="display:none" id="dd"> 
    <div id="d1"></div> 
</div> 

<button data="1">1</button> 
<button data="2">2</button> 

:

내가이 HTML을 사용 내가 작동하도록하는 문제는 작업 순서였다. 그래서 대화 상자를 만들기 전에 datepicker를 만듭니다.