java - CQ-使用 xtype ="datetime"以原始字符串形式获取日期和时间

Question

我对 CQ 还很陌生，我正在向现有表单添加一个新字段。我想接受组件对话框中的日期和时间作为字符串。如果我分别使用 xtype="datefield"和 xtype="timefield"，我可以按照我需要的方式将日期和时间作为字符串获取。但是，用户界面看起来很糟糕并且不直观，有两个单独的字段一个放在另一个字段下面。

dialog.xml:

<startDate
    jcr:primaryType="cq:Widget"
    fieldLabel="Event Start Date"
    fieldDescription="Select a date "
    emptyText="Event start date "
    name="./startDate"
    format="d/m/Y"
    xtype="datefield" />
<startTime
    jcr:primaryType="cq:Widget"
    fieldLabel="Event Start Time"
    fieldDescription="Select a time "
    emptyText="Event start time "
    name="./startTime"
    xtype="timefield" />

Controller 中的Java代码:

@Property(path = "startDate")
private String startDate;

@Property(path = "startTime")
private String startTime;

如果我使用 xtype="datetime"，UI 看起来就是我喜欢的方式，但值会转换为 UTC 到日期字段中。

dialog.xml

<startDateTime
   jcr:primaryType="cq:Widget"
   fieldLabel="Start Date &amp; Time"
   name="./startDateTime"
   dateFormat="d/m/Y"
   xtype="datetime"/>

Controller 中的Java代码:

@Property(path = "startDateTime")
private Date startDateTime;

这对我来说没有用，因为我需要日期和时间作为原始字符串，即它们的输入方式。以字符串形式获取日期和时间的需求是由以下要求驱动的:“作者应该能够输入事件在特定城市开始和结束的特定日期和时间”。因此，作者输入了事件的日期、时间和时区。我需要在页面上显示日期和时间，并添加日历链接。 valueAsString 选项看起来很有希望，但没有以字符串形式提供日期和时间。我怎样才能实现这个目标？

提前致谢

更新:使用@Sharath 建议的 xtype="compositefield"，我可以实现所需的 UI，但不幸的是，当我编辑组件时，这些值被保留。输入的值准确，我可以将其显示在屏幕上，但是当编辑组件时，字段会恢复为空。 java 文件没有发生任何变化。

更新了dialog.xml:

<items jcr:primaryType="cq:WidgetCollection">
    <eStart jcr:primaryType="cq:Widget"
            xtype="compositefield"
            fieldLabel="Start"
            fieldDescription="Select event start date &amp; time">
        <items jcr:primaryType="cq:WidgetCollection">
            <startDate
                jcr:primaryType="cq:Widget"
                emptyText="Event start date "
                name="./startDate"
                format="d/m/Y"
                xtype="datefield"
                width="240"/>
            <startTime
                jcr:primaryType="cq:Widget"
                emptyText="Event start time "
                name="./startTime"
                xtype="timefield"
                width="180"/>
        </items>
    </eStart>
     *
     *
</items>

Answer 1

有两种方法可以做到这一点:

1) 使用 compositefield并将日期和时间字段放入其中。 Compositefield 在水平行中显示其中的小部件。使用此方法，字段将像日期时间 xtype 一样显示，但仍将值独立存储为字符串。

2) 使用 datetime xtype 并将值读取为字符串而不是日期，并按“T”分割该值。 (我会选择 1)

我认为我对复合字段的看法是错误的，它显示并存储值，但下次不会读回这些值(尽管对返回这些值的节点发出了 get 请求)

这是一个替代方案

{
  xtype:"panel",
  border:false,
  layout:"hbox",
  jcr:  primaryType:"cq:Widget",
  items:{
    jcr:    primaryType:"cq:WidgetCollection",
    label:{
      flex:"30",
      xtype:"label",
      jcr:      primaryType:"cq:Widget",
      text:"Date Time"
    },
    datefield:{
      flex:"40",
      xtype:"datefield",
      name:"./date",
      jcr:      primaryType:"cq:Widget"
    },
    timefield:{
      flex:"30",
      xtype:"timefield",
      name:"./time",
      jcr:      primaryType:"cq:Widget"
    }
  }
}