Skip to content

سلام

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

استفاده از داکیومنت Persian DatePicker

توی داکیومنت‌های Persian DatePicker نوشته که مقدار فیلد رو بصورت سال-ماه-روز(YYYY-MM-DD) وارد کنید. همچنین توی کدهای جاوااسکریپت initialValueType رو برابر persian یا gregorian بزارید. تا اینجا همه چی اوکیه، اما اگه شما بخواید از قابلیت ساعت این کتابخونه هم استفاده کنید دیگه استفاده از این راه بدرد نمیخوره و کار نمیکنه.(شایدم من نتونستم ازش سر در بیارم که چطوره)

راه حل جایگزین

این راه حل نیازمند استفاده از timestamp هست. بصورت کلی استفاده از timestamp بجای استفاده از تاریخ های رشته‌ای(استرینگ) استانداردتر و بهتر هست. با استفاده از عدد تایم‌استمپ، میشه تاریخ و ساعت رو با هر فرمتی که بخوایم نمایش بدیم

کتابخونه Persian DatePicker یه تابع داره به نام setDate این تابع عدد timestamp رو می‌گیره و با فرمتی که از قبل برای فیلد تعیین شده توی فیلد نمایش میده. یعنی مثلا: عدد 138227609 (عدد رو از داکیومنت همین تابع آوردم) رو اگه بخوایم با فرمت YYYY-MM-DD HH:MM نمایش بدیم، میشه: 17:04 28-07-1392.

خب حالا فقط کافیه این دو مقدمه رو با هم ترکیب کنیم و کد رو بنویسیم.

از اونجایی که می‌خوایم تنظیم مقدار پیشفرض بصورت داینامیک باشه، توی data اون فیلد مقدار تایم‌استمپ رو سیو میکنم.کد HTML:

<input type="text" name="" id="" class="mj_pdp" value="" data-timestamp="138227609">

توجه داشته باشید که توی JS مقدار تایم‌استمپ تا میلی ثانیه هست اما توی PHP تا ثانیه. بخاطر همین شما اگه میخواید مقدار تایم‌استمپ رو از PHP به JS درست نمایش بدید باید در 1000 ضرب کنید.

نکته دوم: نباید عدد تایم‌استمپ رو توی value بریزید. چون کتابخونه مقدار رو به عنوان یه مقدار ناشناس شناسایی میکنه و اونو حذف میکنه اما اگه توی یه data ذخیرش کنید باهاش کاری نداره.

خب حالا که مقدار رو ذخیره کردیم باید با استفاده از JS اونو توی انتخابگر نمایش بدیم:

$('.mj_pdp').each(function(index, e) {
	var pd = $(e).persianDatepicker();
	pd.setDate($(e).attr('data-timestamp')*1000);
});

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

ممکنه بعد از اینکه زمان رو تنظیم کردید، زمان 3 ساعت و 30 دقیقه جلوتر باشه. این بخاطر شمسی سازی زمان ها توی سایتتون هست و باید عدد 12600000 رو از این مقدار کم کنید. یعنی خط سوم کد رو به این شکل بنویسید:

pd.setDate($(e).attr('data-timestamp')*1000-12600000);

دقت کنید که حواستون به اولویت عملگرها باشه و اگه عدد 12600000 رو قبل از ضرب بزارید، عدد 12600000 در 1000 ضرب میشه.

محمدجعفر خواجه

سال 93 شروع به یادگیری و برنامه نویسی وب کردم. دو سال بعد شروع به یادگیری برنامه نویسی وردپرس کردم. سال 97 برای دانشگاه قبول شدم و زندگی توی یه شهر دیگه هزینه‌هایی داشت. تصمیم گرفتم شروع به پروژه گرفتن کنم و از اونجا بود که برنامه نویسی وردپرس رو بصورت حرفه‌ای دنبال کردم.

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد.

این سایت از اکیسمت برای کاهش هرزنامه استفاده می کند. بیاموزید که چگونه اطلاعات دیدگاه های شما پردازش می‌شوند.