Datepicker: implement change of firstDayOfWeek

[silviokennecke]

Short summary

Currently the first day of the week for the datepicker is always set to Sunday. This PR allows you to change the first day of the week.

What does this PR exactly to?

It adds a new configuration firstDayOfWeek. The value is an integer between 0 (Sunday) and 6 (Saturday). The default is 0.

Example code

<!-- date-picker-example.blade.php -->
<div>
    <form wire:submit.prevent="save">
        <!-- change first day to monday -->
        <x-datetime-picker
            first-day-of-week="1"
        />
    </form>
</div>

Associated issues

• datetimepicker first day of week #226
• Add monday first day support #319

Documentation

The documentation has been updated. See https://github.com/wireui/docs/pull/40

[alonsofdez23]

When implement this feature? I need this! 😄

[silviokennecke]

Hi @alonsofdez23, last week I noticed the issue #502.
According to that, new features for v1 will not be processed until v2 is released.

Anyway, I plan to create a second PR for v2, so the feature is probably directly included in v2.

[nohumans]

Hi!
Until v2.

npm install flatpickr --save

app.js

import flatpickr from "flatpickr";
import { Spanish } from "flatpickr/dist/l10n/es"

(select your language...)

app.css

@import 'flatpickr/dist/flatpickr.css';

Create a simple component (no code for display errors...)
components\input\datepicker.blade.php

php
$options = array_merge([
'dateFormat' => 'Y-m-d h:i K',
'enableTime' => true,
'altFormat' => 'j F Y',
'altInput' => false,
'locale' => 'es',
], $options);
@endphp


<div class="@if($disabled) opacity-60 @endif">
    @if ($label )
    <div class="flex {{ !$label ? 'justify-end' : 'justify-between items-end' }} mb-1">
        @if ($label)

        @endif
        <p class="block text-sm font-medium text-gray-700 dark:text-gray-400 ">{{ $label }}</p>

    </div>
    @endif

    <div wire:ignore class="relative">
        <input x-data="{
             value: @entangle($attributes->wire('model')), 
             instance: undefined,
             init() {
                 $watch('value', value => this.instance.setDate(value, false));
                 this.instance = flatpickr(this.$refs.input, {{ json_encode((object)$options) }});
             }
        }" x-ref="input" x-bind:value="value" type="text" {{ $attributes->merge(['class' => 'form-input w-full
        placeholder-secondary-400 dark:bg-secondary-800 dark:text-secondary-400 dark:placeholder-secondary-500 border
        border-secondary-300 focus:ring-primary-500 focus:border-primary-500 dark:border-secondary-600 form-input block
        w-full sm:text-sm rounded-md transition ease-in-out duration-100 focus:outline-none shadow-sm']) }}
        autocomplete="off" placeholder = {{ $placeholder }}
        />
        <div class="absolute inset-y-0 right-0 pr-2.5 flex items-center pointer-events-none text-secondary-400">
            <x-dynamic-component :component="WireUi::component('icon')" name="calendar" class="w-5 h-5" />
        </div>
    </div>
</div>
´´´

That is all!!!


<img width="464" alt="Captura de pantalla 2023-06-13 a las 7 12 33" src="https://github.com/wireui/wireui/assets/10484641/2fc4a067-a05c-4b64-82bb-01be9133c459">

[joaopalopes24]

This was implemented in v2 stable.