자바 스크립트를 사용하여 캘린더 텍스트 상자를 동적으로 추가하는 방법은 무엇입니까?

링크의 각 클릭에 동적으로 캘린더 텍스트 상자를 추가해야합니다. 몇 가지 코드를 테스트했습니다. 첫 번째 선언은 다른 선언이 아니라 작동합니다. 폼이로드가 달력을 얻을 수있을 때자바 스크립트를 사용하여 캘린더 텍스트 상자를 동적으로 추가하는 방법은 무엇입니까?

<head> 
    <script type="text/javascript"> 
     $(function() { 
      $(".hajanDatePicker").datepicker(); 
     }); 
    </script> 
    <script type="text/javascript"> 
     var intTextBox=0; 

     function addElement(){ 
      var contentID = document.getElementById('content'); 
      var newTBDiv = document.createElement('div'); 
      newTBDiv.setAttribute('id','txtDatePicker'); 
      newTBDiv.innerHTML +="Date:<input id='txtDatePicker' type='text' name='test1'>"; 
      contentID.appendChild(newTBDiv); 
     } 
    </script> 
</head> 
<body> 
    <form id="form1" method="get"> 
     <div id="content"> 
      <input type="text" id="txtDatePicker" name="test1"/> 
     </div> 
     <p><a href="javascript:addElement();" >Add</a> 
    </form> 
</body>

: 다음은 내 코드입니다. "추가"를 클릭하면 캘린더처럼 아닌 일반 텍스트 상자로 열립니다.

출처

2012-04-23 Raj

동일한 ID의 요소를 추가하면 안됩니다. 대신 클래스 이름으로 전환 한 다음 Jakub의 답변이 추가 된 상태에서 현재 가지고있는 것을 사용할 수 있습니다 ('hajanDatePicker'클래스를 제공하는 한). – jprofitt

그냥 addElement 함수의 맨 아래에

$(".hajanDatePicker").datepicker();

를 호출합니다.

변경 <input id='txtDatePicker' type='text' name='test1'> 또한

<input id='txtDatePicker' type='text' class='hajanDatePicker' name='test1'>에, 같은 ID를 가진 페이지에 여러 개의 입력이 있습니다 txtDatePicker합니다.

출처

2012-04-23 12:12:06

감사합니다. 그냥이 기능을 추가했습니다. 캘린더가 오지만 텍스트 상자에 날짜를 표시 할 수 없습니다 .... – Raj

오, 그래요. 나는 이름, 전화, 서비스와 같은 많은 입력 필드를 가지고있다. 나는 같은 id를 가진 페이지에 여러 개의 입력을 가졌다 : txtDatePicker – Raj

예, Jakub. 당신은 올바른 길을 가고 있습니다. 고맙습니다 – Raj

자바 스크립트를 사용하여 캘린더 텍스트 상자를 동적으로 추가하는 방법은 무엇입니까?

답변

관련 문제