(1) /Site.master 페이지에 jQuery와 jQuery UI 자바스크립트 코드를 삽입합니다.
<%@ Master Language="C#" AutoEventWireup="true" CodeBehind="Site.master.cs" Inherits="MemoEngine.Site" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<link href="Content/bootstrap.min.css" rel="stylesheet" />
<link href="Content/bootstrap-theme.min.css" rel="stylesheet" />
<script src="<%= ResolveUrl("~/Scripts/jquery-2.1.3.min.js") %>"></script>
<script src="<%= ResolveUrl("~/Scripts/bootstrap.min.js") %>"></script>
<script src="<%= ResolveUrl("~/Scripts/jquery-ui-1.11.2.min.js") %>"></script>
<asp:ContentPlaceHolder ID="HeaderContent" runat="server">
</asp:ContentPlaceHolder>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ContentPlaceHolder ID="MainContent" runat="server">
</asp:ContentPlaceHolder>
</div>
<asp:ContentPlaceHolder ID="FooterContent" runat="server">
</asp:ContentPlaceHolder>
</form>
</body>
</html>
(2) /Tests/FrmMasterPageTest.aspx 페이지에 아래와 같이 jQuery UI 관련 스크립트를 추가하고 datepicker-ko.js 한글 언어팩(?)을 검색 엔진을 통해서 검색 후 github를 통해서 다운로드 받습니다. 이때 아래 코드처럼, ASP.NET 서버 컨트롤 사용시 서버 컨트롤의 ClientID 속성을 통해서 실행되었을 때의 id 값을 읽어와야 정상적으로 실행됨을 알 수 있습니다.
- jQuery UI datepicker 한글 언어팩 다운로드:
<%@ Page Title="" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="FrmMaterPageTest.aspx.cs" Inherits="MemoEngine.Tests.FrmMaterPageTest" %>
<asp:Content ID="Content1" ContentPlaceHolderID="HeaderContent" runat="server">
<link href="../Content/themes/base/all.css" rel="stylesheet" />
<%--<link href="../Content/themes/base/datepicker.css" rel="stylesheet" />--%>
<script src="../Scripts/jQueryUI/datepicker-ko.js"></script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
날짜선택기: <input type="text" name="txtDate1" id="txtDate1" value="" />
<script>
$(function () {
$('#txtDate1').datepicker();
});
</script>
<hr />
만약, 서버 컨트롤을 사용한다면?
<asp:TextBox ID="txtDate2" runat="server"></asp:TextBox>
<script>
$(function () {
$('#<%= txtDate2.ClientID %>').datepicker();
});
</script>
</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="FooterContent" runat="server">
</asp:Content>