opensource/filament
3
0
Fork 0
mirror of https://github.com/filamentphp/filament.git synced 2026-09-24 15:42:09 +08:00
Code Issues Packages Projects Releases Wiki Activity

Config for default first day of week.

Browse Source 
Remove the need for manual translation files
Set any weekday as first day of week
Defaults to app()->getLocale()
This commit is contained in:
tanthammar
2021-05-06 16:46:06 +02:00
parent cf186490c7
commit 965eeade87
3 changed files with 77 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/forms/config/forms.php
+2
View File
@@ -6,4 +6,6 @@ return [
'default_attachment_upload_route' => null,
'first-day-of-week' => 1, //0 to 7 are accepted values. Monday = 1, Sunday = 7 or 0.
];
packages/forms/resources/views/components/date-time-picker.blade.php
+13 -24
View File
@@ -12,9 +12,16 @@
@pushonce('filament-scripts:date-time-picker-component')
<script src="https://unpkg.com/dayjs@1.8.21/dayjs.min.js"></script>
<script src="https://unpkg.com/dayjs@1.8.21/plugin/customParseFormat.js"></script>
<script src="https://unpkg.com/dayjs@1.10.4/plugin/localeData.js"></script>
<script src="https://unpkg.com/dayjs@1.10.4/locale/{{ $formComponent->getLocale() ?? app()->getLocale() }}.js"></script>
<script>
dayjs.extend(window.dayjs_plugin_customParseFormat)
dayjs.extend(window.dayjs_plugin_localeData)
dayjs.locale('{{ $formComponent->getLocale() ?? app()->getLocale() }}')
const week = dayjs.weekdaysShort()
const weekDays = (n) => n == 0 ? week : [...week.slice(n), ...week.slice(0, n)]
function dateTimePicker(config) {
return {
@@ -54,6 +61,8 @@
value: config.value,
firstDayOfWeek: config.firstDayOfWeek,
clearValue: function () {
this.setValue(null)
@@ -286,7 +295,7 @@
setupDaysGrid: function () {
this.emptyDaysInFocusedMonth = Array.from({
length: this.focusedDate.date(1).day(),
length: this.focusedDate.date( 8 - this.firstDayOfWeek).day(),
}, (_, i) => i + 1)
this.daysInFocusedMonth = Array.from({
@@ -359,6 +368,7 @@
placeholder: '{{ __($formComponent->getPlaceholder()) }}',
required: {{ $formComponent->isRequired() ? 'true' : 'false' }},
time: {{ $formComponent->hasTime() ? 'true' : 'false' }},
firstDayOfWeek: {{ $formComponent->getFirstDayOfWeek() }},
@if (Str::of($formComponent->getBindingAttribute())->startsWith('wire:model'))
value: @entangle($formComponent->getName()){{ Str::of($formComponent->getBindingAttribute())->after('wire:model') }},
@endif
@@ -425,20 +435,7 @@
x-model="focusedMonth"
class="flex-grow p-0 text-lg font-medium text-gray-800 border-0 cursor-pointer focus:ring-0 focus:outline-none"
>
<template x-for="(month, index) in [
'{{ __('forms::fields.dateTimePicker.months.january') }}',
'{{ __('forms::fields.dateTimePicker.months.february') }}',
'{{ __('forms::fields.dateTimePicker.months.march') }}',
'{{ __('forms::fields.dateTimePicker.months.april') }}',
'{{ __('forms::fields.dateTimePicker.months.may') }}',
'{{ __('forms::fields.dateTimePicker.months.june') }}',
'{{ __('forms::fields.dateTimePicker.months.july') }}',
'{{ __('forms::fields.dateTimePicker.months.august') }}',
'{{ __('forms::fields.dateTimePicker.months.september') }}',
'{{ __('forms::fields.dateTimePicker.months.october') }}',
'{{ __('forms::fields.dateTimePicker.months.november') }}',
'{{ __('forms::fields.dateTimePicker.months.december') }}',
]">
<template x-for="(month, index) in dayjs.months()">
<option x-bind:value="index" x-text="month"></option>
</template>
</select>
@@ -451,15 +448,7 @@
</div>
<div class="grid grid-cols-7 gap-1">
<template x-for="(day, index) in [
'{{ __('forms::fields.dateTimePicker.abbreviatedDays.sunday') }}',
'{{ __('forms::fields.dateTimePicker.abbreviatedDays.monday') }}',
'{{ __('forms::fields.dateTimePicker.abbreviatedDays.tuesday') }}',
'{{ __('forms::fields.dateTimePicker.abbreviatedDays.wednesday') }}',
'{{ __('forms::fields.dateTimePicker.abbreviatedDays.thursday') }}',
'{{ __('forms::fields.dateTimePicker.abbreviatedDays.friday') }}',
'{{ __('forms::fields.dateTimePicker.abbreviatedDays.saturday') }}',
]" :key="index">
<template x-for="(day, index) in weekDays(firstDayOfWeek)" :key="index">
<div
x-text="day"
class="text-xs font-medium text-center text-gray-800"
packages/forms/src/Components/DatePicker.php
+62
View File
@@ -23,11 +23,16 @@ class DatePicker extends Field
protected $view = 'forms::components.date-time-picker';
protected string $locale;
protected int $firstDayOfWeek;
protected function setUp()
{
$this->configure(function () {
$this->displayFormat('F j, Y');
$this->format('Y-m-d');
$this->firstDayOfWeek = config('forms.first-day-of-week');
});
}
@@ -69,6 +74,16 @@ class DatePicker extends Field
return $this->minDate;
}
public function getFirstDayOfWeek()
{
return $this->firstDayOfWeek;
}
public function getLocale()
{
return $this->locale;
}
public function hasSeconds()
{
return $this->hasSeconds;
@@ -100,4 +115,51 @@ class DatePicker extends Field
return $this;
}
/**
* Default = app()->getLocale()
* DayJS i18 via browser: https://day.js.org/docs/en/i18n/loading-into-browser
* Available methods: https://day.js.org/docs/en/plugin/locale-data
* Supported locales: https://github.com/iamkun/dayjs/tree/dev/src/locale
* @param string $dayJSlocale
* @return $this
*/
public function locale(string $dayJSlocale): self
{
$this->locale = $dayJSlocale;
return $this;
}
/**
* 0 to 7 are allowed. Monday = 1, Sunday = 0 or 7
* @param int $day
* @return $this
*/
public function firstDayOfWeek(int $day = 1): self
{
if($day < 0 || $day > 7) $day = 1;
$this->firstDayOfWeek = $day;
return $this;
}
/**
* Set Sunday as first day of week
* @return $this
*/
public function weekStartSunday(): self
{
$this->firstDayOfWeek = 7;
return $this;
}
/**
* This method is otiose because Monday is default
* <br>But sometimes you want it for code readability
* @return $this
*/
public function weekStartMonday(): self
{
$this->firstDayOfWeek = 1;
return $this;
}
}