能否在Alpine.js中实现日期同步：当date1大于date2时将date2设为date1？

当然可以在Alpine.js中实现这个需求，核心思路是监听date1的变化，一旦它的日期晚于date2，就自动把date2同步成和date1一样的日期。

修改后的代码 #

<html>
<head>
    <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
</head>
<body>
    <div x-data="{ date1: '2023-03-14', date2: '2023-03-14' }" x-init="$watch('date1', (newVal) => {
        if (new Date(newVal) > new Date(date2)) {
            date2 = newVal;
        }
    })">
        date1: <input type="date" x-model="date1">
        <br><br>
        date2: <input type="date" x-model="date2" :min="date1">
        <br><br>
    </div>
</body>
</html>

逻辑说明 #

• 用x-init结合$watch函数监听date1的变化，每次date1更新时触发回调逻辑。
• 将两个日期字符串转为Date对象进行比较，若新的date1日期晚于date2，直接把date2的值设置为date1的新值。
• 保留原有的:min="date1"属性，确保用户手动选择date2时无法选早于date1的日期，和自动同步逻辑形成互补，双重保障需求效果。

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