JSCalendar를 활용한 일자 조회

 

JSCalendar 1.0을 기반으로 하여 생년월일이나 일자등을 UI에서 선택할 수 있도록 해주는 Javascript입니다.
다운 사이트는 dynarch이며 jscalendar-1.0다운 받아서 카피한 다음에 필요한 js와 css를 삽입하여 원하는 화면을 구성할 수 있습니다.

1. 화면 UI

2. 사용 방법

<!-- main calendar program -->

<script type="text/javascript" src="/calendar.js"></script>

<!-- language for the calendar -->

<script type="text/javascript" src="/lang/calendar-ko.js"></script>

<!-- the following script defines the Calendar.setup helper function, 

which makes adding a calendar a matter of 1 or 2 lines of code. -->

<script type="text/javascript" src="/calendar-setup.js"></script>

<!-- calendar stylesheet -->

<link rel="stylesheet" type="text/css" media="all" 

href="/calendar-white.css" title="white" />

.........

 <td><input type="text" name="dob" id="dob" readonly="1" /></td>

 <td><img src="img.gif" id="f_trigger_c" 

style="cursor: pointer; border: 1px solid red;" title="Date selector"

      onmouseover="this.style.background='red';"

 onmouseout="this.style.background=''" /></td>

<script type="text/javascript">

    Calendar.setup({

        inputField     :    "dob",     // id of the input field

        ifFormat       :    "%Y-%m-%d", // format of the input field

        button         :    "f_trigger_c",// trigger for the calendar(button ID)

        align          :    "Tl",       // alignment (defaults to "Bl")

        singleClick    :    true

    });

</script>