Copyright © 2003-2009
By Suthep Sangvirotjanaphat
  Mobile: 089-967-2200, 081-915-7816
Phone: 0-2992-4877   Fax: 0-2992-4878
Fast Contact Us

GreatFriends.Biz Community

Custom Search
 MESSAGE #80839 (อ่าน 6,355 ครั้ง)

บทความ - Trick ในการทำให้คอนโทรลปฏิทิน CalendarExtender ใน AJAX Control Toolkit รองรับภาษาไทย

1.gif

         จากคำถามที่ถามกันในเว็บบอร์ดแว้บๆ ที่ผ่านมาได้พักนึง และคำถามจากน้องใน GF เกี่ยวกับเรื่องปัญหาของการแสดงผลภาษาไทยกับคอนโทรล CalendarExtender ใน A JAX C ontrol T oolkit หรือ ACT ซึ่งมีปัญหากับปีที่มันแสดงเป็น ค.ศ. แทนที่จะเป็น พ.ศ. และคำพูด Today: ซึ่งควรจะเป็นภาษาไทยที่แสดงวันล่าสุดที่ด้านล่างของปฏิทินดังภาพด้านซ้าย

          จากภาพจะเห็นว่ามีจุดที่ควรปรับปรุงอยู่ 2 จุดคือ ที่ 1 ซึ่งควรจะถูกแก้ไขให้เป็น “พฤษภาคม 2551” และจุดที่ 2 ควรจะเป็น “วันนี้: 11 พฤษภาคม 2551” สำหรับวิธีการปรับปรุง ผมเข้าใจว่าคงจะมีหลายวิธีนะครับ แต่ผมขอเสนอวิธีดังนี้ครับ

          เนื่องจากการปรับปรุงทั้งสองจุดจำเป็นต้องเข้าไปแก้ไขใน Source code ของโปรเจค AjaxControlToolkit ซึ่งสามารถดาวน์โหลดได้จาก http://www.asp.net/AJAX/downloads/ หลังจากดาวน์โหลด และ unzip แล้วจะได้โปรเจคดังภาพด้านล่าง

2.gif

          ในโซลูชั่นที่ต้องการใช้ ACT ให้เราทำการ Add Existing Project ไปที่ไฟล์ AjaxControlToolkit.csproj ดังภาพด้านล่างซ้าย จะได้โปรเจค AjaxControlToolkit และโปรเจคเว็บที่เราทำงานอยู่ดังภาพด้านล่างขวา

3a.gif

3b.gif

         หลังจากนั้นให้ทำการ Add Reference จากโปรเจคเว็บไซต์ไปที่โปรเจค AjaxControlToolkit เพื่อที่จะทดสอบคอนโทรล CalendarExtender ผมได้เพิ่มคอนโทรล ScriptManager, TextBox1 และ CalenderExtender1 ที่จะทำงานคู่กับ TextBox1 ในเว็บฟอร์ม Default.aspx ดังภาพด้านล่าง

4.gif

          จากภาพจะเห็นว่าคอนโทรล CalendarExtender1 นั้นได้มีการกำหนดให้ทำงานคู่กับคอนโทรล TextBox1 ผ่านพร็อพเพอตี้ TargetControlID และคอนโทรล ScriptManager ได้เปิดการรองรับหลายภาษาผ่านพร็อพเพอตี้ EnableScriptGlobalization ที่กำหนดให้มีค่าเป็น true
         เพื่อที่จะให้ ASP.NET รันด้วย culture ที่เป็นภาษาไทย หรือ “th-TH” เราจะมีการเพิ่มอีเลเมนต์ globalization ใต้เซคชั่น system.web ซึ่งมีการกำหนดแอตทริบิวต์ culture และ uiCulture ให้เป็น “th-TH” ดังภาพด้านล่าง

5.gif

การแก้ไขคำว่า “Today” ให้เป็น “ วันนี้” ผ่านรีซอร์สไฟล์ หรือไฟล์ .resx

6.gif

            คำว่า “Today” ที่เห็นอยู่ในด้านล่างของปฏิทินนั้นได้ถูกอ่านขึ้นมาจากรีซอร์สไฟล์ที่อยู่ใต้โฟลเดอร์ ScriptResources ของโปรเจค AjaxControlToolkit ซึ่งในโฟลเดอร์นี้จะมีไฟล์รีซอร์สของหลากหลายภาษาอยู่ดังภาพด้านซ้าย

            ในโฟลเดอร์นี้จะพบว่ารีซอร์สไฟล์สำหรับภาษาไทยไม่มีอยู่ ดังนั้นเราต้องสร้างมันขึ้นมาใหม่ง่ายๆ โดยการ Copy ไฟล์ ScriptResources.resx ซึ่งเป็นรีซอร์สไฟล์สำหรับภาษาอังกฤษ แล้ว Paste ลงไปที่โฟลเดอร์ ScriptResources เดิม จากนั้นตั้งชื่อใหม่ให้เป็น ScriptResources.th-TH.resx เพื่อให้มันรองรับภาษาไทยดังภาพด้านล่าง

7a.gif

7b.gif

          หลังจากนั้นให้ดับเบิ้ลคลิกที่ไฟล์ ScriptResources.th-TH.resx ที่สร้างขึ้นใหม่ แล้วเข้าไปแก้ไข Value ของคีย์ Calendar_Today ให้เป็นคำว่า “วันนี้: {0}” ดังภาพด้านล่าง

