2012-03-06 10 views
3

jsp에 날짜 선택을위한 날짜 선택 도구 (팝업 달력)를 추가하는 방법은 무엇입니까?jsp에서 날짜 선택을위한 캘린더 팝업

웹 응용 프로그램을 개발 중입니다. 내가 JSP로 달력을 원하는 사용자가 쉽게 입력하고 날짜를 확인하는 대신 그 달력에서 날짜를 선택할 수 있습니다.

답변

4

웹상에 너무 많은 날짜 선택 도구가 있습니다. 날짜 선택 도구는 Google뿐입니다. 그러나 개발자가 여기에 스크린 샷과 링크가 포함 된 http://woork.blogspot.com/2009/01/beautiful-datepickers-and-calendars-for.html에 대한 좋은 개요를 묻기 때문에 한눈에 비교할 수 있습니다 (그 이유는 내가 그 페이지를 좋아하는 이유입니다).

사용하는 날짜 선택 중 하나에 의존 :

  1. 자바 스크립트 프레임 워크 : 코딩/통합 오버 헤드가 작기 때문에 어쩌면 그 중 하나가 이미 응용 프로그램에서 사용되는,이 프레임 워크는 좋아하는 것 ;
  2. 룩앤필 : 원하는 것을 선택하십시오.

JSP에서 입력 필드는 동일하게 유지되지만 날짜 필드를 클릭/입력하면 팝업이 나타납니다.

4

응용 프로그램 아키텍처에 따라 다음 방법 중 하나를 선택할 수 있습니다

1) 예를 들어, '날짜 선택기'JSP 태그)를 작성하는 서버 측 접근 방식 (즉, struts2 프레임 워크는 날짜 선택기 JSP 태그가 : http://code.google.com/p/struts2-jquery/wiki/DatePickerTag

2) 날짜 선택기를 표시하는 자바 스크립트 위젯을 사용하여 클라이언트 측 접근 방식() 많은 JS 밖에 위젯 당신은 당신이 원하는 설정 기능의 복잡성에 따라 하나를 선택할 수 있습니다. (jquery 플러그인, dojo 모두 datepickers를 제공합니다)

이 선택 사항을 선택할 때 전체 애플리케이션 아키텍처를 고려하면 일반적으로 모든 웹 페이지에 영향을 미칩니다 (UI에서 더 많은 위젯을 사용해야 할 필요성을 발견 할 때).)

+0

나는 googled했다. 하지만 나는 좋은 데이트 피커를 찾지 못했습니다. 가능한 경우 링크를 제공해주십시오. – adesh

+2

Adesh, dojo/dijit datepicker ( ) http://archive.dojotoolkit.org/nightly/dojotoolkit/dijit/tests/form/test_DateTextBox.html 다음과 같이 jquery UI 기반의 datepicker를 선택할 수도 있습니다. http://jqueryui.com/demos/datepicker/ 개인적으로 응용 프로그램에서 dojo datepicker를 성공적으로 사용했습니다. 위와 같은 위젯을 선택할 때 응용 프로그램에서 중요한 경우 액세스 가능성 (키보드, 스크린 리더) 등을 명심하십시오. 또한 dojo, jquery UI 또는 extjs와 같이 전문적으로 수행되는 daterpickers는 일반적으로 시각적 디자인에 따라 테마화할 수 있습니다. –

+0

소스 코드를 제게 제공해 주시겠습니까? 나는 데드 라인이 가까이있다. 그리고 내 프로젝트의 많은 것들이 남았습니다. 나는 최종 일 Engg 학생입니다. 같은 datepicker를 구현 했으므로 동일한 소스 코드를 사용하고 있다고 말했습니까? 제발 나와 공유해주세요. – adesh

-1
add in head javascript code 
<head> 
<script type="text/javascript" lnaguage="javascript"> 
$(function() 
    { 
    $("#datepicker").datepicker(
    { 
    showOn:"both", 
    buttonImage:"image.jpg", 
    dateFormat:"yy-mm-dd", 
    buttonImageOnly:false, 
    minDate:+0, //you do not want to show previous date. 
    maxDate:+0 // you do not want to show next day. 
    }); 
    }); 
</script> 
</head> 
<body> 
<input type="text" name="calendar" id="datepicker"> 
</body> 
관련 문제