แก้ไข Richfaces 4.3.0 ให้รองรับปี พ.ศ

แก้ไข Richfaces 4.3.0 ให้รองรับปี พ.ศ
สืบเนื่องจากระบบที่พัฒนามาต้องการให้แสดง ปฏิทินใน Rcihfaces เป็นภาษาไทย จากประสบการณ์ที่ผ่านมาใน Version 3.3.3 Final นั้นจำเป็นต้องไปแก้ไขไฟล์ calendar.js ซึ่งก็สามารถใช้งานได้ดี แต่พอมา Version นี้ก็ไม่แตกต่างกันครับ
คือ ต้องแก้อยู่ดี เพราะปฏิทินนั้น แสดงชื่อเดือน อะไรถูกต้องครับ ยกเว้นพวก ปี วันที่ปัจจุบัน เพราะ เวลากำหนด locale เป็น th_TH แล้ว ตัว ปฏิทินจะสร้าง JavaScript ในหน้าจอดังนี้

<script type="text/javascript">
	RichFaces.ui.Calendar.addLocale("th_TH",
		{"monthLabels":["มกราคม","กุมภาพันธ์","มีนาคม"......"ธันวาคม"]
		,"minDaysInFirstWeek":1
		,"monthLabelsShort":["..ชื่อเดือน .."]
		,"firstWeekDay":0
		,"weekDayLabels":["ชื่อสัปดาห์"]
		,"weekDayLabelsShort":["ชื่อสัปดาห์"] 
		} 
	);

	new RichFaces.ui.Calendar("startDate","th_TH",{
	datePattern":"dd\/MM\/yyyy"
	,"currentDate":new Date(2556,1,26)
	,"style":"z\u002Dindex: 3"
	} 
).load();
</script>

พอส่ง currentDate เป็น พ.ศ ตามที่ Java เข้าใจไปให้ JavaScript ที่นี้ก็ลำบากเลยครับ เวลาเปิดหน้าจอครั้งแรกไม่มีปัญหาอะไรครับ แต่ถ้าคลิกไป คลิกมา ตัวปฏิทินจะแสดงผลเพี้ยนจาก 2556 ไปเป็น 769 บ้าง ตามสถานะการณ์ เนื่องจาก Java พยายามแปลงไปเป็นปีไทย แต่ JavaScript ไม่รู้จัก
หลังจากประสบปัญหานี้ จึงลองไปค้นหาข้อมูลดู ซึ่งไม่เจอใครแก้ปัญหาไว้เลย เลยต้องมางมเอง จากประาบการณ์ ใน Version 3.3.3 Final คิดว่าจะง่าย แต่ ….. ขอโทษที Version 4.3.0 Final พี่แกเปลี่ยน Code อีกแล้วครับ ออกไปเขียนแนว Jquery plugin ต้องงมอีกพอสมควร
เสียเวลามาเกือบทั้งวัด สุดท้ายก็แก้ไขเสร็จเรียบร้อย เลยมาเขียนไว้สักหน่อย การแก้ไขทำตามนี้เลย

1. แตกไฟล์ จาก richfaces-components-ui-4.3.0.Final.jar
2. คัดลอกไฟล์ calendar.js และ calendar-utils.js (อยู่ใน richfaces-components-ui-4.3.0.Final\META-INF\resources\org.richfaces)
3. เปิดไฟล์ calendar-utils.js ขึ้นมา และไปเพิ่ม parameter ชื่อ thai_locale (type เป็น boolean) หรือ ชื่ออื่นที่อยากได้ ใน function formatDate
ของเดิม

	formatDate: function(date, pattern, monthNames, monthNamesShort)
	

เปลี่ยนเป็น

	formatDate: function(date, pattern, monthNames, monthNamesShort, thai_locale)
	

และแก้ไข

	if (ch == 'y'){
		return date.getFullYear();
	}
	

เปลี่ยนเป็น

	if (ch == 'y'){
		if(thai_locale) {
			return date.getFullYear() + 543;
		} else {
			return date.getFullYear();
		}
	}
	

