[ASP.NET] CalendarExtender 텍스트박스 클릭 시 달력 노출

텍스트박스를 마우스로 클릭 시 달력이 노출되도록 해보자

날짜를 입력할 수 있는 input 박스에서 단순히 숫자 입력이 아닌,

실제 달력이 노출되고 해당 날짜 클릭 시 그 날짜 데이터가 입력되도록 해보자.

<script language="javascript" type="text/javascript" src="/Include/js/Carlender.js"></script>
 
<asp:TextBox ID="txt_SDate" runat="server" MaxLength = "10" Width="80px"></asp:TextBox>
<ajaxtoolkit:CalendarExtender ID="ceSDate" runat="server" Format="yyyy-MM-dd" TargetControlID="txt_SDate" Enabled="True">
</ajaxtoolkit:CalendarExtender>
~
<asp:TextBox ID="txt_EDate" runat="server" MaxLength = "10" Width="80px"></asp:TextBox>
<ajaxtoolkit:CalendarExtender ID="ceEDate" runat="server" Format="yyyy-MM-dd" TargetControlID="txt_EDate" Enabled="True">
</ajaxtoolkit:CalendarExtender>

위의 코드는 해당 텍스트박스 클릭 시 아래와 같은 달력이 노출된다.

달력에서 특정 날짜의 숫자를 클릭하면 그 날짜의 데이터가 텍스트박스에 입력된다.

날짜 선택 후 달력에 변화가 없다. 즉, 달력이 계속해서 노출되는 상태이다.

OnClientDateSelectionChanged 속성을 이용해 날짜 데이터 선택 후 달력이 자동으로 닫히도록 해보자.

<script>
        // 달력 날짜 선택 시 닫힘
        function fn_DateSelectionChanged(sender, args) {
            $find('ceSDate').hide();
        }
</script>
 
<ajaxtoolkit:CalendarExtender ID="ceSDate" runat="server" Format="yyyy-MM-dd" TargetControlID="txt_SDate_Score" Enabled="True" OnClientDateSelectionChanged="fn_DateSelectionChanged">