8.gif

9.gif

       ให้ทำการ Save ไฟล์นี้ แล้วทำการ Build Solution และทำการเปิดไฟล์ Default.aspx ในเบราเซอร์จะพบว่าค่าว่า “Today” ได้ถูกเปลี่ยนเป็นคำว่า “วันนี้” ดังภาพด้านซ้าย

 

 

การแก้ไข Format ของวันนี้ และปี ค. ศ. ให้เป็น พ. ศ.

10.gif

          จากผลลัพทธ์ที่ได้หัวข้อที่ผ่านมา จะพบว่าเรายังพบปัญหาของ Format ของวันที่อยู่ คือ มี Comma หรือ “,” คั่นอยู่ระหว่างเดือนกับปี นอกจากนี้ยังมีปัญหาของปีที่ยังแสดงเป็น ค.ศ. อยู่ เพื่อแก้ปัญหานี้เราสามารถเข้าไปเปิดไฟล์ CalendarBehavior.js ที่อยู่ใต้โฟลเดอร์ Calendar ของโปรเจค AjaxControlToolkit เพื่อแก้ไขปัญหาทั้งสอง

 

         เมื่อเปิดไฟล์ CalendarBehavior.js แล้ว ให้เราเข้าไปแก้ไขบรรทัดที่ 1,000 โดยแก้ไขจากโค้ดเดิมตามภาพด้านล่าง

11.gif

                ให้เป็นดังนี้

12.gif

          จากภาพด้านบนจะเห็นว่า เรามีการตรวจสอบ Culture ว่ารันด้วย culture ภาษาไทย หรือ “th-TH” หรือไม่ผ่านไบรารี Sys.CultureInfo ของ Ajax Library หากใช่ ให้ทำการลบ Comma ออก และทำการบวกปีไปอีก 543 ปี เพื่อให้เป็นปี พ.ศ. ในทำนองเดียวกัน ให้เราไปที่บรรทัดที่ 1,068 และให้เปลี่ยนจากโค้ดเดิมด้านล่าง

13.gif

                ให้เป็นดังนี้

14.gif

15.gif

        หลังจากแก้ไขเสร็จแล้ว ให้ Build Solution อีกครั้ง แล้วเปิดไฟล์ Default.aspx ในเบราเซอร์ จะพบว่าทั้งปัญหาเรื่อง Comma และปัญหาเรื่อง พ.ศ. ได้ถูกแก้ไปแล้วดังภาพด้านซ้าย

 

คัดมาจากเว็บผมเองครับ www.aspnetthai.com


nas วันที่ส่ง: 11 พ.ค. 51 13:44 GMT+7
วันที่ปรับล่าสุด: 4 พ.ค. 52 09:36 GMT+7
REPLY #1 (80842)
เยี่ยมเลยครับ ขอบคุณที่ช่วยแก้ปัญหา ของ calendar control
 
 
ว่าคุณ nas ได้นอนบ้างรึยังค้าบบบบบบบบบบบบ 

ขยันจริง ๆ อิอิอิ



Nine (นาย) วันที่ส่ง: 11 พ.ค. 51 14:32 GMT+7
วันที่ปรับล่าสุด: 11 พ.ค. 51 14:32 GMT+7
REPLY #2 (80844)
สุดยอดจริง ๆ ครับ พี่ nas ผมจะได้ใช้ซักที หุ ๆ


เด็กปั้น วันที่ส่ง: 11 พ.ค. 51 14:59 GMT+7
วันที่ปรับล่าสุด: 11 พ.ค. 51 14:59 GMT+7
REPLY #3 (80845)

เยี่อมเลยครับ หุหุ จะเอาไปใช้บ้างเหมือนกัน

 
ขอบคุณครับ