จากนั้นบันทึก
4. เปิดไฟล์ calendar.js ไฟล์นี้ต้องแก้เยอะหน่อย ประมาณ 7-8 จุดด้วยกัน
5. ประกาศตัวแปรบน หัวไฟล์ (จริงๆไม่ต้องก็ได้ครับ ใช้ 543 ไปเลยก็ได้)

	var thai_diff_year = 543;
	

6. เพิ่ม option ให้กับ calendar โดยไปที่บรรทัด

	this.options = $.extend(this.options, defaultOptions, locales[locale], options, markups);
	

แล้วเพิ่ม code ต่อท้ายไปดังนี้

	if('th_TH' == locale || 'th' == locale) {
		this.options['thaiLocale'] = true;
	} else {
		this.options['thaiLocale'] = false;
	}
	

และไปหลังบรรทัด

	this.currentDate.setDate(1);
	

เพิ่ม code เพื่อตรวจสอบว่า ถ้า Locale เป็นไทย ให้ลบ ปีออกไป 543

	if(this.options.thaiLocale) {
		var year = this.currentDate.getFullYear();
		this.currentDate.setFullYear(year - thai_diff_year);
	}
	

7. จากนั้นขยับขึ้นไปที่ function getSelectedDateControl สำหรับเลือกเดือน หรือ ปีจากหน้า popup ของปฏิทินอีกที
ของเดิม

	var text = rf.calendarUtils.formatDate(calendar.selectedDate
		, (calendar.timeType ? calendar.datePattern : calendar.options.datePattern)
		, calendar.options.monthLabels
		, calendar.options.monthLabelsShort);
	

เปลี่ยนเป็น

	endarUtils.formatDate(calendar.selectedDate
		, (calendar.timeType ? calendar.datePattern : calendar.options.datePattern)
		, calendar.options.monthLabels
		, calendar.options.monthLabelsShort, calendar.options.thaiLocale);
	

8. จากนั้นก็ไปที่ function currentMonthControl: function (context) function นี้เอาไว้แสดง ชื่อ เดือน และ ปีในหัว ปฏิทิน
ของเดิม

	var text = rf.calendarUtils.formatDate(context.calendar.getCurrentDate()
		, "MMMM, yyyy", context.monthLabels
		, context.monthLabelsShort);
	

เปลี่ยนเป็น

	var text = rf.calendarUtils.formatDate(context.calendar.getCurrentDate()
		, "MMMM, yyyy", context.monthLabels
		, context.monthLabelsShort
		, context.calendar.options.thaiLocale);
	

9. ข้ามฝากลงมาเกือบล่างๆ ที่ function __getSelectedDateString สำหรับ fomat วันที่ที่เลือกมาให้ text box
ของเดิม

	return rf.calendarUtils.formatDate(this.selectedDate
		, pattern, this.options.monthLabels
		, this.options.monthLabelsShort);
	

เปลี่ยนเป็น

	return rf.calendarUtils.formatDate(this.selectedDate
		, pattern, this.options.monthLabels
		, this.options.monthLabelsShort
		, this.options.thaiLocale);
	

10. ลงมาอีกนิด ที่ function getCurrentYear
ของเดิม

	getCurrentYear: function() {
		return this.currentDate.getFullYear();
	}
	

เปลี่ยนเป็น

	getCurrentYear: function() {
		if(this.options.thaiLocale) {
			return this.currentDate.getFullYear() + thai_diff_year;
		} else {
			return this.currentDate.getFullYear();
		}
	}
	

11. ลงมาอีกนิด ที่ function render:function()
เพิ่ม code

	var todayYear = 0;
	if(this.options.thaiLocale) {
		todayYear = this.todayDate.getFullYear() + thai_diff_year;
	} else {
		todayYear = this.todayDate.getFullYear();
	}
	

ประมาณนี้ไปหลังบรรทัด

	var currentYear = this.getCurrentYear();
	

และแก้ไขบรรทัด

	var todayflag = (currentYear == this.todayDate.getFullYear() && currentMonth == this.todayDate.getMonth());
	

