如何在Liferay Alloy UI中添加日期时间(datetime)输入类型？

好问题！我之前在项目里折腾过Alloy UI的表单组件，刚好能给你明确的答案：Liferay Alloy UI是支持同时包含日期和时间的输入类型的，下面给你两种常用的实现方式：

方式1：使用HTML5原生的datetime-local输入类型 #

Alloy UI的<aui:input>标签兼容HTML5的输入类型，你可以直接指定type="datetime-local"来生成带日期和时间选择的输入框：

<aui:input 
    label="选择日期和时间" 
    name="eventDatetime" 
    type="datetime-local" 
    value="2024-05-20T14:30"
/>

注意：datetime类型已经被HTML5标准弃用，推荐使用datetime-local，它会渲染成本地时区的日期时间选择器。

方式2：配置Alloy UI Datepicker组件支持时间选择 #

如果你需要更自定义的样式和交互，可以用Alloy UI的datepicker组件，通过开启timePicker属性来添加时间选择功能：

<aui:input name="scheduledTime" label="预约时间">
    <aui:validator name="date" />
    <aui:datepicker 
        timePicker="true" 
        timePickerIncrement="15" <!-- 设置时间步长为15分钟 -->
        format="%Y-%m-%d %H:%M" <!-- 自定义显示格式 -->
    />
</aui:input>

版本兼容性说明 #

在Liferay 7.1及以上版本，上述两种方式都能稳定工作。如果你使用的是更早的版本（比如6.x），可能需要结合YUI的原生时间选择组件做少量扩展，但核心思路是一致的。

虽然官方文档里没有单独把日期+时间的输入作为重点章节，但Alloy UI本身是基于YUI构建的，且兼容HTML5规范，所以这两种实现方式都是官方支持的，你可以放心测试使用。

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