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

[rtech]

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



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



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

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

اگر یادتون باشه در قسمت قبلی مقاله ما تغییراتی را در فایل Master Page سایتی که میخواهیم از تقویم شمسی در آن استفاده کنیم ایجاد کردیم ، برای اضافه کردن کدهای جدید این فایل را باز کرده و کدهای زیر را قبل از بسته شدن تگ Head (کلمه </head> را جستجو کنید )به آن اضافه کنید :

<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>

حالا به انتهای فایل رفته و در قسمتی که کدهای مقاله پیش را وارد کرده بودید ، کدهای زیر را اضافه کنید :

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});

					 }

				}

			});

		

		}

فایل را ذخیره کرده ، به یکی از لیست هایی که دارای ستون تقویم میباشد مثل لیست وظایف رفته و مورد جدیدی را ایجاد یا موردی را ویرایش کنید ، میتوانید Date Picker شمسی را مشاهده کنید و از انتخاب آن لذت ببرید !

اما تغییر کوچک دیگری نیز باید در کدها ایجاد کنیم ، اگر به تصویر بالا نگاه کنید زمانی که ستون دارای مقدار پیش فرض می باشد یا زمانی که در حالت ویرایش مورد این ستون از قبل مقدار گرفته باشد ، تاریخی که در این ستون نمایش داده می شود به صورت میلادی است که باید مقدار آنرا به شمسی تغییر دهید ، ما توابع تبدیل را در اختیار داریم و آن را در فایل Master Page وارد کردیم ، پس تنها کاری که باید انجام بدیم پیدا کردن این کنترل و تغییر مقدار آن می باشد که توسط کد زیر صورت می گیرد :

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;

	}

}

که بعد از انجام این تغییرات در هنگام لود شدن کنترل تاریخ میلادی به شمسی تغییر خواهد یافت :



در نهایت ما تابعی خواهیم داشت که Date Picker میلادی را به شمسی تغییر خواهد داد !
در قسمت بعدی مقاله به نحوه ذخیره این تاریخ ها خواهم پرداخت ، منتظر نظرات شما هستم ! ضمناً دوستانی که مایل هستند در پروژه فارسی سازی شیرپوینت فاندیشن 2013 با من همکاری داشته باشند لطفا مشخصاتشون رو به من ایمیل کنند .
کدهای نهایی که در واقع کدهای این قسمت و کدهای قسمت قبل می باشد را میتوانید ازاینجا
دریافت کنید .
موفق و پیروز باشید.
رامین احمدی

[mona11]

ینی بگم،آقا کوچیکتم،کم گفتم...بگم،آقایی کم گفتم،بگم قلب بزرگی داری کم گفتم....اصلا نمیدونم چی بگم

[feri10]

مرسی آقای احمدی.
اینم که موقع ذخیره کردن تاریخ خطا میده.

[rtech]

بله درسته ، به خاطر اینکه تاریخ شمسی قابل ذخیره کردن نیست ، بزودی میگم که چطور تاریخ ها رو ذخیره کنید

[feri10]

بله اگر لطف کنید در این مورد کمک کنید بسیار ممنون میشم.

[mona11]

ولی موقع ویرایش کردن بازم میلادیه :( کدی که وارد کردم به این شکله...

  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});

                     }

                }



            });

        }

                               

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;

    }

}

      

[mona11]

آهااااا درست شد...

var dateEdit=(document.getElementById('dtcontrolId').v  alue);                      

  var d2 = new Date(dateEdit== "" ? "N" : dateEdit);

                 

                Year2 = d2.getFullYear();                                       

                Month2 = d2.getMonth() + 1;

                Day2 = d2.getDate();

                var j2 = gregorian_to_jd(Year2, Month2, Day2);

                perscal2 = jd_to_persian(j2);

                pyear2 = perscal2[0];

                pmonth2 = perscal2[1];

                pday2 = perscal2[2];

                if (Number(pmonth2) < 10)

                    pmonth2 = "0" + pmonth2;

                if (Number(pday2) < 10) {

                    pday2 = "0" + pday2;

                }



              alert('s');

                var shamsiDate2 = pyear2 + "/" + pmonth2 + "/" + pday2;

              

            dateEdit = shamsiDate2;

