2009-09-07 8 views
1

누군가가 특정 텍스트 상자에 집중했을 때 트리거되는 날짜 선택 도구 개체를 간단하게 통합 할 수있는 방법을 찾고 있습니다. 사용자가 텍스트 상자를 클릭하거나 초점을 맞추면 현재 날짜가 표시된 날짜 선택기 인터페이스가 나타나야하며 사용자는 쉽게 날짜를 선택할 수 있습니다. 작업이 완료되면 텍스트 상자에 YYYY-MM-DD 형식의 날짜가 있어야합니다 (mysql 날짜 형식).Javascript/Jquery date picker

시작일과 종료일을 선택하기위한 2 개의 텍스트 상자로도 가능해야합니다.

아이디어가 있으십니까?

답변

3

jquery UI의 datepicker을 보셨습니까? 위의 모든 작업을 수행합니다.

HTML

<input type="text" id="datepicker" size="30"/> 

자바 스크립트

$('#datepicker').datepicker({ dateFormat: 'yy-mm-dd' }); 
0

당신은 여기

Zebra_Datepicker, a lightweight datepicker jQuery plugin 어떤 answe 예입니다 시도해 볼 수도를 그것은 다음과 같습니다 두 질문에 모두 답하십시오. 당신과 같이, 두 개의 텍스트 상자, 시작 날짜 하나와 종료 날짜와 하나가 있다고 가정 : 자바 스크립트 파일에 지금

<input type="text" name="start_date" id="start_date"> 
<input type="text" name="end_date" id="end_date"> 

, 당신이 jQuery를, Zebra_Datepicker 및 관련 CSS 파일을 포함 한 후, 다음과 같이 사용하십시오.

$(document).ready(function() { 
    $('#start_date').Zebra_DatePicker({ 
     direction: true,   // future-only calendar, starting today 
     format:  'YYYY-MM-DD', // the format you want 
     pair:  $('#end_date') // we pair the two elements 
    });  
    $('#end_date').Zebra_DatePicker({ 
     direction: true,   // future-only calendar, starting today 
            // (unless a date is selected in the other 
            // element when the date picker will become 
            // future-only, starting that particular date) 
     format:  'YYYY-MM-DD'  // the format you want 
    });  
});