다음을 통해 공유

연습: 클라이언트 스크립트를 사용하여 날짜 전역화

  • 아티클

업데이트: 2007년 11월

이 연습에서는 ECMAScript(JavaScript)를 사용하여 일, 월 및 기타 날짜 관련 값을 전역화된 형식으로 표시합니다. ASP.NET의 AJAX 기능은 ScriptManager 컨트롤의 설정을 기반으로 클라이언트 전역화 지원을 제공합니다. 이러한 전역화 설정이 웹 응용 프로그램에 적용된 후에는 클라이언트 스크립트를 사용하여 문화권 값을 기반으로 JavaScript Date 또는 Number 개체의 형식을 지정할 수 있습니다. 이 경우 서버에 대한 포스트백이 필요하지 않습니다.

클라이언트 스크립트에 사용되는 문화권 값은 사용자의 브라우저 설정으로 제공되는 기본 문화권 설정을 기반으로 합니다. 응용 프로그램에서 서버 설정이나 서버 코드를 사용하여 특정 문화권 값으로 해당 값을 설정할 수도 있습니다.

문화권 값은 특정 문화권(로캘)에 대한 정보를 제공합니다. 문화권 값은 언어를 나타내는 두 문자와 국가 또는 지역을 나타내는 두 문자의 조합입니다. es-MX(스페인어 멕시코), es-CO(스페인어 콜롬비아), fr-CA(프랑스어 캐나다) 등을 예로 들 수 있습니다.

ASP.NET AJAX Date 확장은 localeFormat 메서드를 제공하여 JavaScript Date 개체에 기능을 추가합니다. 이 메서드를 사용하면 브라우저 언어 설정, 서버 설정 또는 서버 코드를 기반으로 Date 개체의 형식을 지정할 수 있습니다. 이러한 설정은 서버 문화권 값에 영향을 주며 서버에서는 문화권 값을 해석하여 Sys.CultureInfo.CurrentCulture 속성에 의해 노출되는 클라이언트 개체를 생성합니다. 이 개체는 날짜 형식 지정에 사용됩니다.

문화권 및 로캘에 대한 자세한 내용은 ASP.NET 전역화 및 지역화 및 CultureInfo 클래스 개요를 참조하십시오.

사전 요구 사항

고유한 개발 환경에서 절차를 구현하려면 다음이 필요합니다.

  • Microsoft Visual Studio 2005 또는 Microsoft Visual Web Developer Express Edition

  • AJAX 사용 ASP.NET 웹 사이트

브라우저 설정을 기반으로 날짜 전역화

먼저 브라우저의 언어 기본 설정을 사용하여 날짜의 형식 지정 방법을 설정합니다.

브라우저 언어 기본 설정을 기반으로 날짜를 전역화하려면

  1. 모든 새 인스턴스에 새 로캘 설정이 사용되도록 열려 있는 Microsoft Internet Explorer 또는 기본 브라우저의 모든 인스턴스를 닫습니다.

  2. Internet Explorer의 새 인스턴스를 엽니다.

  3. 도구 메뉴에서 인터넷 옵션을 클릭하고 일반 탭을 클릭한 다음 언어를 클릭합니다.

  4. 언어 기본 설정을 es-MX(스페인어 멕시코)로 설정하고 목록에서 다른 모든 로캘을 제거합니다.

    참고:

    다른 브라우저를 사용하는 경우 해당 브라우저에서 이와 동일한 언어 설정을 지정하십시오.

  5. 브라우저를 닫습니다.

  6. Visual Studio에서 ASP.NET AJAX 사용 웹 페이지를 만들거나 열고 디자인 뷰로 전환합니다.

  7. ScriptManager 컨트롤을 선택하고 해당 EnableScriptGlobalization 속성을 true로 설정합니다.

    참고:

    페이지에 ScriptManager 컨트롤이 포함되어 있지 않은 경우 도구 상자의 AJAX 확장 탭에서 컨트롤을 추가하십시오.

  8. 도구 상자의 AJAX 확장 탭에서 UpdatePanel 컨트롤을 두 번 클릭하여 페이지에 업데이트 패널을 추가합니다.

  9. UpdatePanel 컨트롤의 ChildrenAsTriggers 속성을 false로 설정합니다.

  10. UpdatePanel 컨트롤의 UpdateMode 속성을 Conditional로 설정합니다.

  11. UpdatePanel 컨트롤 내부를 클릭하고 도구 상자의 표준 탭에서 Button 컨트롤 및 Label 컨트롤을 UpdatePanel 컨트롤에 추가합니다.

    참고:

    Label 및 Button 컨트롤이 UpdatePanel 컨트롤 내부에 추가되는지 확인하십시오.

  12. 단추의 ID 속성이 Button1로 설정되어 있는지 확인하고 해당 Text 속성을 Display Date로 설정합니다.

  13. 레이블의 ID 속성이 Label1로 설정되어 있는지 확인합니다.

  14. 소스 뷰로 전환합니다.

  15. 페이지 아래쪽에서 script 요소를 만들고 여기에 다음 클라이언트 스크립트를 추가합니다.

    Sys.UI.DomEvent.addHandler($get("Button1"), "click", formatDate);
