diff --git a/DataRoom/dataroom-core/src/main/java/com/gccloud/dataroom/core/module/chart/components/ScreenDateTimePickerChart.java b/DataRoom/dataroom-core/src/main/java/com/gccloud/dataroom/core/module/chart/components/ScreenDateTimePickerChart.java index 1a9deefb..28242c92 100644 --- a/DataRoom/dataroom-core/src/main/java/com/gccloud/dataroom/core/module/chart/components/ScreenDateTimePickerChart.java +++ b/DataRoom/dataroom-core/src/main/java/com/gccloud/dataroom/core/module/chart/components/ScreenDateTimePickerChart.java @@ -43,6 +43,9 @@ public class ScreenDateTimePickerChart extends Chart { @ApiModelProperty(notes = "绑定值的格式") private String valueFormat; + @ApiModelProperty(notes = "显示的格式") + private String format; + @ApiModelProperty(notes = "下拉框") private Map dropDownBox; diff --git a/DataRoom/dataroom-core/src/main/java/com/gccloud/dataroom/core/module/chart/components/ScreenTimePickerChart.java b/DataRoom/dataroom-core/src/main/java/com/gccloud/dataroom/core/module/chart/components/ScreenTimePickerChart.java index 1b8d0aee..4c085f1c 100644 --- a/DataRoom/dataroom-core/src/main/java/com/gccloud/dataroom/core/module/chart/components/ScreenTimePickerChart.java +++ b/DataRoom/dataroom-core/src/main/java/com/gccloud/dataroom/core/module/chart/components/ScreenTimePickerChart.java @@ -53,6 +53,9 @@ public class ScreenTimePickerChart extends Chart { @ApiModelProperty(notes = "绑定值的格式") private String valueFormat; + @ApiModelProperty(notes = "显示的格式") + private String format; + } diff --git a/data-room-ui/packages/BasicComponents/DateTimePicker/index.vue b/data-room-ui/packages/BasicComponents/DateTimePicker/index.vue index c75b1605..5f3d7ef9 100644 --- a/data-room-ui/packages/BasicComponents/DateTimePicker/index.vue +++ b/data-room-ui/packages/BasicComponents/DateTimePicker/index.vue @@ -8,6 +8,7 @@ :class="['basic-component-date-picker', `date-picker-${config.code}`]" :popper-class="'basic-component-date-picker date-picker-popper-' + config.code" :value-format="config.customize.valueFormat" + :format="config.customize.format" :default-value="value" size="large" @focus="focusEvent" diff --git a/data-room-ui/packages/BasicComponents/DateTimePicker/setting.vue b/data-room-ui/packages/BasicComponents/DateTimePicker/setting.vue index df413f32..5523bbaf 100644 --- a/data-room-ui/packages/BasicComponents/DateTimePicker/setting.vue +++ b/data-room-ui/packages/BasicComponents/DateTimePicker/setting.vue @@ -21,6 +21,20 @@ 基础
+ + + + +
- 时间格式 + 日期时间格式
- - - +
+ - + + +
+ 年:yyyy,表示年份,例如:2017
+ 月:M,表示月份,不补0,例如:1
+ 月:MM,表示月份,补0,例如:01
+ 日:d,表示日期,不补0,例如:2
+ 日:dd,表示日期,补0,例如:02
+ 小时:H,表示小时(24小时制),不补0,例如:3
+ 小时:HH,表示小时(24小时制),补0,例如:03
+ 小时:h,表示小时(12小时制),须和 A 或 a 使用,不补0,例如:3
+ 小时:hh,表示小时(12小时制),须和 A 或 a 使用,补0,例如:03
+ 分钟:m,表示分钟,不补0,例如:4
+ 分钟:mm,表示分钟,补0,例如:04
+ 秒:s,表示秒钟,不补0,例如:5
+ 秒:ss,表示秒钟,补0,例如:05
+ AM/PM:A,仅 format 可用,大写,例如:AM
+ am/pm:a,仅 format 可用,小写,例如:am
+ JS时间戳:timestamp,仅 value-format 可用,组件绑定值为number类型,例如:1483326245000
+ 不需要格式化字符:[MM],使用方括号标识不需要格式化的字符,例如:MM
+ 具体的时间格式化字符和使用方式,可以参考Element-UI官网的日期选择器的时间格式化部分。 +
+
+
- - - - + +
+ + + + + +
+ 时间戳:从1970年1月1日开始计算的秒数,数据类型为数值型,例如:1483326245000。
+ 自定义:通过输入特定的格式字符串来指定时间的数据格式,例如:yyyy-MM-dd HH:mm:ss对应数据为 2023-10-08 09:30:00。
+
+
+
-
+
- 时间格式示例:
- yyyy:表示年份,
- MM:表示月份,
- dd:表示日期,
- HH:表示小时(24小时制),
- mm:表示分钟,
- ss:表示秒,
- 具体可参考Element-UI官网的日期选择器的时间格式化部分。 +
+ 年:yyyy,表示年份,例如:2017
+ 月:M,表示月份,不补0,例如:1
+ 月:MM,表示月份,补0,例如:01
+ 日:d,表示日期,不补0,例如:2
+ 日:dd,表示日期,补0,例如:02
+ 小时:H,表示小时(24小时制),不补0,例如:3
+ 小时:HH,表示小时(24小时制),补0,例如:03
+ 小时:h,表示小时(12小时制),须和 A 或 a 使用,不补0,例如:3
+ 小时:hh,表示小时(12小时制),须和 A 或 a 使用,补0,例如:03
+ 分钟:m,表示分钟,不补0,例如:4
+ 分钟:mm,表示分钟,补0,例如:04
+ 秒:s,表示秒钟,不补0,例如:5
+ 秒:ss,表示秒钟,补0,例如:05
+ AM/PM:A,仅 format 可用,大写,例如:AM
+ am/pm:a,仅 format 可用,小写,例如:am
+ JS时间戳:timestamp,仅 value-format 可用,组件绑定值为number类型,例如:1483326245000
+ 不需要格式化字符:[MM],使用方括号标识不需要格式化的字符,例如:MM
+ 具体的时间格式化字符和使用方式,可以参考Element-UI官网的日期选择器的时间格式化部分。 +
@@ -162,7 +225,6 @@