چگونه می توان فرمت تاریخ را در Laravel و jQuery UI DatePicker تغییر داد

13 خرداد 1398, خواندن در 3 دقیقه

یکی از تغییرات رایج در پروژه‌های وب، سازگارسازی آن با یک ناحیه جغرافیایی خاص است؛ مثلا زبان و منطقه زمانی آن. اما جدا از این دو مورد، قالب تاریخ نیز مهم است، که می‌تواند در بخش‌های مختلف دنیا، متفاوت باشد. اما چگونه آن را در لاراول به درستی مدیریت کنیم؟

1.  Blade و jQuery: فرمی برای ثبت مخارج

فرض کنید که فرمی برای ثبت مخارج، با فیلدی به نام exprenses.entry_date در دیتابیس آن داریم، و این فیلد در قالب معمولی روز - ماه - سال است؛ مثلا 29/01/1983.

اما در سمت Frontend، می‌خواهیم کاربرانمان با قالب‌بندی آمریکایی، یعنی سال - روز - ماه کار کنند؛ مثلا 1983/29/01.

در فایل Blade خود، در ابتدا یک فیلد اضافه می‌کنیم و رابط کاربری انتخاب تاریخjQuery  خود را راه‌اندازی می‌کنیم.

<label for="entry_date">Entry date</label>
<input class="form-control date" name="entry_date" type="text">

بعد از آن نیز به رابط کاربری انتخاب تاریخjQuery  خود، مقداری کد JavaScript اضافه می‌کنیم:

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
    $( function() {
        $('.date').datepicker();        
    });
</script>

حال باید چنین چیزی را ببینیم:

تنها کاری که باید برای اعمال قالب مورد نظر به بخش انتخاب تاریخ انجام دهیم، اضافه کردن پارامتر قالب است:

$('.date').datepicker({
    format: 'mm/dd/yy'
});

در جهت زیباتر کردن آن، بیایید آن را به فایل config/app.php اضافه کنیم:

[
    // ...
    'date_format_js' => 'mm/dd/yy',
    // ...
]

و سپس از آن در Blade استفاده کنیم:

$('.date').datepicker({
    format: '{{ config('app.date_format_js') }}'
});

2. ذخیره‌سازی داده‌ها

حال اگر فرم را تایید کنیم، با این خطا مواجه خواهیم شد:

SQLSTATE[22007]: Invalid datetime format: 1292 Incorrect date value: '07/25/2018' 
for column 'entry_date' at row 1

MySQL می‌خواهد تاریخ را در قالب اصلی خود، یعنی روز - ماه - سال ذخیره کند. پس بیایید قبل از ذخیره مقدار، آن را تغییر شکل دهیم. برای انجام این کار، یک متد تغییر دهنده در مدل app/Expense.php اضافه می‌کنیم:

public function setEntryDateAttribute($input)
{
    $this->attributes['entry_date'] = 
      Carbon::createFromFormat(config('app.date_format'), $input)->format('Y-m-d');
}

و حال بیایید یک مقدار جدید در فایل config/app.php اضافه کنیم:

[
    // ...
    'date_format' => 'm/d/Y',
    'date_format_js' => 'mm/dd/yy',
    // ...
]

نکته: ما دو متغیر متفاوت داریم؛ زیرا PHP و JavaScript قوانین مختلفی برای قالب‌بندی تاریخ دارند.

و به این صورت، می‌توانیم تاریخ مربوطه را به درستی در دیتابیس خود ذخیره کنیم.

3. مشاهده / ویرایش تاریخ

اگر می‌خواهید مقدار تاریخ مخارج را در یک جدول نمایش دهید، یا فرم ویرایش را پر کنید، همان قالب دیتابیس را خواهید گرفت. اگر می‌خواهید آن را تغییر شکل دهید، می‌توانید یک متد دسترسی به مدل app.Expense.php اضافه کنید:

public function getEntryDateAttribute($input)
{
    return Carbon::createFromFormat('Y-m-d', $input)
      ->format(config('app.date_format'));
}

پس در فرم ویرایش، چنین چیزی خواهید داشت:

با راه‌اندازی این موارد، می‌توانید تنها با تغییر مقادیر در فایل config/app.php، قالب بصری را به هر چیزی که می‌خواهید تغییر دهید.

اما اگر می‌خواهید کاربرانتان در مکان‌های مختلف دنیا، قالب‌های مختلفی ببینند، حتی می‌توانید از این نیز یک قدم جلوتر بروید و قالب تاریخ را برای هر کاربر، به صورت جداگانه ذخیره کنید. دیتابیس آن را به صورت روز - ماه - سال ذخیره می‌کند؛ شما فقط باید با بخش نمایش آن بازی کنید.

منبع

چه امتیازی به این مقاله می دید؟
خیلی بد
بد
متوسط
خوب
عالی

دیدگاه‌ها و پرسش‌ها

برای ارسال دیدگاه لازم است، ابتدا وارد سایت شوید.

در حال دریافت نظرات از سرور، لطفا منتظر بمانید

در حال دریافت نظرات از سرور، لطفا منتظر بمانید

آفلاین
user-avatar
عرفان کاکایی @er79ka
دنبال کردن

گفتگو‌ برنامه نویسان

بخشی برای حل مشکلات برنامه‌نویسی و مباحث پیرامون آن وارد شو