Hawthorn-Api

# 日期组件说明

日期组件 常用的日期、时间组件
Author songgangyu@expservice.com.cn

# 前端示例

<template>
  <div>
    <ht-row>
      <ht-col :span="12">
        <ht-form
          ref-form="dateForm"
          :form-list="dateFormList"
          divider="日期组件"
           :form-style="{width:'350px'}"
        />
      </ht-col>
      <ht-col :span="12">
        <ht-form
          ref-form="dateTimeForm"
          :form-list="dateTimeFormList"
          divider="时间组件"
          :form-style="{width:'400px'}"
        />
      </ht-col>
    </ht-row>
  </div>
</template>
<script>
export default {
  name: 'DateFormIndex',
  components: {},
  data() {
    return {
      // date tab
      dateFormList: [
        {
          type: 'date', // date 年月日不含时分
          format: [0, 'isDate', 10], // isDate 年月日不含时分
          label: '标准日期',
          dateType: 'date', // date 单个输入框 选择年月日不含时分
          field: 'dateCreateDate',
          colspan: 4
        },
        {
          type: 'date',
          format: [0, 'isDate', 10],
          label: '周期日期',
          dateType: 'daterange', // daterange 两个输入框 年月日 至 年月日 不含时分
          //dateType: 'daterange2',  daterange2 两个输入框 年月日 至 年月日 不含时分 支持只选择一项
          field: 'dateRangeDate',
          colspan: 4
        },
        {
          type: 'date',
          format: [0, 'isDate', 10],
          label: '禁用日期',
          dateType: 'date',
          // disabledDateFunc: ['beforeToday'], // 预设禁用日期函数['beforeToday','afterToday']
          disabledDate: (date) => { // 自定义禁用日期函数
            // console.log(this.formList[0].value); // 可以支持按照指定日期禁用
            return date.getTime() < Date.now() - 8.64e7;
          },
          field: 'dateDisabledDate1',
          colspan: 4
        },
        {
          type: 'date',
          format: [0, 'isDate', 4],
          dateType: 'year', // year 单个输入框 选择年 不含月日时分
          label: '选择年份',
          field: 'dateSelectYear',
          colspan: 4
        },
        {
          type: 'date',
          format: [0, 'isDate', 10],
          dateType: 'month', // month 单个输入框 选择年月 不含日时分
          label: '选择月份',
          field: 'dateSelectMonth',
          colspan: 4
        },
        {
          type: 'date',
          format: [0, 'isDate', 10],
          dateType: 'monthrange', // monthrange 两个输入框 选择年月 不含日时分
          label: '周期月份',
          field: 'dateSelectMonth2',
          colspan: 6
        },
        {
          type: 'date',
          format: [0, 'isDate', 10],
          dateType: 'week', // week 单个输入框 选择一整周 对应哪年的第多少周
          label: '选择周度',
          field: 'dateSelectWeek',
          colspan: 4
        }
      ],
      // datetime tab
      dateTimeFormList: [
        {
          type: 'datetime', // datetime 年月日时分
          format: [0, 'isDateTime', 10], // isDateTime 年月日时分
          label: '日期时间',
          dateType: 'datetime', // datetime 单个输入框 选择年月日时分
          field: 'dateTimeCreateDate'
        },
        {
          type: 'time', // time 时分
          format: [0, 'isTime', 5], // isTime 时分
          label: '固定时间',
          field: 'timeFixTime'
        },
        {
          type: 'time',
          format: [0, 'isTime', 5],
          label: '默认时间',
          field: 'timeFixTime1',
          value: '09:00'// 默认时分、可以写死可以拼接方法
        },
        {
          type: 'datetime',
          format: [0, 'isDateTime', 30], // isDateTime 年月日时分
          label: '周期时间1',
          dateType: 'datetimerange', // datetimerange 两个输入框 选择年月日时分
          //dateType: 'datetimerange2',  datetimerange2 两个输入框 选择年月日时分 支持只选择一项
          field: 'defaultTimes1'
        },
        {
          type: 'time',
          format: [0, 'isTime', 30],
          label: '周期时间',
          dateType: 'timerange', // timerange 两个输入框 选择时分
          field: 'defaultTimes'
        },
        {
          type: 'time',
          format: [0, 'isTime', 30],
          label: '默认时间',
          dateType: 'timerange', 
          field: 'timeAny',
          value: ['09:00', '20:00']
          // 添加默认时间(年月日时分)
          // value: [`${ new Date().getFullYear()}-${new Date().getMonth() + 1 < 10 ? `0${ new Date().getMonth() + 1}` : new Date().getMonth() + 1}-01`,
          // `${new Date().getFullYear()}-${new Date().getMonth() + 1 < 10 ? `0${ new Date().getMonth() + 1}` : new Date().getMonth() + 1}-${new Date(new Date(new Date().getFullYear(), new Date().getMonth() + 1, 1) - (1000 * 60 * 60 * 24)).getDate()}`]
        }
      ]
    };
  },
  computed: {
  },
  created() {
  },
  mounted() {
  },
  methods: {
  }
};
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
Expand Copy

# 版本

  • v1.0.1

← 弹窗组件 →