function formatDate() {
  var d = new Date();
  try {
    $get('Label1').innerHTML = d.localeFormat("dddd, dd MMMM yyyy HH:mm:ss");
  }
  catch(e) {
    alert("Error:" + e.message);
  }
}

    Sys.UI.DomEvent.addHandler($get("Button1"), "click", formatDate);
function formatDate() {
  var d = new Date();
  try {
    $get('Label1').innerHTML = d.localeFormat("dddd, dd MMMM yyyy HH:mm:ss");
  }
  catch(e) {
    alert("Error:" + e.message);
  }
}

    이 코드는 Button1이라는 단추에 click 처리기를 추가합니다. 이 코드는 새 Date 개체를 만들고 Label1이라는 요소에 형식이 지정된 날짜를 표시하는 formatDate 함수를 호출합니다. 날짜의 형식은 Date 개체에 대한 Microsoft AJAX 라이브러리 확장의 일부인 localeFormat 함수를 사용하여 지정됩니다.

  16. 웹 사이트의 Web.config 파일에서 다음 globalization 요소를 system.web 섹션에 포함합니다.

    <globalization culture="auto" />

    "auto" 설정은 사용자의 언어 기본 설정 목록을 제공하는 브라우저 요청의 ACCEPT-LANGUAGE 헤더가 문화권 값을 설정하는 데 사용되도록 지정합니다.

  17. 변경 내용을 저장한 다음 언어 설정을 변경한 브라우저에서 웹 페이지를 실행합니다.

  18. Display Date 단추를 클릭하여 브라우저 언어 설정을 기반으로 전역화된 날짜 값을 확인합니다.

    다음 예제에서는 브라우저 언어 기본 설정을 기반으로 날짜를 전역화하는 클라이언트 스크립트가 있는 완전한 ASP.NET 웹 페이지를 보여 줍니다.

    <%@ Page Language="VB" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head >
    <title>Globalization Example</title>
</head>
<body>
    <form id="form1" >
        <asp:ScriptManager ID="ScriptManager1"  EnableScriptGlobalization="true"/>
        <asp:UpdatePanel ID="UpdatePanel1"  ChildrenAsTriggers="False" 
                         UpdateMode="Conditional">
            <ContentTemplate>
                   <asp:Panel ID="Panel1"  GroupingText="Update Panel">
                   <asp:Button ID="Button1"  Text="Display Date" />
           <br />
                   <asp:Label ID="Label1" ></asp:Label>
                   </asp:Panel>
            </ContentTemplate>
        </asp:UpdatePanel>
    </form>
</body>
</html>
<script type="text/javascript">
    Sys.UI.DomEvent.addHandler($get("Button1"), "click", formatDate);
    function formatDate() {
      var d = new Date();
      try {
        $get('Label1').innerHTML = d.localeFormat("dddd, dd MMMM yyyy HH:mm:ss");
      }
      catch(e) {
        alert("Error:" + e.message);
      }
    }
</script>

    <%@ Page Language="C#" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head >
    <title>Globalization Example</title>
