Phoenix Datepicker 仅显示可用日期

Question

我正在使用 Phoenix 框架开发一个简单的预订系统。目前，我有一条新预订路线，显示了一个日期选择器，它从具有以下属性的 "booking" 模型中获取值：

:time, Ecto.DateTime
:description, :string
belongs_to :user, Test.User

当我前往 "bookings/new" 时，我的表格会正确显示，我可以选择任何我想要的日期。但是，我现在正在尝试弄清楚如何从选择器中删除不可用的日期。

据我所知，该表单从 ecto 的 DateTime 原始类型中获取值，但是来自 OOP 背景我无法弄清楚我需要更新什么资源才能删除不可用的日期。我必须创建自定义类型吗？

提前致谢

Answer 1

您不能在默认 DateTime 选择器中屏蔽任意日期。您可以限制范围（例如，将年份限制为 1234 到 1243 或将月份限制为一月到六月），但由于它们是独立的 <select> 输入，您无法隐藏特定组合。我能想到的两种解决方法是：

在服务器上进行验证。如果需要，您可以在用户选择后立即使用 AJAX 进行验证，无需刷新页面。
使用JavaScript限制范围，阻止使用自定义 JS 选择拍摄日期，或使用现有的、完整的 DatePicker/Calendar 库。

Answer 2

我来晚了，但我希望它能帮助别人；在表单上使用 date_select 时可以使用 builder 选项。

<%= date_select f, :time, builder: fn b -> %>
      <%= b.(:day, prompt: "Date") %> /
      <%= b.(:month, prompt: "Month") %> /
      <%= b.(:year, prompt: "Year") %>
    <% end %>

如果您只需要日、月和年，您可以通过这种方式自定义它。你也可以对时间做同样的事情。

Phoenix Datepicker 仅显示可用日期

Phoenix Datepicker to only show available dates

datepicker

elixir

dynamic-forms

ecto

phoenix-framework