ไปเป็น

	var todayflag = (currentYear == todayYear && currentMonth == this.todayDate.getMonth());
	

และ บรรทัด

	var selectedflag = this.selectedDate && (currentYear == this.selectedDate.getFullYear() && currentMonth == this.selectedDate.getMonth())
	

ไปเป็น

	var selectedflag = this.selectedDate && (currentYear == todayYear && currentMonth == this.selectedDate.getMonth());
	

12. ทำการ Save
13. จากนั้นทำการ คัดลอกไฟล์ ที่แก้ไขทั้งสองไฟล์ ไปแทนที่ไฟล์ ดังต่อไปนี้
1. Static mode อยู่ใน Folder

		richfaces-components-ui-4.3.0.Final\META-INF\resources\org.richfaces.staticResource\4.3.0.Final\Static\org.richfaces

2. Original source อยู่ใน Folder

		richfaces-components-ui-4.3.0.Final\META-INF\resources\org.richfaces

14. สำหรับ ไฟล์ในส่วนของ Compressed, Packed และ PackedCompressed นั้นต้องทำดังต่อไปนี้
1. Compressed Mode อยู่ใน Folder

		richfaces-components-ui-4.3.0.Final\META-INF\resources\org.richfaces.staticResource\4.3.0.Final\Compressed\org.richfaces

ทำการบีบอัดไฟล์ calendar.js และ calendar-utils.js ก่อนนำไปแทนที่

2. Packed mode อยู่ใน Folder

		richfaces-components-ui-4.3.0.Final\META-INF\resources\org.richfaces.staticResource\4.3.0.Final\Packed\packed

นำ source ที่แก้ไขไปแทนที่ในไฟล์ pack.js
3. PackedCompressed Mode อยู่ใน Folder

		richfaces-components-ui-4.3.0.Final\META-INF\resources\org.richfaces.staticResource\4.3.0.Final\PackedCompressed\packed

จากนั้น เอาไฟล์ ในข้อ 3 ไปทำการบีบอัด ก่อน จากนั้นเอาไปแทนที

หมายเหตู : เนื่องจาก Richfaces จะเลือกใช้ประเภทของไฟล์ตามการ config ใน web.xml ตัวอย่างเช่น

	<context-param>
		<param-name>org.richfaces.resourceOptimization.enabled</param-name>
		<param-value>true</param-value>
	</context-param>

ตัว Richfaces จะใช้ไฟล์ pack.js ที่บีบอัดแล้ว
การแก้ไขนี้ถูกทดสอบโดยผมผู้เดียวหากใครนำไปใช้แล้ว ติดปัญหาอย่างไงกรุณาช่วยแจ้งด้วยครับ จะได้แก้ไขให้ถูกต้อง หรือ ท่านใดมีการแก้ไขที่ง่ายกว่านี้ ช่วยแจ้งด้วยครับ
แก้ไขวันที่ 13/03/2556 : กรณีใช้เป็นเป็น พ.ศ ต้องใส่ค่า properties currentDate ด้วยมิฉะนั้นเวลามีการ render calendar ไปมาจะทำให้แสดงผลวันที่ไม่ถูก โดยเฉพาะ วันที่ ที่อยู่ใน popupPanel

Download
File JavaScript
File Lib (.Jar)

    • SuperRedNova
    • April 3rd, 2014

    จาก แก้ไข Richfaces 4.3.0 ให้รองรับปี พ.ศ
    http://www.secondknow.com/2013/720/%E0%B9%81%E0%B8%81%E0%B9%89%E0%B9%84%E0%B8%82-richfaces-4-3-0-%E0%B9%83%E0%B8%AB%E0%B9%89%E0%B8%A3%E0%B8%AD%E0%B8%87%E0%B8%A3%E0%B8%B1%E0%B8%9A%E0%B8%9B%E0%B8%B5-%E0%B8%9E-%E0%B8%A8/

    อยากทราบว่า ถ้าเราจะแก้ Version 3.3.3 Final ต้องแก้ที่ใดบ้างครับ

    ขอบคุณครับ

  1. No trackbacks yet.