</head>
<body>
    <form id="form1" >
        <asp:ScriptManager ID="ScriptManager1"  EnableScriptGlobalization="true"/>
        <asp:UpdatePanel ID="UpdatePanel1"  ChildrenAsTriggers="False" 
                         UpdateMode="Conditional">
            <ContentTemplate>
                   <asp:Panel ID="Panel1"  GroupingText="Update Panel">
                   <asp:Button ID="Button1"  Text="Display Date" />
           <br />
                   <asp:Label ID="Label1" ></asp:Label>
                   </asp:Panel>
            </ContentTemplate>
        </asp:UpdatePanel>
    </form>
</body>
</html>
<script type="text/javascript">
    Sys.UI.DomEvent.addHandler($get("Button1"), "click", formatDate);
    function formatDate() {
      var d = new Date();
      try {
        $get('Label1').innerHTML = d.localeFormat("dddd, dd MMMM yyyy HH:mm:ss");
      }
      catch(e) {
        alert("Error:" + e.message);
      }
    }
</script>

  19. 작업이 끝나면 브라우저에서 언어 설정을 다시 설정합니다.

구성 설정을 기반으로 날짜 전역화

여러 페이지에서 형식이 지정된 날짜를 표시하려면 웹 사이트의 구성 파일에서 문화권을 설정합니다. 이렇게 하면 형식 설정이 모든 페이지의 날짜에 적용됩니다.

구성 파일 설정을 기반으로 날짜를 전역화하려면

  1. 응용 프로그램의 Web.config 파일에서 system.web 섹션의 globalization 요소를 다음과 같이 변경합니다.

    <globalization culture="fr-CA" />

    이 설정은 지정된 브라우저 언어 설정에 상관없이 문화권 값을 "fr-CA"(프랑스어 캐나다)로 설정합니다.

  2. 변경 내용을 저장한 다음 브라우저에서 웹 페이지를 실행합니다.

  3. Display Date 단추를 클릭하여 전역화된 날짜 값을 확인합니다.

    이제 날짜 형식은 브라우저 언어 기본 설정 대신 구성 파일의 문화권 특성을 기반으로 합니다.

    다음 예제에서는 구성 파일 설정을 기반으로 날짜를 전역화하는 클라이언트 스크립트가 있는 완전한 ASP.NET 웹 페이지를 보여 줍니다.

    <%@ Page Language="VB" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head >
    <title>Globalization Example</title>
</head>
<body>
    <form id="form1" >
        <asp:ScriptManager ID="ScriptManager1"  EnableScriptGlobalization="true"/>
        <asp:UpdatePanel ID="UpdatePanel1"  ChildrenAsTriggers="False" 
             UpdateMode="Conditional">
            <ContentTemplate>
                   <asp:Panel ID="Panel1"  GroupingText="Update Panel">
                   <asp:Button ID="Button1"  Text="Display Date" />
           <br />
                   <asp:Label ID="Label1" ></asp:Label>
                   </asp:Panel>
            </ContentTemplate>
        </asp:UpdatePanel>
    </form>
</body>
</html>

<script type="text/javascript">
    Sys.UI.DomEvent.addHandler($get("Button1"), "click", formatDate);
    function formatDate() {
      var d = new Date();
      try {
        $get('Label1').innerHTML = d.localeFormat("dddd, dd MMMM yyyy HH:mm:ss");
      }
      catch(e) {
        alert("Error:" + e.message);
      }
    }
</script>

    <%@ Page Language="C#" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head >
    <title>Globalization Example</title>
</head>
<body>
    <form id="form1" >
        <asp:ScriptManager ID="ScriptManager1"  EnableScriptGlobalization="true"/>
        <asp:UpdatePanel ID="UpdatePanel1"  ChildrenAsTriggers="False" 
                         UpdateMode="Conditional">
            <ContentTemplate>
                   <asp:Panel ID="Panel1"  GroupingText="Update Panel">
                   <asp:Button ID="Button1"  Text="Display Date" />
           <br />
                   <asp:Label ID="Label1" ></asp:Label>
                   </asp:Panel>
            </ContentTemplate>
        </asp:UpdatePanel>
    </form>
