Pikaday设置DD/MM/YYYY后二次打开解析为MM/DD/YYYY错误如何解决

这个问题是Pikaday默认使用JavaScript原生Date对象解析日期字符串，原生Date对DD/MM/YYYY格式的字符串会优先按照MM/DD/YYYY逻辑解析，就会出现你遇到的日月颠倒问题，你已经引入了Moment.js，直接用Moment做自定义解析即可解决。

<div
x-data="{ value: @entangle($attributes->wire('model')), picker: undefined }"
x-init="picker = new Pikaday({ 
    field: $refs.input, 
    format: 'DD/MM/YYYY', 
    parse: function(dateString) {
        return moment(dateString, 'DD/MM/YYYY').toDate();
    },
    onOpen() { 
        if (value) {
            this.setDate(moment(value, 'DD/MM/YYYY').toDate());
        }
    } 
})"
x-on:change="value = $event.target.value"
class="input-group pe-2"
>
<span class="input-group-text">
    <i class="fa-solid fa-calendar-days"></i>
</span>

<input
    {{ $attributes->whereDoesntStartWith('wire:model') }}
    x-ref="input"
    x-bind:value="value"
    class="form-control"
/>
</div>

• 新增了parse配置项：所有传入Pikaday的日期字符串都会强制用Moment按DD/MM/YYYY格式解析，从根源规避默认解析规则的问题
• 把Pikaday实例赋值给了x-data中声明的picker变量，避免重复初始化
• 调整了onOpen逻辑：仅在有值时用指定格式解析后再设置日期，不会出现格式识别错误

如果你的Livewire组件中存储的是标准YYYY-MM-DD格式的日期，需要给@entangle添加转换逻辑，保证前后端格式匹配，修改x-data中的value声明即可：

value: @entangle($attributes->wire('model')).transform(val => val ? moment(val, 'YYYY-MM-DD').format('DD/MM/YYYY') : '')

内容的提问来源于stack exchange，提问作者HeytalePazguato