Livewire ScreenCast date value format

#1

lsc
lsc933×369 17.4 KB

When I choose date, my value is not in MM/DD/YYYY format?

 <div 
            x-data="{ value: @entangle('birthday') }"
            x-init="new Pikaday({ field: $refs.input, format: 'MM/DD/YYYY' })"
            x-on:change="value = $event.target.value"     

            class="grid grid-cols-3 gap-6">
                <div class="col-span-3 sm:col-span-2">
                    <label for="company_website" class="block text-sm font-medium text-gray-700">
                        Birthday
                    </label>
                    <div class="mt-1 flex rounded-md shadow-sm">
                    <input 
                        x-bind:value="value" 
                        x-ref="input"

                        type="text" name="company_website" id="company_website" class="focus:ring-indigo-500 focus:border-indigo-500 flex-1 block w-full rounded-none rounded-r-md sm:text-sm border-gray-300" placeholder="MM/DD/YYYY">
                        @error('birthday')
                        <p class="text-red-500 mt-1">{{ $message }}</p>
                        @enderror
                    </div>
                </div>
            </div>
#2

Hi!
This works me fine:
I tested with MM/DD/YYYY as well it works.

image
image479×596 28.6 KB

image

<input
x-data
x-ref="{{$id}}"
name="{{$id}}"
wire:model.lazy="{{$id}}"
x-init="
moment.locale(‘hu’);
var daDate = {
previousMonth: ‘Előző hónap’,
nextMonth: ‘Következő hónap’,
months: moment.localeData()._months,
weekdays: moment.localeData()._weekdays,
weekdaysShort: moment.localeData()._weekdaysShort
};
new Pikaday({ field:$refs.{{$id}}, firstDay: 1, format:‘YYYY.MM.DD’, showWeekNumber:true, i18n: daDate, })"
@change="$dispatch(’{{$id}}’,$event.target.value)"
type=“text”
autocomplete=“off”
{{ $attributes }}
/>

1 Like
#3

Does it help?
BTW during loading you can format and before saving also the date field. eg. for me it was important, that in the DB I have valid date instead of NULL. for starting date I’m using 1901-01-01 and for end 2099-12-31 so i can query easyli the between date situations. If I rendeer the form I’m claering the value for empty.
So it looks nice in the grid.

1 Like
#4

Tnx for the reply, but I dont know to do in this way. I will post question to Caleb code for that episode.

1 Like
#5

What is the {{$id}} ? Is that birthday from component or controller?

#6

I made for me input component.
the $id is the public variable “vat_valid_from” name from the controller

I’m invoking in the create.blade.php like this:
div class=“md:w-1/2 px-3 mb-6”
label class=“block tracking-wide text-gray-700 text-xs font-bold mb-2” for=“vat_valid_from”>
valid from
/label
–componet starts:
x-input.pikaday
id=“vat_valid_from”
placeholder=“1901-01-01”
class=“styling…”
/x-input.pikaday>
@error(‘vat_valid_from’) {{ $message }}@enderror
/div

The previous code makes the x-input.pikaday component working

in the layout file at the end:
@livewireScripts


I loaded the 2 requested JS files.

I hope it works for You too.
I suffered on it 2 days to get working :slight_smile:

1 Like
#7

When page is loaded my format is 12/08/20, but when I choose value format is chaged to Sat Dec 12 2020 ****

#8

Sorry 2 files
script src="{{ asset(‘js/moment.min.js’) }}"
script src="{{ asset(‘js/pikaday.min.js’) }}"

1 Like
#9

Try to load the 2 JavaScript files. The moment is for manipulating the date
https://momentjs.com/

#10

I allready have src=“https://unpkg.com/moment”

#11

sccccccccccccccccccccccc

I could leave that value, but the problem is that hover my calendar.

#12

Maybe try to change in the html the field to date.

#13

Nope I try raw version, and format dont working:

<div 
            x-data=""
            x-init="new Pikaday({ field: $refs.input, format: 'MM/DD/YYYY' })"  
            class="grid grid-cols-3 gap-6"
            >
                <div class="col-span-3 sm:col-span-2">
                    <label for="birthday" class="block text-sm font-medium text-gray-700">
                        Birthday
                    </label>
                    <div class="mt-1 flex rounded-md shadow-sm">
                    <input 
                        wire:model.lazy="birthday"
                        x-ref="input"
                        id="birthday"
                        type="text"
                        class="focus:ring-indigo-500 focus:border-indigo-500 flex-1 block w-full rounded-none rounded-r-md sm:text-sm border-gray-300" placeholder="MM/DD/YYYY"
                        >
                        @error('birthday')
                        <p class="text-red-500 mt-1">{{ $message }}</p>
                        @enderror
                    </div>
                </div>
            </div>
#14

What @calebporzio think about this situation?