Ixus วันที่ส่ง: 11 พ.ค. 51 15:25 GMT+7
วันที่ปรับล่าสุด: 11 พ.ค. 51 15:25 GMT+7
REPLY #4 (80853)
 : Wow...สุดยอดเลยครับพี่ nas 
        ขอบคุณจากใจน้องๆ เอ่ย! น้อยๆ ครับพี่ nas 
        สำหรับบทความ Trick การแก้ปัญหา CalendarExtender นี้ครับ. ( :
 
 


Volk1969 วันที่ส่ง: 11 พ.ค. 51 16:54 GMT+7
วันที่ปรับล่าสุด: 11 พ.ค. 51 16:54 GMT+7
REPLY #5 (80860)
  เป็นพระคุณ อย่าสูง ค่ะ  ยอดมากค่ะคุงพี่ 


wiwien วันที่ส่ง: 11 พ.ค. 51 22:28 GMT+7
วันที่ปรับล่าสุด: 11 พ.ค. 51 22:28 GMT+7
REPLY #6 (80862)
 เยี่ยมจริง ๆ


aspexp วันที่ส่ง: 11 พ.ค. 51 22:40 GMT+7
วันที่ปรับล่าสุด: 11 พ.ค. 51 22:40 GMT+7
REPLY #7 (80874)

 เยี่ยมจริงๆ ครับท่าน



nano วันที่ส่ง: 12 พ.ค. 51 08:23 GMT+7
วันที่ปรับล่าสุด: 12 พ.ค. 51 08:23 GMT+7
REPLY #8 (80875)
 ครับ


MR.L วันที่ส่ง: 12 พ.ค. 51 08:26 GMT+7
วันที่ปรับล่าสุด: 12 พ.ค. 51 08:26 GMT+7
REPLY #9 (80900)
  ขอบคุณครับสำหรับบทความดี ๆ แบบนี้


kop วันที่ส่ง: 12 พ.ค. 51 11:23 GMT+7
วันที่ปรับล่าสุด: 12 พ.ค. 51 11:23 GMT+7
REPLY #10 (80904)

แทงข้างหลังทะลุถึงหัวใจเลยพี่ คนต้องการเยอะมากเลย ฮ่าๆๆ
 5 ดาวเลยคับ


เต้คุง วันที่ส่ง: 12 พ.ค. 51 12:13 GMT+7
วันที่ปรับล่าสุด: 12 พ.ค. 51 12:13 GMT+7
REPLY #11 (80922)
แหล่มเลยครับพี่ nas


tonkung วันที่ส่ง: 12 พ.ค. 51 15:19 GMT+7
วันที่ปรับล่าสุด: 12 พ.ค. 51 15:19 GMT+7
REPLY #12 (80993)
เยี่ยมคับ กำลังต้องการใช้อยู่พอดี


p1000 วันที่ส่ง: 13 พ.ค. 51 09:51 GMT+7
วันที่ปรับล่าสุด: 13 พ.ค. 51 09:51 GMT+7
REPLY #13 (81027)

ขอบคุณมากครับ



zymethseven วันที่ส่ง: 13 พ.ค. 51 12:22 GMT+7
วันที่ปรับล่าสุด: 13 พ.ค. 51 12:22 GMT+7
REPLY #14 (81210)
ไม่ได้เข้าบอร์ดมานานมากๆ เข้ามาคราวนี้เจอบทความนี้ สุดยอดเลย ขอเอาไปใช้ด้วยคน ขอบคุณครับ


soccers_guy10 วันที่ส่ง: 14 พ.ค. 51 20:41 GMT+7
วันที่ปรับล่าสุด: 14 พ.ค. 51 20:41 GMT+7
REPLY #15 (81355)

ขอแจม ด้วยคนนะครับ คงไม่ว่ากันนะคับ คุณ nas

 
พอดีผมลองเล่น ๆ ดูแล้ว (ไม่รู้เป็นที่ผมทำไม่ถูกหรือป่าวก็ไม่รู้ 5555 )  ที่เจอก็คือ ถ้าเลือก ครั้งแรกแล้ว เช่น

16/05/2551 พอคลิกครั้งที่สอง แล้ว กลับโดดไปปีที่ไม่ถูกต้อง สำหรับคนที่เป็นแบบผม ลอง ปรับ
 
//line 948 

_performLayout : function() {

...

var gYear = visibleDate.getFullYear();

if(Sys.CultureInfo.CurrentCulture.name=="th-TH") {

    if(gYear == todaysDate.getFullYear()) gYear += 543;

}
 
จากนั้นก็เอา gYear ไป แทน  visibleDate.getFullYear()  
 
ก็ใช้ได้แล้วละครับ


uthai วันที่ส่ง: 16 พ.ค. 51 09:09 GMT+7
วันที่ปรับล่าสุด: 16 พ.ค. 51 09:09 GMT+7
REPLY #16 (81363)
 

_performLayout : function() {

/// <summmary>

/// Updates the various views of the calendar to match the current selected and visible dates

/// </summary>

var elt = this.get_element();

if (!elt) return;

if (!this.get_isInitialized()) return;

if (!this._isOpen) return;

var dtf = Sys.CultureInfo.CurrentCulture.dateTimeFormat;

var selectedDate = this.get_selectedDate();

var visibleDate = this._getEffectiveVisibleDate();

var todaysDate = this.get_todaysDate();

var gYear = visibleDate.getFullYear();

if(Sys.CultureInfo.CurrentCulture.name =="th-TH")

if(gYear == todaysDate.getFullYear())gYear += 543;

switch (this._mode) {

case "days":

var firstDayOfWeek = this._getFirstDayOfWeek();

var daysToBacktrack = visibleDate.getDay() - firstDayOfWeek;

if (daysToBacktrack <= 0)

daysToBacktrack += 7;

var startDate = new Date( gYear, visibleDate.getMonth(), visibleDate.getDate() - daysToBacktrack, this._hourOffsetForDst);

var currentDate = startDate;

for (var i = 0; i < 7; i++) {

var dayCell = this._daysTableHeaderRow.cells[i].firstChild;

if (dayCell.firstChild) {

dayCell.removeChild(dayCell.firstChild);

}

dayCell.appendChild(document.createTextNode(dtf.ShortestDayNames[(i + firstDayOfWeek) % 7]));

}

for (var week = 0; week < 6; week ++) {

var weekRow = this._daysBody.rows[week];

for (var dayOfWeek = 0; dayOfWeek < 7; dayOfWeek++) {

var dayCell = weekRow.cells[dayOfWeek].firstChild;

if (dayCell.firstChild) {

dayCell.removeChild(dayCell.firstChild);

}

dayCell.appendChild(document.createTextNode(currentDate.getDate()));

dayCell.title = currentDate.localeFormat("D");

dayCell.date = currentDate;

$common.removeCssClasses(dayCell.parentNode, [ "ajax__calendar_other", "ajax__calendar_active" ]);

Sys.UI.DomElement.addCssClass(dayCell.parentNode, this._getCssClass(dayCell.date, 'd'));

currentDate = new Date(gYear, currentDate.getMonth(), currentDate.getDate() + 1, this._hourOffsetForDst);

}

}

this._prevArrow.date = new Date(gYear, visibleDate.getMonth() - 1, 1, this._hourOffsetForDst);

this._nextArrow.date = new Date(gYear, visibleDate.getMonth() + 1, 1, this._hourOffsetForDst);

if (this._title.firstChild) {

this._title.removeChild(this._title.firstChild);

}

this._title.appendChild(document.createTextNode( visibleDate.localeFormat("MMMM ") + gYear ));

this._title.date = visibleDate;

break;

case "months":

for (var i = 0; i < this._monthsBody.rows.length; i++) {

var row = this._monthsBody.rows[i];

for (var j = 0; j < row.cells.length; j++) {

var cell = row.cells[j].firstChild;

cell.date = new Date(gYear, cell.month, 1, this._hourOffsetForDst);

cell.title = cell.date.localeFormat("Y");

$common.removeCssClasses(cell.parentNode, [ "ajax__calendar_other", "ajax__calendar_active" ]);

Sys.UI.DomElement.addCssClass(cell.parentNode, this._getCssClass(cell.date, 'M'));

}

}

if (this._title.firstChild) {

this._title.removeChild(this._title.firstChild);

}

this._title.appendChild(document.createTextNode(gYear));

this._title.date = visibleDate;

this._prevArrow.date = new Date(gYear - 1, 0, 1, this._hourOffsetForDst);

this._nextArrow.date = new Date(gYear + 1, 0, 1, this._hourOffsetForDst);

break;

case "years":

var minYear = (Math.floor(gYear / 10) * 10);

for (var i = 0; i < this._yearsBody.rows.length; i++) {

var row = this._yearsBody.rows[i];

for (var j = 0; j < row.cells.length; j++) {

var cell = row.cells[j].firstChild;

cell.date = new Date(minYear + cell.year, 0, 1, this._hourOffsetForDst);

if (cell.firstChild) {

cell.removeChild(cell.lastChild);

} else {

cell.appendChild(document.createElement("br"));

}

cell.appendChild(document.createTextNode(minYear + cell.year));

$common.removeCssClasses(cell.parentNode, [ "ajax__calendar_other", "ajax__calendar_active" ]);

Sys.UI.DomElement.addCssClass(cell.parentNode, this._getCssClass(cell.date, 'y'));

}

}

if (this._title.firstChild) {

this._title.removeChild(this._title.firstChild);

}

this._title.appendChild(document.createTextNode(minYear.toString() + "-" + (minYear + 9).toString()));

this._title.date = visibleDate;

this._prevArrow.date = new Date(minYear - 10, 0, 1, this._hourOffsetForDst);

this._nextArrow.date = new Date(minYear + 10, 0, 1, this._hourOffsetForDst);

break;

}

if (this._today.firstChild) {

this._today.removeChild(this._today.firstChild);

}

this._today.appendChild(document.createTextNode(String.format(AjaxControlToolkit.Resources.Calendar_Today, todaysDate.localeFormat("dd MMMM ") + gYear )));

this._today.date = todaysDate;

},



uthai วันที่ส่ง: 16 พ.ค. 51 09:28 GMT+7
วันที่ปรับล่าสุด: 16 พ.ค. 51 09:28 GMT+7
REPLY #17 (81453)
เยี่ยมเลยครับ


jnithi วันที่ส่ง: 17 พ.ค. 51 00:49 GMT+7
วันที่ปรับล่าสุด: 17 พ.ค. 51 00:49 GMT+7
REPLY #18 (81454)

ใช่แล้วครับคุณ uthai ขอบคุณครับที่มาช่วยกัน

จริงๆ แล้วก็ยังเหลือรายละเอียดในส่วนที่คลิกเปลี่ยนจากมุมมองวัน ไปเป็นมุมมองเดือน หรือเดือนไปเป็นปีที่จะต้องเพิ่มโค้ดเข้าไปอีกนิดสำหรับ พ.ศ. นะครับ อันนี้รู้สึกคุณ Volk กำลังศึกษาอยู่นะครับ ถ้ายังงัยสำหรับแล้วรบกวนคุณ Volk ช่วยโพสต์เพิ่มด้วยนะครับ  Cheers!!!



nas วันที่ส่ง: 17 พ.ค. 51 01:28 GMT+7
วันที่ปรับล่าสุด: 17 พ.ค. 51 01:28 GMT+7
REPLY #19 (81478)

แฮ่ ๆ  ยังทำไม่ได้เลยครับพี่ nas 

 ทดลองทำที่พี่ uthai เพิ่มเติมมาก็ตอบโจทย์หมดเลยนะครับ
 แต่ไม่รู้ว่าผมทำอะไรผิดหรือป่าวนะครับ.. คือ ถ้าเราคลิกเลือกตรง วันนี้ : 11 พฤษภาคม 2551 (ส่วนของ Footer นะครับ)
 เจ้า Calendar ยังส่งค่าเป็น 11/5/2008 อยู่เลยอะครับ.. - -"  (หาอยู่นานยังไม่ได้เลยอะครับ..หุหุ) เดียวต้องหาต่อไปก่อนครับ..  Cheers!!!


Volk1969 วันที่ส่ง: 17 พ.ค. 51 22:43 GMT+7
วันที่ปรับล่าสุด: 17 พ.ค. 51 22:43 GMT+7
REPLY #20 (82054)
เยี่ยมครับพี่น้อง


thevodka วันที่ส่ง: 27 พ.ค. 51 08:53 GMT+7
วันที่ปรับล่าสุด: 27 พ.ค. 51 08:53 GMT+7
REPLY #21 (82777)

รบกวนช่วยดูให้หน่อยค่ะงงมากเลย พอดีว่าอยากทราบค่ะพอเอาขึ้นโฮสแล้ว

 
วันที่และเวลาไม่เปลี่ยนเลย พอกดให้ไปอีกเดือนก็ไม่ได้ พอดีว่าเขียนโค้ดไม่เป็นเลยค่ะ ไปเอา Template ฟรีมาแก้ไขเอาแล้วเค้ามีปฏิทินอันนี้ให้ค่ะ
 
<div id="calendar_wrap">
     <table id="wp-calendar" summary="Calendar">
      <caption>
      June 2008
      </caption>
      <thead>
       <tr>
        <th abbr="Monday" scope="col" title="Monday">M</th>
        <th abbr="Tuesday" scope="col" title="Tuesday">T</th>
        <th abbr="Wednesday" scope="col" title="Wednesday">W</th>
        <th abbr="Thursday" scope="col" title="Thursday">T</th>
        <th abbr="Friday" scope="col" title="Friday">F</th>
        <th abbr="Saturday" scope="col" title="Saturday">S</th>
        <th abbr="Sunday" scope="col" title="Sunday">S</th>
       </tr>
      </thead>
      <tfoot>
       <tr>
        <td abbr="July" colspan="3" id="prev"><a href="#">&laquo; Jul</a></td>
        <td class="pad">&nbsp;</td>
        <td abbr="September" colspan="3" id="next" class="pad"><a href="#">Sep &raquo;</a></td>
       </tr>
      </tfoot>
      <tbody>
       <tr>
        <td colspan="2" class="pad">&nbsp;</td>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
        <td>5</td>
       </tr>
       <tr>
        <td>6</td>
        <td>7</td>
        <td>8</td>
        <td>9</td>
        <td>10</td>
        <td>11</td>
        <td>12</td>
       </tr>
       <tr>
        <td>13</td>
        <td>14</td>
        <td>15</td>
        <td>16</td>
        <td>17</td>
        <td>18</td>
        <td>19</td>
       </tr>
       <tr>
        <td>20</td>
        <td id="today">21</td>
        <td>22</td>
        <td>23</td>
        <td>24</td>
        <td>25</td>
        <td>26</td>
       </tr>
       <tr>
        <td>27</td>
        <td>28</td>
        <td>29</td>
        <td>30</td>
        <td>31</td>
        <td class="pad" colspan="2">&nbsp;</td>
       </tr>
      </tbody>
     </table>
    </div>
 
ขอบคุณมากค่ะ


monki วันที่ส่ง: 5 มิ.ย. 51 02:45 GMT+7
วันที่ปรับล่าสุด: 5 มิ.ย. 51 02:45 GMT+7
REPLY #22 (82889)

คุณ monki ได้กำหนด culture ในไฟล์ web.config ให้เป็น th-TH หรือยังครับตามภาพด้านล่าง



nas วันที่ส่ง: 5 มิ.ย. 51 23:12 GMT+7
วันที่ปรับล่าสุด: 5 มิ.ย. 51 23:12 GMT+7
REPLY #23 (83156)

เอ้อ..... ตรงไหนอ่ะค่ะคุณ nas คือพอดีว่างงมากเลยค่ะ

 
ตอนนี้ก็อัพโหลดขึ้นไปพลางๆ ก่อน แต่ปฏิทินมันไม่เปลี่ยนค่ะ เค้าเซ็ตมายังไงก็เป็นแบบนั้นเลยค่ะ


monki วันที่ส่ง: 10 มิ.ย. 51 12:43 GMT+7
วันที่ปรับล่าสุด: 10 มิ.ย. 51 12:43 GMT+7
REPLY #24 (83157)
อ้อๆๆๆๆ อีกอย่างค่ะมันเป็น Template ที่มี CSS เลยแก้ไม่เป็นเข้าไปใหญ่ แล้วอีกนิดนึง พอดีลองก๊อบของที่อื่นไปใส่ดูในหน้าเวป ก็ไม่เห็นขึ้นอะไรเลยอ่ะค่ะเฮ้อ...กลุ้ม


monki วันที่ส่ง: 10 มิ.ย. 51 12:45 GMT+7
วันที่ปรับล่าสุด: 10 มิ.ย. 51 12:45 GMT+7
REPLY #25 (86694)

สำหรับไทยต้องใช้ format ที่มีเครื่องหมายวรรคตอนต่างๆคั่นไว้(ห้ามคั่นมากกว่า1ตัวอักษร) เช่น d/M/yyyy, d m yyyy เป็นต้น(ที่เซ็ตค่าที่ control)

 
ต้องส่วนไหนที่มีการแก้ไขจะ comment source ส่วนที่เป็น original ไว้ก่อนที่จะเพิ่มส่วนที่แก้ไข
 
function ที่มีการเพิ่มหรือแก้ไขมีดังนี้
 

//function set_selectedDate
set_selectedDate : function(value) {
        if(value && (String.isInstanceOfType(value)) && (value.length != 0)) {
            value = new Date(value);
        }
       
        if (value) value = value.getDateOnly();

        if (this._selectedDate != value) {
            this._selectedDate = value;           
            this._selectedDateChanging = true;
            var text = "";
            if (value) {
                //text = value.localeFormat(this._format);
           
                //add by big 5-Feb-2008 {
                if(this._isThaiCulture()){
                    //สำหรับไทยต้องใช้ format ที่มีเครื่องหมายวรรคตอนต่างๆคั่นไว้ เช่น d/M/yyyy, d m yyyy เป็นต้น
                    try{
                        temp = value.localeFormat(this._format);
                        text = this._convetTextYear(temp,543);
                    }catch (err){
                        alert("set_selectedDate Error : "+err);
                    }
                }else{
                    text = value.localeFormat(this._format);
                }
                //}
            }
            if (text != this._textbox.get_Value()) {
                this._textbox.set_Value(text);
                this._fireChanged();
            }
            this._selectedDateChanging = false;
            this.invalidate();
            this.raisePropertyChanged("selectedDate");
        }
    },


//function _performLayout
_performLayout : function() {
        /// <summmary>
        /// Updates the various views of the calendar to match the current selected and visible dates
        /// </summary>
       
        var elt = this.get_element();
        if (!elt) return;
        if (!this.get_isInitialized()) return;
        if (!this._isOpen) return;

        var dtf = Sys.CultureInfo.CurrentCulture.dateTimeFormat;       
        var selectedDate = this.get_selectedDate();
        var visibleDate = this._getEffectiveVisibleDate();
        var todaysDate = this.get_todaysDate();
       
        switch (this._mode) {
            case "days":
               
                var firstDayOfWeek = this._getFirstDayOfWeek();
                var daysToBacktrack = visibleDate.getDay() - firstDayOfWeek;
                if (daysToBacktrack <= 0)
                    daysToBacktrack += 7;
                   
                var startDate = new Date(visibleDate.getFullYear(), visibleDate.getMonth(), visibleDate.getDate() - daysToBacktrack, this._hourOffsetForDst);
                var currentDate = startDate;

                for (var i = 0; i < 7; i++) {
                    var dayCell = this._daysTableHeaderRow.cells[i].firstChild;
                    if (dayCell.firstChild) {
                        dayCell.removeChild(dayCell.firstChild);
                    }
                    dayCell.appendChild(document.createTextNode(dtf.ShortestDayNames[(i + firstDayOfWeek) % 7]));
                }
                for (var week = 0; week < 6; week ++) {
                    var weekRow = this._daysBody.rows[week];
                    for (var dayOfWeek = 0; dayOfWeek < 7; dayOfWeek++) {
                        var dayCell = weekRow.cells[dayOfWeek].firstChild;
                        if (dayCell.firstChild) {
                            dayCell.removeChild(dayCell.firstChild);
                        }
                        dayCell.appendChild(document.createTextNode(currentDate.getDate()));
                        dayCell.title = currentDate.localeFormat("D");
                        dayCell.date = currentDate;
                        $common.removeCssClasses(dayCell.parentNode, [ "ajax__calendar_other", "ajax__calendar_active" ]);
                        Sys.UI.DomElement.addCssClass(dayCell.parentNode, this._getCssClass(dayCell.date, 'd'));
                        currentDate = new Date(currentDate.getFullYear(), currentDate.getMonth(), currentDate.getDate() + 1, this._hourOffsetForDst);
                    }
                }
               
                this._prevArrow.date = new Date(visibleDate.getFullYear(), visibleDate.getMonth() - 1, 1, this._hourOffsetForDst);
                this._nextArrow.date = new Date(visibleDate.getFullYear(), visibleDate.getMonth() + 1, 1, this._hourOffsetForDst);
                if (this._title.firstChild) {
                    this._title.removeChild(this._title.firstChild);
                }
                //this._title.appendChild(document.createTextNode(visibleDate.localeFormat("MMMM, yyyy")));
               
                //add by big 5-Feb-2008 {
                if(this._isThaiCulture()){
                    this._title.appendChild(document.createTextNode(visibleDate.localeFormat("MMMM ") + (eval(visibleDate.localeFormat("yyyy"))+543).toString() ));
                }else{
                    this._title.appendChild(document.createTextNode(visibleDate.localeFormat("MMMM, yyyy")));
                }
                //}
               
                this._title.date = visibleDate;

                break;
            case "months":

                for (var i = 0; i < this._monthsBody.rows.length; i++) {
                    var row = this._monthsBody.rows[i];
                    for (var j = 0; j < row.cells.length; j++) {
                        var cell = row.cells[j].firstChild;
                        cell.date = new Date(visibleDate.getFullYear(), cell.month, 1, this._hourOffsetForDst);
                        cell.title = cell.date.localeFormat("Y");
                        $common.removeCssClasses(cell.parentNode, [ "ajax__calendar_other", "ajax__calendar_active" ]);
                        Sys.UI.DomElement.addCssClass(cell.parentNode, this._getCssClass(cell.date, 'M'));
                    }
                }
               
                if (this._title.firstChild) {
                    this._title.removeChild(this._title.firstChild);
                }
                //this._title.appendChild(document.createTextNode(visibleDate.localeFormat("yyyy")));
               
                //add by big 5-Feb-2008 {
                if(this._isThaiCulture()){
                    this._title.appendChild(document.createTextNode((eval(visibleDate.localeFormat("yyyy"))+543).toString() ));
                }else{
                    this._title.appendChild(document.createTextNode(visibleDate.localeFormat("yyyy")));
                }
                //}
               
                this._title.date = visibleDate;
                this._prevArrow.date = new Date(visibleDate.getFullYear() - 1, 0, 1, this._hourOffsetForDst);
                this._nextArrow.date = new Date(visibleDate.getFullYear() + 1, 0, 1, this._hourOffsetForDst);

                break;
            case "years":

                var minYear = (Math.floor(visibleDate.getFullYear() / 10) * 10);
                for (var i = 0; i < this._yearsBody.rows.length; i++) {
                    var row = this._yearsBody.rows[i];
                    for (var j = 0; j < row.cells.length; j++) {
                        var cell = row.cells[j].firstChild;
                        cell.date = new Date(minYear + cell.year, 0, 1, this._hourOffsetForDst);
                        if (cell.firstChild) {
                            cell.removeChild(cell.lastChild);
                        } else {
                            cell.appendChild(document.createElement("br"));
                        }
                        //cell.appendChild(document.createTextNode(minYear + cell.year));
                       
                        //add by big 5-Feb-2008 {
                        if(this._isThaiCulture()){
                            cell.appendChild(document.createTextNode(minYear + 543 + cell.year));
                        }else{
                            cell.appendChild(document.createTextNode(minYear + cell.year));
                        }
                        //}
                       
                        $common.removeCssClasses(cell.parentNode, [ "ajax__calendar_other", "ajax__calendar_active" ]);
                        Sys.UI.DomElement.addCssClass(cell.parentNode, this._getCssClass(cell.date, 'y'));
                    }
                }

                if (this._title.firstChild) {
                    this._title.removeChild(this._title.firstChild);
                }
                //this._title.appendChild(document.createTextNode(minYear.toString() + "-" + (minYear + 9).toString()));
               
                //add by big 5-Feb-2008 {
                if(this._isThaiCulture()){
                    this._title.appendChild(document.createTextNode((minYear+543).toString() + "-" + (minYear + 543 + 9).toString()));
                }else{
                    this._title.appendChild(document.createTextNode(minYear.toString() + "-" + (minYear + 9).toString()));
                }
                //}
                this._title.date = visibleDate;
                this._prevArrow.date = new Date(minYear - 10, 0, 1, this._hourOffsetForDst);
                this._nextArrow.date = new Date(minYear + 10, 0, 1, this._hourOffsetForDst);

                break;
        }
        if (this._today.firstChild) {
            this._today.removeChild(this._today.firstChild);
        }
        //this._today.appendChild(document.createTextNode(String.format(AjaxControlToolkit.Resources.Calendar_Today, todaysDate.localeFormat("MMMM d, yyyy"))));
       
        //add by big 5-Feb-2008 {
        if(this._isThaiCulture()){
            this._today.appendChild(document.createTextNode(String.format(AjaxControlToolkit.Resources.Calendar_Today, todaysDate.localeFormat("d MMMM "+ (eval(visibleDate.localeFormat("yyyy"))+543).toString() ))));
        }else{
            this._today.appendChild(document.createTextNode(String.format(AjaxControlToolkit.Resources.Calendar_Today, todaysDate.localeFormat("MMMM d, yyyy"))));
        }
        //}
       
        this._today.date = todaysDate;       
    },

 

//function _parseTextValue
_parseTextValue : function(text) {
        /// <summary>
        /// Converts a text value from the textbox into a date
        /// </summary>
        /// <param name="text" type="String" mayBeNull="true">The text value to parse</param>
        /// <returns type="Date" />
       
        var value = null;
        if(text) {
            //value = Date.parseLocale(text, this.get_format());
           
            //add by big 5-Feb-2008 {
            if(this._isThaiCulture()){
                //สำหรับไทยต้องใช้ format ที่มีเครื่องหมายวรรคตอนต่างๆคั่นไว้ เช่น d/M/yyyy, d m yyyy เป็นต้น
                try{
                    //เมื่อรับค่าจาก page มาของไทยจะเป็นปี พ.ศ. ดังนั้นต้องเปลี่ยนเป็น ค.ศ. ก่อน
                    value = Date.parseLocale(this._convetTextYear(text,-543), this.get_format());
                }catch (err){
                    alert("_parseTextValue Error : "+err);
                }
            }else{
                value = Date.parseLocale(text, this.get_format());
            }
            //}
        }
        if(isNaN(value)) {
            value = null;
        }
        return value;
    },

 

//function ที่เพิ่ม เอาไว้ตรงไหนก็ได้ภายใน CalendarBehavior
//add by big 5-Feb-2008 {
    _isThaiCulture : function(){
        var result = false;
       
        //get culture name. ex th-TH
        var cultureName = Sys.CultureInfo.CurrentCulture.name;
        if(cultureName.indexOf("th") > -1){
            result = true;
        }
        return result;
    },
   
    _convetTextYear : function(text,yearAdd){     
        /// <summary>
        /// เปลี่ยนปีของ text วันที่ให้เป็น ค.ศ.หรือ พ.ศ. เพื่อนำไปใช้ในการ new Date หรือใช้ในการแสดงผล
        /// เช่น 12/2/2551 ---> 12/2/2008
        /// </summary>
        /// <value type="String">
        /// new date text
        /// </value>
        /// <param name="text" type="String">วันที่ในรูปแบบ String ที่มีปีเป็น พ.ศ.</param>
        /// <param name="yearAdd" type="Integer">จำนวนปีที่ต้องการเพิ่มหรือลด</param>
       
        var result = null;
       
        var format = this.get_format()
        if (format == "d"){
            format = "d/M/yyyy";
        }
       
        //pattern ของปี
        var patt = /y{4}/;
        //pattern ของเครื่องหมายวรรคตอน
        var patt2 = /[^DdMyhms]/g;
        //หาเครื่องหมายวรรคตอนที่มีทั้งหมดเก็บไว้ใน array
        var punctuateArray = format.match(patt2);
        //หาตำแหน่งเริ่มต้นของ pattern ปี
        var yearPatternStartIndex = format.search(patt);
       
        //ตัวแปรเก็บตำแหน่งของเครื่องหมายวรรคตอน
        var punPosition = -1;
        //ตัวแปรเก็บ index ของ punctuateArray
        var punIndex = 0;
       
        //วนลูป punctuateArray ทีละตัวเพื่อหาตำแหน่งของเครื่องหมายวรรคตอนแต่ละอัน
        for (i=0;i<punctuateArray.length;i++){
            //เก็บค่าตำแหน่งของเครื่องหมายวรรคตอนที่อยู่ใน format
            punPosition = format.indexOf(punctuateArray[i], punPosition + 1);
            //ถ้าตำแหน่งของเครื่องหมายวรรคตอนมีค่าเลยตำแหน่งเริ่มต้นของปีให้ทำการเก็บค่าเครื่องหมายวรรคตอนอันก่อนหน้าเอาไว้
            if(yearPatternStartIndex < punPosition){
                punIndex = i-1;
                break;
            }
        }
       
        if(punIndex == 0 && punPosition != -1){
            punIndex = punIndex + 1 ;
        }

        //reset ตำแหน่งของเครื่องหมายวรรคตอน
        punPosition = -1;
       
        //วนลูป punctuateArray อีกครั้งจนกว่าจะถึงตำแหน่งเครื่องหมายวรรคตอนที่นำหน้าปี
        for (i=0;i<=punIndex;i++){
            //เก็บค่าตำแหน่งของเครื่องหมายวรรคตอนที่อยู่ใน text
            punPosition = text.indexOf(punctuateArray[i], punPosition + 1);
        }

        //ดึงค่าปีออกมาจาก text
        var yearValue = text.substring(punPosition + 1, punPosition + 5);
       
        //ถ้า format ของปีไม่ได้เป็น yyyy จะทำการแปลงค่าปีเป็นตัวเลขไม่ได้
        if(isNaN(yearValue)){
            alert("format error : format must be " + format);
        }else{
            result = text.replace(yearValue, eval(yearValue) + yearAdd);
        }

        return result;
       
    }
    //}

 
ร่วมแชร์ครับ คงไม่ช้าไปนะ
ปล พึ่งสมัครสมาชิกสดๆเลย


asynchronous วันที่ส่ง: 23 ก.ค. 51 18:06 GMT+7
วันที่ปรับล่าสุด: 23 ก.ค. 51 18:06 GMT+7
REPLY #26 (90195)
ของผม เดือนไม่เป็นภาษาไทยคับ แก้ไงหรอคับ


arm2n วันที่ส่ง: 4 ก.ย. 51 18:55 GMT+7
วันที่ปรับล่าสุด: 4 ก.ย. 51 18:55 GMT+7
REPLY #27 (95024)

ขอบคุณค่ะ คุณ asynchronous  

ช่วยได้แยะเลยค่ะ กำลังเบลออยู่เลยว่าต้องโม ตรงไหนบ้าง *-*

 



monya วันที่ส่ง: 12 พ.ย. 51 17:15 GMT+7
วันที่ปรับล่าสุด: 12 พ.ย. 51 17:15 GMT+7
REPLY #28 (95036)

 เยี่ยมเลย

ขอบคุณครับ



JOHNDEV วันที่ส่ง: 12 พ.ย. 51 22:10 GMT+7
วันที่ปรับล่าสุด: 12 พ.ย. 51 22:10 GMT+7
กระทู้นี้มีอายุเกิน 365 วันแล้ว ท่านจะไม่สามารถตอบกระทู้นี้ได้อีก
ถ้าต้องการสนทนาต่อ กรุณาตั้งเป็นกระทู้ใหม่ได้ในหน้าโฮม
และอาจจะอ้างถึงกระทู้นี้ โดยก๊อปปี้ข้อความในกล่องสีขาวด้านล่างไปแปะในกระทู้ใหม่

copy เพื่ออ้างอิงถึงข้อความนี้:
บทความ - Trick ในการทำให้คอนโทรลปฏิทิน CalendarExtender ใน AJAX Control Toolkit รองรับภาษาไทย
http://greatfriends.biz?80839


4 ก.ย. 01:16
Online: 181