پیاده سازی تقویم شمسی در شیرپوینت با استفاده از جاوا اسکریپت ( قسمت دوم )

در قسمت قبلی مقاله مشاهده کردید که چگونه میتوان تاریخ هایی که در یک صفحه قرار دارد را به شمسی تغییر داد ، در این مقاله قصد دارم به شما آموزش دهم چگونه با استفاده از Jquery و جاوا اسکریپت Date Picker شیرپوینت را به شمسی تغییر دهید .
اگر ستونی از نوع تقویم در لیست های خود داشته باشید هنگام ایجاد یا ویرایش یک مورد جدید Date Picker شیرپوینت با توجه نوع تقویم انتخاب شده به شکل زیر نمایش داده میشود :


[IMG]http://www.mediafire.com/convkey/23a0/zb34x400hthcz83fg.jpg[/IMG]


اگر به سورس صفحه مراجعه کنیم ، میبینم برای هر Picker کدی به شکل زیر ایجاد شده است :


[IMG]http://www.mediafire.com/convkey/ea95/o98r9rp1ha4y3tefg.jpg[/IMG]


پس ما میتوانیم با تغییر دادن این قسمت و ایجاد کدهایی برای Picker شمسی به هدف خود برسیم !
اما قبل از این کار ما نیاز به یک Date Picker خوب شمسی داریم ، من اینجا از Date Picker که دوست خوبم مهدی هاشمی نژاد در بلاگشون معرفی کردند استفاده میکنم ، که میتوانید توضیحات و سورس کامل این Picker را از [URL="http://hasheminezhad.com/jqdatepicker"]اینجا[/URL]دریافت نمایید.
من آخرین فایل ها را با کمی تغییر و ایجاد نسخه نهایی از آن برای استفاده در شیرپوینت آماده کردم که برای مرحله اول کار می بایست این فایل ها را از [URL="http://www.mediafire.com/?k36l66wbdiuafp2"]اینجا[/URL]
دریافت نمایید .
فایل ها را از حالت فشرده خارج و در مسیر زیر کپی نمایید :


C:\Program Files\Common Files\Microsoft Shared\Web Server Extensions\14\TEMPLATE\IMAGES


اگر یادتون باشه در قسمت قبلی مقاله ما تغییراتی را در فایل Master Page سایتی که میخواهیم از تقویم شمسی در آن استفاده کنیم ایجاد کردیم ، برای اضافه کردن کدهای جدید این فایل را باز کرده و کدهای زیر را قبل از بسته شدن تگ Head (کلمه </head> را جستجو کنید )به آن اضافه کنید :
[code]
<link type="text/css" href="/_layouts/images/jquery-ui-1.8.14.css" rel="stylesheet" />
<script type="text/javascript" src="/_layouts/images/jquery-1.6.2.min.js"></script>
<script type="text/javascript" src="/_layouts/images/jquery.ui.datepicker-cc.all.min.js"></script>
[/code]
حالا به انتهای فایل رفته و در قسمتی که کدهای مقاله پیش را وارد کرده بودید ، کدهای زیر را اضافه کنید :
[code]
changeDatePickerToPersian();
// تغییر پیکر تاریخ
function changeDatePickerToPersian()
{
$(function() {
var tags = document.getElementsByTagName('IMG');
for (var i = 0; i < tags.length; i++)
{ var tempString = tags[i].id;
if (tempString.indexOf('DatePickerImage') != -1){
document.getElementById(tempString).style.display = 'none';
var dtcontrolId = tempString.replace('DatePickerImage','');
$("#" + dtcontrolId).datepicker({showOn: 'button',buttonImage: '/_layouts/images/calendar.gif',buttonImageOnly: true});
}
}
});

}
[/code]
فایل را ذخیره کرده ، به یکی از لیست هایی که دارای ستون تقویم میباشد مثل لیست وظایف رفته و مورد جدیدی را ایجاد یا موردی را ویرایش کنید ، میتوانید Date Picker شمسی را مشاهده کنید و از انتخاب آن لذت ببرید !
[IMG]http://www.mediafire.com/convkey/3438/m23pnmgupn38bayfg.jpg[/IMG]
اما تغییر کوچک دیگری نیز باید در کدها ایجاد کنیم ، اگر به تصویر بالا نگاه کنید زمانی که ستون دارای مقدار پیش فرض می باشد یا زمانی که در حالت ویرایش مورد این ستون از قبل مقدار گرفته باشد ، تاریخی که در این ستون نمایش داده می شود به صورت میلادی است که باید مقدار آنرا به شمسی تغییر دهید ، ما توابع تبدیل را در اختیار داریم و آن را در فایل Master Page وارد کردیم ، پس تنها کاری که باید انجام بدیم پیدا کردن این کنترل و تغییر مقدار آن می باشد که توسط کد زیر صورت می گیرد :
[code]
var DateValue = document.getElementById(dtcontrolId).value;
if(DateValue)
{
Year = new Number(DateValue.substring(0, 4));
Month = new Number(DateValue.substring(5, 7));
Day = new Number(DateValue.substring(8, 10));
if(Year > 2000)
{
// تبدیل تاریخ میلادی به شمسی
var j = gregorian_to_jd(Year,Month,Day);
perscal = jd_to_persian(j);
pyear = perscal[0];
pmonth = perscal[1];
pday = perscal[2];

if(Number(pmonth) < 10)
pmonth = "0" + pmonth;


if(Number(pday) < 10)
pday = "0" + pday;

// ذخیره مقدار تاریخ شمسی
var shamsiDate = pyear + "/" + pmonth + "/" + pday;

// جایگذاری مقدار تاریخ میلادی با شمسی
document.getElementById(dtcontrolId).value = shamsiDate;
}
}
[/code]
که بعد از انجام این تغییرات در هنگام لود شدن کنترل تاریخ میلادی به شمسی تغییر خواهد یافت :


[IMG]http://www.mediafire.com/convkey/c2c3/0k9026v08cpaq80fg.jpg[/IMG]


در نهایت ما تابعی خواهیم داشت که Date Picker میلادی را به شمسی تغییر خواهد داد !
در قسمت بعدی مقاله به نحوه ذخیره این تاریخ ها خواهم پرداخت ، منتظر نظرات شما هستم ! ضمناً دوستانی که مایل هستند در پروژه فارسی سازی شیرپوینت فاندیشن 2013 با من همکاری داشته باشند لطفا مشخصاتشون رو به من [URL="http://ramin.ahmadi@gmail.com"]ایمیل[/URL] کنند .
کدهای نهایی که در واقع کدهای این قسمت و کدهای قسمت قبل می باشد را میتوانید از[URL="http://www.mediafire.com/?ao8j69zo679g8oo"]اینجا[/URL]
دریافت کنید .
موفق و پیروز باشید.
رامین احمدی

مرسی جالب بود من sharepoint 2013 دارم تست می کنم اگر بدون مشکل اونجا هم بود خبر میدم