</body>
</html>

<script type="text/javascript">
    Sys.UI.DomEvent.addHandler($get("Button1"), "click", formatDate);
    function formatDate() {
      var d = new Date();
      try {
        $get('Label1').innerHTML = d.localeFormat("dddd, dd MMMM yyyy HH:mm:ss");
      }
      catch(e) {
        alert("Error:" + e.message);
      }
    }
</script>

페이지 설정을 기반으로 날짜 전역화

개별 페이지에 대한 문화권을 설정하려면 @ Page 지시문의 Culture 특성을 사용합니다. @ Page 지시문의 Culture 특성은 구성 파일의 설정 및 브라우저의 언어 설정보다 우선합니다.

페이지 설정을 기반으로 날짜를 전역화하려면

  1. 작업 중인 페이지에서 다음 예제와 같이 @ Page 지시문을 수정하여 문화권 값을 "de-DE"(독일어 독일)로 설정합니다.

    <%@ Page Language="C#" AutoEventWireup="true" Culture="de-DE" %>

  2. 변경 내용을 저장한 다음 브라우저에서 웹 페이지를 실행합니다.

  3. Display Date 단추를 클릭하여 전역화된 날짜 값을 확인합니다.

    이제 날짜 형식은 @ Page 지시문의 Culture 특성을 기반으로 합니다.

    다음 예제에서는 페이지 설정을 기반으로 날짜를 전역화하는 클라이언트 스크립트가 있는 완전한 ASP.NET 웹 페이지를 보여 줍니다.

    <%@ Page Language="VB" Culture="de-DE" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head >
    <title>Globalization Example</title>
</head>
<body>
    <form id="form1" >
        <asp:ScriptManager ID="ScriptManager1"  EnableScriptGlobalization="true"/>
        <asp:UpdatePanel ID="UpdatePanel1"  ChildrenAsTriggers="False" 
             UpdateMode="Conditional">
            <ContentTemplate>
                   <asp:Panel ID="Panel1"  GroupingText="Update Panel">
                   <asp:Button ID="Button1"  Text="Display Date" />
           <br />
                   <asp:Label ID="Label1" ></asp:Label>
                   </asp:Panel>
            </ContentTemplate>
        </asp:UpdatePanel>
    </form>
</body>
</html>

<script type="text/javascript">
    Sys.UI.DomEvent.addHandler($get("Button1"), "click", formatDate);
    function formatDate() {
      var d = new Date();
      try {
        $get('Label1').innerHTML = d.localeFormat("dddd, dd MMMM yyyy HH:mm:ss");
      }
      catch(e) {
        alert("Error:" + e.message);
      }
    }
</script>

    <%@ Page Language="C#" Culture="de-DE" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head >
    <title>Globalization Example</title>
</head>
<body>
    <form id="form1" >
        <asp:ScriptManager ID="ScriptManager1"  EnableScriptGlobalization="true"/>
        <asp:UpdatePanel ID="UpdatePanel1"  ChildrenAsTriggers="False" 
             UpdateMode="Conditional">
            <ContentTemplate>
                   <asp:Panel ID="Panel1"  GroupingText="Update Panel">
                   <asp:Button ID="Button1"  Text="Display Date" />
           <br />
                   <asp:Label ID="Label1" ></asp:Label>
                   </asp:Panel>
            </ContentTemplate>
        </asp:UpdatePanel>
    </form>
</body>
</html>

<script type="text/javascript">
    Sys.UI.DomEvent.addHandler($get("Button1"), "click", formatDate);
    function formatDate() {
      var d = new Date();
      try {
        $get('Label1').innerHTML = d.localeFormat("dddd, dd MMMM yyyy HH:mm:ss");
      }
      catch(e) {
        alert("Error:" + e.message);
      }
    }
</script>

프로그래밍 방식으로 날짜 전역화

페이지에 대한 문화권 값을 프로그래밍 방식으로 설정하려면 서버 코드에서 페이지의 InitializeCulture 메서드를 재정의합니다. InitializeCulture 메서드는 @ Page 지시문, 구성 파일 및 브라우저의 문화권 설정보다 우선합니다.

