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

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

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، قالب بصری را به هر چیزی که می‌خواهید تغییر دهید.

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

منبع