1 | # date-time 使用说明
|
2 |
|
3 | ## 项目运行
|
4 |
|
5 | 1. cnpm install 或 npm install cnpm使用教程
|
6 |
|
7 | 2. npm run dev (开发环境打包 port:8080)
|
8 |
|
9 | 3. npm run test (测试用例)
|
10 |
|
11 | 4. npm run build (生产环境打包)
|
12 |
|
13 | ## DateTime参数
|
14 |
|
15 |
|
16 | ```javascript
|
17 | const props = {
|
18 | TimeData:{
|
19 |
|
20 | /**
|
21 | * 时间控件前的label
|
22 | */
|
23 | title:"测测试测试试试试",
|
24 |
|
25 | /**
|
26 | * input框里的值
|
27 | * 主要用于重置时间,非必须定义
|
28 | * 优先级比defaultValue高
|
29 | */
|
30 | value:"2016-12-12 12:12:12",
|
31 |
|
32 | /**
|
33 | * 初始默认时间(string)
|
34 | * 注意:
|
35 | * 1.默认日期的格式需与format格式相同!!!!
|
36 | * 2.日期格式可以是 "yyyy-MM-dd" 或者 "yyyy/MM/dd",并符合第一条注意点
|
37 | * 3.如果是单日历,则类型为字符串,如果是范围日历,则类型为数组:
|
38 | *
|
39 | * 单日历: 有初始值:"2016-12-12 12:12:12" 或 "2016-12-12" , 无初始值:""
|
40 | * 月日历: 有初始值:"2015-12" 无初始值: null
|
41 | * 范围日历:有初始值:["2016-1-1 11:11:11","2016-12-12 12:12:12"] ,无初始值:[]
|
42 | */
|
43 | defaultValue:"",
|
44 |
|
45 | /**
|
46 | * 增加时间选择功能
|
47 | */
|
48 | showTime:true,
|
49 |
|
50 | /**
|
51 | * 日期展示的格式
|
52 | * RangePicker 范围日历
|
53 | * RangePickerMonth 月范围
|
54 | * RangePickerYear 年范围
|
55 | * DatePicker 单个日历
|
56 | * MonthPicker 月日历
|
57 | * YearPicker 年日历
|
58 | */
|
59 | dateStyle:"DatePicker",
|
60 |
|
61 | /**
|
62 | * 展示的时间格式
|
63 | * "yyyy-MM-dd"
|
64 | * "yyyy-MM-dd HH:mm:ss"
|
65 | * "yyyy-MM"
|
66 | */
|
67 | format:"yyyy-MM-dd HH:mm:ss",
|
68 |
|
69 | /**
|
70 | * 没有值时的提示
|
71 | * (仅对单日历生效)
|
72 | */
|
73 | placeholder:"请选择日期",
|
74 |
|
75 | /**
|
76 | * 没有值时的提示
|
77 | * 开始日期提示,仅对范围日历生效
|
78 | */
|
79 | startPlaceholder: "开始时间",
|
80 |
|
81 | /**
|
82 | * 没有值时的提示
|
83 | * 结束日期提示,仅对范围日历生效
|
84 | */
|
85 | endPlaceholder: "截止时间",
|
86 |
|
87 | /**
|
88 | * 禁用全部操作
|
89 | * bool
|
90 | */
|
91 | disabled:false,
|
92 |
|
93 | /**
|
94 | * 只读,无法点击
|
95 | */
|
96 | readonly:false,
|
97 |
|
98 | /**
|
99 | * 是否展示label前的必填红点
|
100 | */
|
101 | required:true,
|
102 |
|
103 | /**
|
104 | * 指定不可选择日期
|
105 | * 注意:仅对单日历有效!!
|
106 | * all 所有日期都不可选
|
107 | * beforeNotToday 不可选择今天之前的日期(不包括今天)
|
108 | * beforeToday 不可选择今天之前的日期(包括今天)
|
109 | * afterToday 不可选择今天之后的日期
|
110 | * empty 所有日期都可选
|
111 | * lasttwoweeks 过去两周可选
|
112 | */
|
113 | disabledDate:"empty",
|
114 |
|
115 | /**
|
116 | * 自定义输入框样式
|
117 | */
|
118 | style:{
|
119 | "width":"50%",
|
120 | "height":""
|
121 | },
|
122 |
|
123 | /**
|
124 | * 激活状态
|
125 | * 需要通过changeActive方法改变组件外部state
|
126 | */
|
127 | isActive:this.state.isActive,
|
128 |
|
129 | /**
|
130 | * 性能打点需要的,暂时无用
|
131 | */
|
132 | cmp_id: '01',
|
133 |
|
134 | /**
|
135 | * 是否显示外侧删除按钮
|
136 | */
|
137 | showOutDel:false,
|
138 |
|
139 | /**
|
140 | * 是否显示
|
141 | */
|
142 | hidden:false,
|
143 |
|
144 | /**
|
145 | * 显示状态 "search" or "",'searchBtn' (仅针对BeisenCloud)
|
146 | */
|
147 | showStatus:"",
|
148 |
|
149 | /**
|
150 | * 是否报错
|
151 | */
|
152 | errorStatus:false,
|
153 |
|
154 | /**
|
155 | * 报错信息
|
156 | */
|
157 | errorMsg:"出错了~~~!",
|
158 |
|
159 |
|
160 | helpMsg:"adsa",
|
161 |
|
162 | /**
|
163 | * label位置
|
164 | * true 左边
|
165 | * false 上边
|
166 | */
|
167 | lablePos: false, //label位置,true时在左边,false在上边
|
168 |
|
169 | /**
|
170 | * label文字的对齐方式
|
171 | * true 左对齐
|
172 | * false 右对齐
|
173 | */
|
174 | lableTxt: true,
|
175 |
|
176 | /**
|
177 | * 是否去掉右侧的图标
|
178 | * true 去掉
|
179 | * false 不去掉
|
180 | */
|
181 | removeSuffixIcon: false,
|
182 |
|
183 | changeActive:function(isActive){
|
184 | //修改激活状态
|
185 | self.setState({isActive:isActive})
|
186 | },
|
187 |
|
188 | onChange:function(value,isToday){self.test(value)} /**点击后时间回调,isToday为打点需要**/
|
189 | }
|
190 | }
|
191 |
|
192 | ```
|
193 |
|
194 | ## date-time
|
195 |
|
196 | 1.安装npm组件包
|
197 |
|
198 | ```
|
199 | npm install @beisen/date-time --save-dev
|
200 | ```
|
201 |
|
202 | 2.引用组件
|
203 |
|
204 | ```javascript
|
205 | import DateTime from "@beisen/date-time"
|
206 | ```
|
207 |
|
208 | 3. 传入参数
|
209 |
|
210 | 该参数为上述参数,传入方式使用: data={参数}
|
211 | ```javascript
|
212 |
|
213 | test(){
|
214 | //点击重置按钮后将value变为空
|
215 | this.setState({value:""})
|
216 | }
|
217 | render () {
|
218 | return (
|
219 | <div>
|
220 | <button onClick={::this.test}></button>
|
221 | <DateTime {...this.state} />
|
222 | </div>
|
223 | )
|
224 | }
|
225 | ```
|
226 |
|
\ | No newline at end of file |