Merge pull request #409 from tanthammar/DatePickerFirstWeekDay

DatePicker set first day of week and remove manual translation files
This commit is contained in:
Dan Harrin
2021-06-03 21:54:40 +01:00
committed by GitHub
20 changed files with 76 additions and 490 deletions
+2
View File
@@ -6,4 +6,6 @@ return [
'default_attachment_upload_route' => null,
'first_day_of_week' => 1, // 0 to 7 are accepted values, with Monday as 1 and Sunday as 7 or 0.
];
@@ -2,35 +2,6 @@
return [
'dateTimePicker' => [
'abbreviatedDays' => [
'friday' => 'الجمعة',
'monday' => 'الاثنين',
'saturday' => 'السبت',
'sunday' => 'الأحد',
'thursday' => 'الخميس',
'tuesday' => 'الثلاثاء',
'wednesday' => 'الأربعاء',
],
'months' => [
'april' => 'أبريل',
'august' => 'أغسطس',
'december' => 'ديسمبر',
'february' => 'فبراير',
'january' => 'يناير',
'july' => 'يوليو',
'june' => 'يونيو',
'march' => 'مارس',
'may' => 'مايو',
'november' => 'نوفمبر',
'october' => 'أكتوبر',
'september' => 'سبتمبر',
],
],
'multiSelect' => [
'emptyOptionsMessage' => 'لا توجد خيارات للاختيار من بينها.',
'noSearchResultsMessage' => 'لا توجد خيارات تطابق بحثك.',
@@ -2,35 +2,6 @@
return [
'dateTimePicker' => [
'abbreviatedDays' => [
'friday' => 'dv',
'monday' => 'dl',
'saturday' => 'ds',
'sunday' => 'dg',
'thursday' => 'dj',
'tuesday' => 'dt',
'wednesday' => 'dc',
],
'months' => [
'april' => 'Abril',
'august' => 'Agost',
'december' => 'Desembre',
'february' => 'Febrer',
'january' => 'Gener',
'july' => 'Juliol',
'june' => 'Juny',
'march' => 'Març',
'may' => 'Maig',
'november' => 'Novembre',
'october' => 'Octubre',
'september' => 'Setembre',
],
],
'multiSelect' => [
'emptyOptionsMessage' => 'No hi ha opcions disponibles',
'noSearchResultsMessage' => 'No s\'ha trobat cap opció que coincideixi amb la vostra cerca.',
@@ -2,35 +2,6 @@
return [
'dateTimePicker' => [
'abbreviatedDays' => [
'friday' => 'Fre',
'monday' => 'Man',
'saturday' => 'Lør',
'sunday' => 'Søn',
'thursday' => 'Tor',
'tuesday' => 'Tir',
'wednesday' => 'Ons',
],
'months' => [
'april' => 'April',
'august' => 'August',
'december' => 'December',
'february' => 'Februar',
'january' => 'Januar',
'july' => 'Juli',
'june' => 'Juni',
'march' => 'Marts',
'may' => 'Maj',
'november' => 'November',
'october' => 'Oktober',
'september' => 'September',
],
],
'multiSelect' => [
'emptyOptionsMessage' => 'Ingen muligheder at vælge imellem.',
'noSearchResultsMessage' => 'Ingen resultater der matcher din søgning.',
@@ -2,35 +2,6 @@
return [
'dateTimePicker' => [
'abbreviatedDays' => [
'friday' => 'Fr',
'monday' => 'Mo',
'saturday' => 'Sa',
'sunday' => 'So',
'thursday' => 'Do',
'tuesday' => 'Di',
'wednesday' => 'Mi',
],
'months' => [
'april' => 'April',
'august' => 'August',
'december' => 'Dezember',
'february' => 'Februar',
'january' => 'Januar',
'july' => 'Juli',
'june' => 'Juni',
'march' => 'März',
'may' => 'Mai',
'november' => 'November',
'october' => 'Oktober',
'september' => 'September',
],
],
'multiSelect' => [
'emptyOptionsMessage' => 'Es stehen keine Optionen zur Auswahl.',
'noSearchResultsMessage' => 'Keine Optionen passen zu Ihrer Suche.',
@@ -2,35 +2,6 @@
return [
'dateTimePicker' => [
'abbreviatedDays' => [
'friday' => 'Fri',
'monday' => 'Mon',
'saturday' => 'Sat',
'sunday' => 'Sun',
'thursday' => 'Thu',
'tuesday' => 'Tue',
'wednesday' => 'Wed',
],
'months' => [
'april' => 'April',
'august' => 'August',
'december' => 'December',
'february' => 'February',
'january' => 'January',
'july' => 'July',
'june' => 'June',
'march' => 'March',
'may' => 'May',
'november' => 'November',
'october' => 'October',
'september' => 'September',
],
],
'keyValue' => [
'buttons' => [
@@ -2,35 +2,6 @@
return [
'dateTimePicker' => [
'abbreviatedDays' => [
'friday' => 'Vie',
'monday' => 'Lun',
'saturday' => 'Sab',
'sunday' => 'Dom',
'thursday' => 'Jue',
'tuesday' => 'Mar',
'wednesday' => 'Mie',
],
'months' => [
'april' => 'Abril',
'august' => 'Agosto',
'december' => 'Diciembre',
'february' => 'Febrero',
'january' => 'Enero',
'july' => 'Julio',
'june' => 'Junio',
'march' => 'Marzo',
'may' => 'Mayo',
'november' => 'Noviembre',
'october' => 'Octubre',
'september' => 'Septiembre',
],
],
'keyValue' => [
'buttons' => [
@@ -2,35 +2,6 @@
return [
'dateTimePicker' => [
'abbreviatedDays' => [
'friday' => 'جمعه',
'monday' => 'دوشنبه',
'saturday' => 'شنبه',
'sunday' => 'یک شنبه',
'thursday' => 'پنج شنبه',
'tuesday' => 'سه شنبه',
'wednesday' => 'چهار شنبه',
],
'months' => [
'april' => 'اپریل',
'august' => 'آگست',
'december' => 'دیسیمبر',
'february' => 'فبیروری',
'january' => 'جنوری',
'july' => 'جلای',
'june' => 'جون',
'march' => 'مارچ',
'may' => 'می',
'november' => 'نوامبر',
'october' => 'آکتوبر',
'september' => 'سیپتمبر',
],
],
'keyValue' => [
'buttons' => [
@@ -2,35 +2,6 @@
return [
'dateTimePicker' => [
'abbreviatedDays' => [
'friday' => 'Ven',
'monday' => 'Lun',
'saturday' => 'Sam',
'sunday' => 'Dim',
'thursday' => 'Jeu',
'tuesday' => 'Mar',
'wednesday' => 'Mer',
],
'months' => [
'april' => 'Avril',
'august' => 'Août',
'december' => 'Decembre',
'february' => 'Février',
'january' => 'Janvier',
'july' => 'Juillet',
'june' => 'Juin',
'march' => 'Mars',
'may' => 'May',
'november' => 'Novembre',
'october' => 'Octobre',
'september' => 'Septembre',
],
],
'multiSelect' => [
'emptyOptionsMessage' => 'Aucune option à choisir.',
'noSearchResultsMessage' => 'Aucune option ne correspond à votre recherche.',
@@ -2,35 +2,6 @@
return [
'dateTimePicker' => [
'abbreviatedDays' => [
'friday' => 'Jum',
'monday' => 'Sen',
'saturday' => 'Sab',
'sunday' => 'Min',
'thursday' => 'Kam',
'tuesday' => 'Sel',
'wednesday' => 'Rab',
],
'months' => [
'april' => 'April',
'august' => 'Agustus',
'december' => 'Desember',
'february' => 'Februari',
'january' => 'Januari',
'july' => 'Juli',
'june' => 'Juni',
'march' => 'Maret',
'may' => 'Mei',
'november' => 'November',
'october' => 'Oktober',
'september' => 'September',
],
],
'multiSelect' => [
'emptyOptionsMessage' => 'Tidak ada opsi yang bisa dipilih.',
'noSearchResultsMessage' => 'Tidak ada opsi yang sesuai pencarian anda.',
@@ -2,35 +2,6 @@
return [
'dateTimePicker' => [
'abbreviatedDays' => [
'friday' => 'Ven',
'monday' => 'Lun',
'saturday' => 'Sab',
'sunday' => 'Dom',
'thursday' => 'Gio',
'tuesday' => 'Mar',
'wednesday' => 'Mer',
],
'months' => [
'april' => 'Aprile',
'august' => 'Agosto',
'december' => 'Dicembre',
'february' => 'Febbraio',
'january' => 'Gennaio',
'july' => 'Luglio',
'june' => 'Giugno',
'march' => 'Marzo',
'may' => 'Maggio',
'november' => 'Novembre',
'october' => 'Ottobre',
'september' => 'Settembre',
],
],
'multiSelect' => [
'emptyOptionsMessage' => 'Nessuna opzione disponibile.',
'noSearchResultsMessage' => 'Nessuna opzione trovata per la ricerca.',
@@ -2,35 +2,6 @@
return [
'dateTimePicker' => [
'abbreviatedDays' => [
'friday' => 'პარ',
'monday' => 'ორშ',
'saturday' => 'შაბ',
'sunday' => 'კვი',
'thursday' => 'ხუთ',
'tuesday' => 'სამ',
'wednesday' => 'ოთხ',
],
'months' => [
'april' => 'აპრილი',
'august' => 'აგვისტო',
'december' => 'სექტემბერი',
'february' => 'თებერვარი',
'january' => 'იანვარი',
'july' => 'ივლისი',
'june' => 'ივნისი',
'march' => 'მარტი',
'may' => 'მაისი',
'november' => 'ნოემბერი',
'october' => 'ოტქომბერი',
'september' => 'სექტემბერი',
],
],
'multiSelect' => [
'emptyOptionsMessage' => 'ჩანაწერების სია ცარიელია.',
'noSearchResultsMessage' => 'ამ პარამეტრებით არცერთი ჩანაწერი არ მოიძებნა.',
@@ -2,35 +2,6 @@
return [
'dateTimePicker' => [
'abbreviatedDays' => [
'friday' => 'Vrij',
'monday' => 'Maa',
'saturday' => 'Za',
'sunday' => 'Zo',
'thursday' => 'Don',
'tuesday' => 'Din',
'wednesday' => 'Woe',
],
'months' => [
'april' => 'April',
'august' => 'Augustus',
'december' => 'December',
'february' => 'Februari',
'january' => 'Januari',
'july' => 'Juli',
'june' => 'Juni',
'march' => 'Maart',
'may' => 'Mei',
'november' => 'November',
'october' => 'October',
'september' => 'September',
],
],
'multiSelect' => [
'emptyOptionsMessage' => 'Geen opties om te selecteren.',
'noSearchResultsMessage' => 'Er zijn geen resultaten voor je zoekopdracht.',
@@ -2,35 +2,6 @@
return [
'dateTimePicker' => [
'abbreviatedDays' => [
'friday' => 'Sex',
'monday' => 'Seg',
'saturday' => 'Sáb',
'sunday' => 'Dom',
'thursday' => 'Qui',
'tuesday' => 'Ter',
'wednesday' => 'Qua',
],
'months' => [
'april' => 'Abril',
'august' => 'Agosto',
'december' => 'Dezembro',
'february' => 'Fevereiro',
'january' => 'Janeiro',
'july' => 'Julho',
'june' => 'Junho',
'march' => 'Março',
'may' => 'Maio',
'november' => 'Novembro',
'october' => 'Outubro',
'september' => 'Setembro',
],
],
'multiSelect' => [
'emptyOptionsMessage' => 'Sem opções disponívels.',
'noSearchResultsMessage' => 'Nenhuma opção corresponde à sua pesquisa.',
@@ -2,35 +2,6 @@
return [
'dateTimePicker' => [
'abbreviatedDays' => [
'friday' => 'Пт',
'monday' => 'Пн',
'saturday' => 'Сб',
'sunday' => 'Вс',
'thursday' => 'Чт',
'tuesday' => 'Вт',
'wednesday' => 'Ср',
],
'months' => [
'april' => 'Апрель',
'august' => 'Август',
'december' => 'Декабрь',
'february' => 'Февраль',
'january' => 'Январь',
'july' => 'Июль',
'june' => 'Июнь',
'march' => 'Март',
'may' => 'Май',
'november' => 'Ноябрь',
'october' => 'Октябрь',
'september' => 'Сентябрь',
],
],
'multiSelect' => [
'emptyOptionsMessage' => 'не найдено вариантов для выбора.',
'noSearchResultsMessage' => 'не найдено результатов по вашему поиску.',
@@ -2,35 +2,6 @@
return [
'dateTimePicker' => [
'abbreviatedDays' => [
'friday' => 'Fre',
'monday' => 'Mån',
'saturday' => 'Lör',
'sunday' => 'Sön',
'thursday' => 'Tor',
'tuesday' => 'Tis',
'wednesday' => 'Ons',
],
'months' => [
'april' => 'April',
'august' => 'Augusti',
'december' => 'December',
'february' => 'Februari',
'january' => 'Januari',
'july' => 'Juli',
'june' => 'Juni',
'march' => 'Mars',
'may' => 'Maj',
'november' => 'November',
'october' => 'Oktober',
'september' => 'September',
],
],
'keyValue' => [
'buttons' => [
@@ -2,35 +2,6 @@
return [
'dateTimePicker' => [
'abbreviatedDays' => [
'friday' => '周五',
'monday' => '周一',
'saturday' => '周六',
'sunday' => '周日',
'thursday' => '周四',
'tuesday' => '周二',
'wednesday' => '周三',
],
'months' => [
'april' => '四月',
'august' => '八月',
'december' => '十二月',
'february' => '二月',
'january' => '一月',
'july' => '七月',
'june' => '六月',
'march' => '三月',
'may' => '五月',
'november' => '十一月',
'october' => '十月',
'september' => '九月',
],
],
'keyValue' => [
'buttons' => [
@@ -10,11 +10,15 @@
@endphp
@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/dayjs.min.js"></script>
<script src="https://unpkg.com/dayjs@1.10.4/locale/{{ (string) Str::of(app()->getLocale())->lower()->kebab() }}.js"></script>
<script src="https://unpkg.com/dayjs@1.10.4/plugin/customParseFormat.js"></script>
<script src="https://unpkg.com/dayjs@1.10.4/plugin/localeData.js"></script>
<script>
dayjs.extend(window.dayjs_plugin_customParseFormat)
dayjs.extend(window.dayjs_plugin_localeData)
dayjs.locale('{{ (string) Str::of(app()->getLocale())->lower()->kebab() }}')
function dateTimePicker(config) {
return {
@@ -28,6 +32,8 @@
emptyDaysInFocusedMonth: [],
firstDayOfWeek: config.firstDayOfWeek,
focusedDate: null,
focusedMonth: null,
@@ -129,6 +135,19 @@
this.focusedDate = this.focusedDate.add(1, 'week')
},
getDayLabels: function () {
const labels = dayjs.weekdaysShort()
if (this.firstDayOfWeek === 0) {
return labels
}
return [
...labels.slice(this.firstDayOfWeek),
...labels.slice(0, this.firstDayOfWeek),
]
},
getSelectedDate: function () {
let date = dayjs(this.value, this.format)
@@ -286,7 +305,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({
@@ -352,6 +371,7 @@
x-data="dateTimePicker({
autofocus: {{ $formComponent->isAutofocused() ? 'true' : 'false' }},
displayFormat: '{{ convert_date_format($formComponent->getDisplayFormat())->to('day.js') }}',
firstDayOfWeek: {{ $formComponent->getFirstDayOfWeek() }},
format: '{{ convert_date_format($formComponent->getFormat())->to('day.js') }}',
maxDate: '{{ $formComponent->getMaxDate() }}',
minDate: '{{ $formComponent->getMinDate() }}',
@@ -425,20 +445,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 +458,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 getDayLabels()" :key="index">
<div
x-text="day"
class="text-xs font-medium text-center text-gray-800"
@@ -11,6 +11,8 @@ class DatePicker extends Field
protected $displayFormat;
protected $firstDayOfWeek;
protected $format;
protected $hasSeconds = true;
@@ -27,6 +29,7 @@ class DatePicker extends Field
{
$this->configure(function () {
$this->displayFormat('F j, Y');
$this->resetFirstDayOfWeek();
$this->format('Y-m-d');
});
}
@@ -40,6 +43,19 @@ class DatePicker extends Field
return $this;
}
public function firstDayOfWeek($day = 1)
{
$this->configure(function () use ($day) {
if ($day < 0 || $day > 7) {
$day = $this->getDefaultFirstDayOfWeek();
}
$this->firstDayOfWeek = $day;
});
return $this;
}
public function format($format)
{
$this->configure(function () use ($format) {
@@ -49,11 +65,21 @@ class DatePicker extends Field
return $this;
}
protected function getDefaultFirstDayOfWeek()
{
return config('forms.first_day_of_week', 1);
}
public function getDisplayFormat()
{
return $this->displayFormat;
}
public function getFirstDayOfWeek()
{
return $this->firstDayOfWeek;
}
public function getFormat()
{
return $this->format;
@@ -100,4 +126,25 @@ class DatePicker extends Field
return $this;
}
public function resetFirstDayOfWeek()
{
$this->firstDayOfWeek($this->getDefaultFirstDayOfWeek());
return $this;
}
public function weekStartsOnSunday()
{
$this->firstDayOfWeek(7);
return $this;
}
public function weekStartsOnMonday()
{
$this->firstDayOfWeek(1);
return $this;
}
}
@@ -18,6 +18,8 @@ class DateTimePicker extends DatePicker
protected function setUp()
{
parent::setUp();
$this->configure(function () {
$this->displayFormat($this->defaultDisplayFormat);
$this->format($this->defaultFormat);