تنظیم مقدار پیشفرض در Persian DatePicker

سلام

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

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

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

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

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

کتابخونه Persian DatePicker یه تابع داره به نام setDate این تابع عدد timestamp رو می‌گیره و با فرمتی که از قبل برای فیلد تعیین شده توی فیلد نمایش میده. یعنی مثلا: عدد ۱۳۸۲۲۷۶۰۹ (عدد رو از داکیومنت همین تابع آوردم) رو اگه بخوایم با فرمت YYYY-MM-DD HH:MM نمایش بدیم، میشه: ۱۷:۰۴ ۲۸-۰۷-۱۳۹۲.

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

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

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

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

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

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

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

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

ممکنه بعد از اینکه زمان رو تنظیم کردید، زمان ۳ ساعت و ۳۰ دقیقه جلوتر باشه. این بخاطر شمسی سازی زمان ها توی سایتتون هست و باید عدد ۱۲۶۰۰۰۰۰ رو از این مقدار کم کنید. یعنی خط سوم کد رو به این شکل بنویسید:

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

دقت کنید که حواستون به اولویت عملگرها باشه و اگه عدد ۱۲۶۰۰۰۰۰ رو قبل از ضرب بزارید، عدد ۱۲۶۰۰۰۰۰ در ۱۰۰۰ ضرب میشه.