آموزش استفاده از jQuery DatePicker در کیک ۲ و تبدیل کامل تاریخ ها به فارسی

آموزش کار با box2D
۹۵/۰۳/۱۱
ایجاد دیکشنری یا همان تغییر زبان در کیک ۲
۹۵/۰۳/۱۲

آموزش استفاده از jQuery DatePicker در کیک ۲ و تبدیل کامل تاریخ ها به فارسی

به نام خدا

با سلام

بعضی وقتا هست که آدم این قدر کار اصلی و مهم داره که یهو می گه اونا رو بیخیال بیا بریم سراغ یه کار دیگه! الان همون موقست که من گفتم اونا رو بیخیال بریم آموزش بنویسیم.

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

برای راحتی بیشتر هم سورس کل پروژه و هم فایل pdf آموزش رو براتون ضمیمه می کنم که می تونید از زیر دانلود کنید.

دانلود سورس برنامه

دانلود سورس آموزش

در این آموزش برای فارسی کردن از کلاس pdate استفاده می کنیم. در کیک این کلاس به صورت کامپوننت و هلپر نوشته شده است که می توان با توجه به نیاز از آنها استفاده کرد. در این آموزش به مسائلی از قبیل کی، کجا و چگونگی استفاده از این کلاس ها پرداخته شده است. همچینین برای گرفتن بهترین نتیجه برای وارد کردن تاریخ از jQuery.datepicker استفاده خواهیم کرد. (تمام فایل های نام برده شده در این آموزش که به انضمام بسته اصلی کیک ۲.۱ در فایل ضمیمه موجود می باشند. توجه داشته باشید که تمام فایل ها در مکان های نام برده شده در پروژه هستند و شما می توانید با رفتن به مسیرهای گفته شده در آموزش به آنها دسترسی پیدا کنید). آموزش زیر برای درک بهتر یک به صورت یک CRUD بسیار ساده تهیه شده است که فقط نام کاربری و تاریخ تولد یک کاربر(تایرخ به صورت شمسی) را می گیرد و در دیتابیس ذخیره می کند و قابلیت های حذف، نمایش و ویرایش را نیز در اختیار کاربر قرار می دهد.

فایل دیتابیس مثال نیز در فایل ضمیمه قرار دارد(در پوشه CakePDate/Database/localhost.sql) که شما می بایست آن را وارد دیتابیس های خود نمائید و سپس از طریق فایل app/config/database.php تنظیمات دیتابیس را با توجه به سیستم خودتان تغییر دهید.

 

افزودن jQuery.datepicker به کیک:

در اولین مرحله می خواهیم فایل های مربوط به jQuery.datepicker را به برنامه اضافه کنیم. برای این کار ابتدا فایل های jquery-1.7.2.min.js ، jquery.ui.datepicker-fa.js و jquery-ui-1.8.20.custom.min.js که در بسته ضمیمه می باشند را در مسیر app/webroot/js کپی نمائید و سپس پوشه ui-lightness را نیز در app/webroot/css کپی نمائید. در آخرین مرحله نیز باید فایل JavascriptHelper.php را در مسیر app/view/Helper کپی نمایید.

حال نوبت شناساندن این فایل ها به کیک می باشد. این کار دو مرحله دارد. در مرحله اول شما باید به کیک بفهمانید که این فایل ها در پوشه webroot قرار گرفته اند. برای این کار فایل default.ctp را که در مسیر app/view/Layouts می باشد را باز کرده و کدهای زیر را در تگ head این فایل کپی نمائید.

{codecitation}

echo $this->Html->css(‘ui-lightness/jquery-ui-1.8.20.custom’);

echo $this->Html->script(‘jquery-1.7.2.min’);

echo $this->Html->script(‘jquery-ui-1.8.20.custom.min’);

echo $this->Html->script(‘jquery.ui.datepicker-fa’);

{/codecitation}

اکنون کافی است که مانند استفاده از سایر کامپوننت ها و هلپرها، به کیک بگویید که قصد استفاده از کتابخانه JavaSciptرا نیز دارید. برای این کار نیز کد زیر را در Controllerمورد نظر خود قرار دهید.

{codecitation}

var $helpers= array(‘Form’, ‘Time’, ‘Html’, ‘Session’, ‘Javascript’);

{/codecitation}

البته چند گزینه اول هلپرهایی هستند که کیک به صورت پیش فرض به برنامه اضافه می کند و شما می توانید فقط ‘Javascript’را به این لیست اضافه نمائید.

استفاده از datepickerدر کیک:

در این قسمت نوبت به اضافه کردن datepickerبه viewمورد نظر در کیک هست. این کار بسیار ساده هست. کافی هست کد زیر در قسمتی (من این کد را معمولاً در انتهای viewاضافه می کنم) از Viewاضافه کنید.