프로그래밍 방식으로 날짜를 전역화하려면

  1. 페이지에 다음 메서드를 추가합니다.

      Protected Overrides Sub InitializeCulture()
        Me.Culture = "it-IT"
    End Sub

    protected override void InitializeCulture()
{
    this.Culture = "it-IT";
}

    이 코드는 기본 Page 클래스의 InitializeCulture 메서드를 재정의하고 문화권 값을 "it-IT"(이탈리아어 이탈리아)로 설정합니다. 이는 페이지 수명 주기에서 문화권을 프로그래밍 방식으로 변경하기에 적합한 시점입니다.

  2. 변경 내용을 저장한 다음 브라우저에서 웹 페이지를 실행합니다.

  3. Display Date 단추를 클릭하여 전역화된 날짜를 확인합니다.

    이제 날짜 값의 형식은 서버 코드를 기반으로 지정됩니다.

    다음 예제에서는 프로그래밍 방식으로 날짜를 전역화하는 클라이언트 스크립트가 있는 완전한 ASP.NET 웹 페이지를 보여 줍니다.

    <%@ Page Language="VB" Culture="de-DE" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<script >
    Protected Overrides Sub InitializeCulture()
        Me.Culture = "it-IT"
    End Sub
</script>

<html xmlns="http://www.w3.org/1999/xhtml">

<head >
    <title>Globalization Example</title>
</head>
<body>
    <form id="form1" >
        <asp:ScriptManager ID="ScriptManager1"  EnableScriptGlobalization="true"/>
        <asp:UpdatePanel ID="UpdatePanel1"  ChildrenAsTriggers="False" 
             UpdateMode="Conditional">
            <ContentTemplate>
                   <asp:Panel ID="Panel1"  GroupingText="Update Panel">
                   <asp:Button ID="Button1"  Text="Display Date" />
           <br />
                   <asp:Label ID="Label1" ></asp:Label>
                   </asp:Panel>
            </ContentTemplate>
        </asp:UpdatePanel>
    </form>
</body>
</html>

<script type="text/javascript">
    Sys.UI.DomEvent.addHandler($get("Button1"), "click", formatDate);
    function formatDate() {
      var d = new Date();
      try {
        $get('Label1').innerHTML = d.localeFormat("dddd, dd MMMM yyyy HH:mm:ss");
      }
      catch(e) {
        alert("Error:" + e.message);
      }
    }
</script>

    <%@ Page Language="C#" Culture="de-DE" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<script >
        protected override void InitializeCulture()
        {
            this.Culture = "it-IT";
        }
</script>

<html xmlns="http://www.w3.org/1999/xhtml">

<head >
    <title>Globalization Example</title>
</head>
<body>
    <form id="form1" >
        <asp:ScriptManager ID="ScriptManager1"  EnableScriptGlobalization="true"/>
        <asp:UpdatePanel ID="UpdatePanel1"  ChildrenAsTriggers="False" 
             UpdateMode="Conditional">
            <ContentTemplate>
                   <asp:Panel ID="Panel1"  GroupingText="Update Panel">
                   <asp:Button ID="Button1"  Text="Display Date" />
           <br />
                   <asp:Label ID="Label1" ></asp:Label>
                   </asp:Panel>
            </ContentTemplate>
        </asp:UpdatePanel>
    </form>
</body>
</html>

<script type="text/javascript">
    Sys.UI.DomEvent.addHandler($get("Button1"), "click", formatDate);
    function formatDate() {
      var d = new Date();
      try {
        $get('Label1').innerHTML = d.localeFormat("dddd, dd MMMM yyyy HH:mm:ss");
      }
      catch(e) {
        alert("Error:" + e.message);
      }
    }
</script>

형식 지정 패턴

localeFormat 메서드에는 다양한 형식 지정 패턴을 사용할 수 있습니다. 날짜 및 시간 문자열 형식에 대한 자세한 내용은 Sys.CultureInfo 클래스를 참조하십시오.

참고 항목

작업

방법: ASP.NET 웹 페이지 전역화를 위한 Culture 및 UI Culture 설정

기타 리소스

ASP.NET 전역화 및 지역화