AJAX 달력 컨트롤

이런 형식 많이 보셨죠? 텍스트 박스를 클릭하면 날짜형식 포맷이 뜨고

옆에 달력버튼을 클릭하면 달력이 떠서 날짜를 선택할 수 있습니다.

그리고 날짜를 클릭하게 되면 이렇게 자동으로 날짜가 들어오지요.

자, 이제 소스를 보겠습니다.

--------------------------------------------------------------------------------

<asp:Label ID="Label3" runat="server" Text="날짜"></asp:Label>
<asp:TextBox ID="txtEdate" runat="server" Width="70px"></asp:TextBox>
<asp:Button ID="ibtnTxtEdate" runat="server" Text="달력" />

일단 레이아웃을 이렇게 넣어야 겠지요.
Label로 "날짜"를 찍어주고, 옆에 텍스트박스 붙여주고 그리고 "달력"이라는 Text를 가진 버튼까지 완료입니다.

<cc1:CalendarExtender ID="CalendarExtender2" runat="server" Format="yyyy-MM-dd" PopupButtonID="ibtnTxtEdate" TargetControlID="txtEdate"></cc1:CalendarExtender>

음.. 제일 중요(?)한 부분입니다. 사실 저 아래에 두 이벤트는 있으면 좋지만 없어도 되거든요.
이 부분이 바로 달력에서 날짜를 클릭하면 yyyy-MM-dd형식으로 텍스트 박스에 뿌려주는 부분입니다.

<cc1:MaskedEditExtender ID="MaskedEditExtender2" runat="server" AcceptNegative="Left" ClearTextOnInvalid="true" DisplayMoney="Left" ErrorTooltipEnabled="True" Mask="9999/99/99" MaskType="Date" MessageValidatorTip="true" OnFocusCssClass="MaskedEditFocus" OnInvalidCssClass="MaskedEditError" TargetControlID="txtEdate"></cc1:MaskedEditExtender>

이 부분은 텍스트박스를 클릭했을 때 날짜 형식으로 보이게 합니다.
MaskType이 "Date"로 되어있는 게 보이시죠?

<cc1:MaskedEditValidator ID="MaskedEditValidator2" runat="server" ontrolExtender="MaskedEditExtender2" ControlToValidate="txtEdate" Display="Dynamic" EmptyValueMessage="날짜를 입력해주세요." ErrorMessage="MaskedEditExtender2" InvalidValueMessage="유효하지 않은 날짜입니다." MaximumValue="2100-01-01" MaximumValueMessage="날짜는 2100년 보다 작아야합니다." MinimumValue="1900-01-01" MinimumValueMessage="날짜는 1900년 보다 커야합니다." ValidationGroup="MKE"></cc1:MaskedEditValidator>

이 부분은 날짜의 범위를 정해주는 곳이구요.

아직 걸음마 수준이네요. css도 잘 몰라서 배우는 중입니다.
다음부턴 더 예쁘게 꾸며서 블로깅하도록 노력해보겠습니다. (하지만 시간이 좀 걸리겠네요..)