البته جناب احمدی شما درست گفتین ولی فکر کنم چون دو جور کدها داره نوشته میشه (آقا فری )،یه کم تغییر نیاز داره...بازم ممنون

[feri10]

یک چیزی را توجه کردید.
اولا من فقط توی Task هام میتونم DatePicker شمسی را ببینم و توی بقیه لیست هام نمیتونم. وقتی توی MasterPage کد می نویسم دیگه واسه چی توی بقیه لیست ها نمی تونم تقویم شمسی را ببینم؟
دوما اگر یک بار هم فرم InfoPath همون Task را باز کنم . Publishکنم دیگه اونجام تقویم شمسی را نمی بینم.
لطفا شما هم چک کنید.

[mona11]

فقط توی تسک هاااا؟؟؟!!!! من که یه کاستوم لیست درست کردم و قشنگ جواب داد...ولی اینفو پت رو هنوز چک نکردم...چک میکنم خبرشو میدم

[mona11]

جواب نداد...بعد از پابلیش فرم اینفوپت،دوباره برمیگرده به همون حالت میلادی :(

[feri10]

فقط توی تسک هاااا؟؟؟!!!! من که یه کاستوم لیست درست کردم و قشنگ جواب داد...ولی اینفو پت رو هنوز چک نکردم...چک میکنم خبرشو میدم

لیست جدید درست نکنید از همون لیست های قبلیتون استفاده کنید بازم اینجوریه؟

[mona11]

آره .... درسته

[sh_loyal68]

این کدها برای شیرپوینت 2013 هستن؟ من امتحان کردم جواب نداد

[mona11]

این کدها برای شیرپوینت 2013 هستن؟ من امتحان کردم جواب نداد

من با 2010 تست کردم...ولی فکر کنم جواب بده...چون ظاهرا تگ های استفاده شده با ورژن های قبلی یکیه

[sh_loyal68]

ممنون از پاسختون. آره برای 2010 تست کردم اوکی بود. دوستان می دونید برای شیرپوینت 2013 چه تغییراتی باید تو کد بدم؟

[rtech]

دوستان عزیز این کدها در اینفوپث جواب نمیده ، البته برای اینفوپث هم راه داره که بهتون میگم ، به زودی قسمت سوم رو براتون می زارم

[mona11]

ممنون از پاسختون. آره برای 2010 تست کردم اوکی بود. دوستان می دونید برای شیرپوینت 2013 چه تغییراتی باید تو کد بدم؟

نه متاسفانه...اصلا سمت 2013 نرفتم تا حالا...میترسم مشکل کرک داشته باشه

[mona11]

دوستان عزیز این کدها در اینفوپث جواب نمیده ، البته برای اینفوپث هم راه داره که بهتون میگم ، به زودی قسمت سوم رو براتون می زارم

شما آقایی...لطف دارین

[feri10]

واقعا لطف دارین آقای احمدی.
اگر لطف کنید هم مال اینفوپث هم قسمت ذخیره کردن را بگذارید خیلی ممنون میشم.
من چون خیلی کارم ضروریه فعلا موقت کارم را با وب پارت درست کردم ولی موقته. وقت هم ندارم نمی تونم رو ذخیره کردن وقت بگذارم.
بازم ممنون.

[fedoracore1]

با سلام
من از اسکریپت فوق استفاده کردم و جواب هم گرفتم
فقط موقع تایید آیتم در وظایف یا سایر لیست ها با پیغام زیر مواجه می شوم
چه باید کرد :
You must specify a valid date within the range of 1/1/1900 and 12/31/8900.

[feri10]

دوست عزیز این خطا به خاطر اینه که شیرپوینت نمیتونه تاریخ شمسی را ذخیره کنه.