jQuery 날짜 선택기가 입력 텍스트 필드에 연결되었습니다.

jQuery에서 날짜 범위 선택 도구를 만들고 입력 텍스트 필드에 연결합니다.jQuery 날짜 선택기가 입력 텍스트 필드에 연결되었습니다.

코드는 다음과 같이 진행됩니다

<!DOCTYPE html> 
<html> 
<head> 
    <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/> 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script> 
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script> 

    <script> 

    $(document).ready(function() { 
    $("#datepicker").datepicker(); 
    }); 

    </script> 


</head> 
<body style="font-size:62.5%;"> 
    <form action="sample.php" method="post"> 

Start Date: <input type="text" name="startdate" id="datepicker"/> 
End Date: <input type="text" name="enddate" id="datepicker"/> 
<input type="submit" /> 
</form> 
</body> 
</html>

데이터는 시작 날짜 입력 텍스트 필드에 작동하는 것 같군. 내가 시작 날짜 필드를 선택하면 달력이 나타납니다 :

enter image description here

을하지만 종료 날짜 입력 텍스트 필드를 클릭하면 달력이 표시되지 않습니다. 해당 캘린더를 사용하여 START 및 END 날짜를 선택해야합니다.

내 코드에서 문제가 발생했습니다. 아무도 말해 줄 수 있니?

감사합니다.

출처

2012-03-19 Tristan Jade Awat

도움을 주셔서 대단히 감사합니다. –

안녕하세요. 따라서 id = datepicker과 같은 2 개 요소의 시작일과 종료일이 잘못되었습니다.

예를 들어이를 참조하십시오 http://jsbin.com/evudo

솔루션 :

모두 입력 상자에 대한 초기화하십시오,

Start Date: <input type="text" name="startdate" id="start_datepicker"/> 
End Date: <input type="text" name="enddate" id="end_datepicker"/>

는 희망이 도움이

$(document).ready(function() { 
     $("#start_datepicker").datepicker(); 
    $("#end_datepicker").datepicker(); 

    });

HTML, 환호

을

출처

2012-03-19 07:46:55

두 입력 필드에 동일한 ID를 사용하고 있습니다. 이

Start Date: <input type="text" name="startdate" id="datepicker_start"/> 
End Date: <input type="text" name="enddate" id="datepicker_end"/> 


$(document).ready(function() { 
    $("#datepicker_start").datepicker(); 
    $("#datepicker_end").datepicker(); 
});

출처

2012-03-19 07:46:59

정의를 시도하고 사용 id 속성은 HTML 요소 (값이 HTML 문서 내에서 고유해야합니다)에 대한 고유 ID를 지정 .

당신이 시도 두 개의 텍스트 필드를 사용하여 날짜 범위를 갖고 싶어 W3schools에서이

var dates = j$("#trdatefrom, #trdateto").datepicker({ 
       changeMonth: true, 
       changeYear: true, 
       maxDate: new Date(), 
       dateFormat: "yy/mm/dd", 
       onSelect: function(selectedDate) { 
         var option = this.id == "trdatefrom" ? "minDate" : "maxDate", 
           instance = j$(this).data("datepicker"), 
           date =j$.datepicker.parseDate(
             instance.settings.dateFormat || 
             j$.datepicker._defaults.dateFormat, 
             selectedDate, instance.settings); 
         dates.not(this).datepicker("option", option, date); 
       } 
     });

jquery datepicker docu

출처

2012-03-19 07:47:32 ton

이 특정 질문과 관련이있는 것은 무엇입니까? – redDevil

@achusonline이 질문의 맥락에서 내 대답을 편집했습니다. – ton

에서 당신은 요소 .. ID 값을 두 요소에 대해 동일한 ID를 준 해당 문서에서 고유해야합니다.

<script>  
$(document).ready(function() {  
     $("#datepicker1").datepicker(); });  
     $("#datepicker2").datepicker(); });  

</script> </head> 
<body style="font-size:62.5%;"> 
<form action="sample.php" method="post"> 
    Start Date: <input type="text" name="startdate" id="datepicker1"/> 
    End Date: <input type="text" name="enddate" id="datepicker2"/> 
<input type="submit" /> </form> 
</body> </html>

또는 당신이 클래스를 사용할 수 있습니다,

<script>  
$(document).ready(function() {  
     $(".datepicker").datepicker(); });  
</script> </head> 
<body style="font-size:62.5%;"> 
<form action="sample.php" method="post"> 
    Start Date: <input type="text" name="startdate" class="datepicker"/> 
    End Date: <input type="text" name="enddate" class="datepicker"/> 
<input type="submit" /> </form> 
</body> </html>

출처

2012-03-19 07:49:21 redDevil

ID는 시작 날짜와 종료 날짜에 대한 ID를 변경하려고하면 표준에 따라 고유해야합니다. 또는 id를 class로 바꿉니다.

Start Date: <input type="text" name="startdate" class="datepicker"/> 
End Date: <input type="text" name="enddate" class="datepicker"/> 


$(document).ready(function() { 
    $(".datepicker").datepicker(); 
    });

희망이 있습니다.

출처

2012-03-19 07:52:33 Vimalnath

jQuery 날짜 선택기가 입력 텍스트 필드에 연결되었습니다.

답변

관련 문제