{codecitation}

echo $this->Javascript->datepicker(‘#UserBirthDate’,

array(‘changeMonth’ => ‘true’, ‘changeYear’ => ‘true’,

      ‘yearRange’ => ‘”1300:1370″‘, ‘dateFormat’ => ‘”yy/mm/dd”‘));

{/codecitation}

در کد پارامتری وجود دارد که به “#” مشخص شده است. این قسمت با فرمت مشخص شده ابتدا نام فرم را می گیرد و سپس نام فیلدی که قرار است با کلیک برروی آن datepicker ظاهر شود. سایر پارمترها هم که کاملاً مشخص هستند و با تغییر آنها می توانید، تغییرات را به راحتی مشاهده کنید.

با این کار شما تنها توانسته اید که تاریخ را به صورت فارسی در یک فیلد نمایش دهید. بهتر و منطقی تر است که شما تاریخ را در دیتابیس به صورت انگلیسی و با فرمت Date ذخیره نمائید. برای این منظور نیز می بایست در کنترلر مورد نظر دیتای مربوط به فرم را گرفته و برروی فیلد حاوی تاریخ اعمالی را انجام دهید که در زیر به آنها اشاره خواهد شد. این کار با استفاده از کلاس pdate امکان پذیر است که شما در کیک می بایست از این کلاس به صورت هلپر و کامپوننت استفاده نمایئد. در ادامه به نحوه استفاده از این کلاس می پردازیم.

استفاده از کلاس pdate:

این کلاس یک کلاس بسیار خوب برای تبدیل تاریخ شمسی به میلادی و برعکس می باشد که آقای آرش همت آن را به صورت کامپوننت و هلپر قابل استفاده برای کیک درآورده اند و بنده نیز با کمی تغییر در این کلاس نحوه کار با این کلاس را در ادامه این مطلب برای شما شرح خواهم داد.

مانند تمام کامپوننت ها و هلپرها در ابتدا شما می بایست این کامپوننت و هلپر را به برنامه خود اضافه کنید.

یادآوری: یادتان باشد که PersiandateHelper را در مسیرapp/view/Helper قرار دهید و PersiandateComponent را نیز در مسیر app/controller/Component قرار دهید.

برای اضافه کردن این دو کلاس کافی است کدهای زیر را به کنترلر خود اضافه نمائید.

{codecitation}

var $helpers = array(‘Form’, ‘Time’, ‘Html’, ‘Session’, ‘Persiandate’, ‘Javascript’);

      var $components = array(‘Session’,’RequestHandler’, ‘Persiandate’);

{/codecitation}

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

نحوه ذخیره تاریخ فارسی در دیتابیس با استفاده از PersiandateComponent:

در اینجا می خواهید تاریخی را که در قسمت قبل با استفاده از datepicker را فرم قرار داده ایم را در دیتابیس به صورت میلادی ذخیره کنیم. برای این کار شما می بایست این سه خط کد را در متد Add کنترلر خود و قبل از قسمتی که دیتای فرم را ذخیره می کنید قرار دهید.

{codecitation}

$bdate = $this->request->data[‘User’][‘birth_date’];

$bDate2 = $this -> Persiandate -> stringToGregorianDate($bdate);

$this->request->data[‘User’][‘birth_date’] = $bDate2;

{/codecitation}

خط اول که مربوط به انتساب دیتای فیلد birth_date فرم در متغیر $bdate می باشد. با استفاده از متد stringToGregorianDate که خودم به کلاس pdate اضافه کرده ام شما می توانیدرشته(دیتا)ی مورد نظر را به فرمت استاندارد تاریخ تبدیل نمائید.

در آخرین خط هم که دیتای مربوط به تاریخ را مقدار دهی می کنیم تا به صورت مورد نظر در دیتابیس ذخیره شود.

نمایش تاریخ با استفاده از PersiandateHelper:

در اینجا نوبت به نمایش تاریخ می رسد که طبیعاً در این قسمت نوبت به استفاده از هلپر می رسد. نمایش دادن تاریخ با استفاده از PersiandateHelper نیز بسیار ساده است. تنها کافی است که مانند کد زیر پارامتر وردوی متد strtotime را برابر با تاریخ مورد نظرتان قرار دهید.

{codecitation}

echo $this->Persiandate->pdate(‘Y/m/d’, strtotime($user[‘User’][‘birth_date’]));

{/codecitation}

با استفاده از این کد در هر جایی که نیاز به نمایش تاریخ داشته باشید می توانید به راحتی تاریخ را نمایش دهید.

موفق و پیروز باشید

امیر درجه ۵.۳.۹۱

پاسخ دهید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

*ضروری