picker/docs/examples/time.tsx at d905bc5dd9360ba07a7e5d0edaec1809796b8dd3 · react-component/picker · GitHub

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
import React from 'react';
import moment from 'moment';
import Picker, { RangePicker } from '../../src';
import momentGenerateConfig from '../../src/generate/moment';
import zhCN from '../../src/locale/zh_CN';
import '../../assets/index.less';

const defaultValue = moment('2019-11-28 01:02:03');

export default () => {
  return (
    <div>
      <h3>DatePicker</h3>
      <Picker
        defaultValue={defaultValue}
        picker="date"
        showTime
        disabledTime={() => ({
          disabledHours: () => [0, 1, 2, 3, 4, 5, 6, 20, 21],
        })}
        locale={zhCN}
        generateConfig={momentGenerateConfig}
      />

      <h3>TimePicker</h3>
      <Picker
        defaultValue={defaultValue}
        picker="time"
        locale={zhCN}
        disabledTime={(now) => ({
          disabledHours: () => [now.hours()],
        })}
        generateConfig={momentGenerateConfig}
      />

      <h3>TimePicker 12 Hours</h3>
      <Picker
        defaultValue={defaultValue}
        picker="time"
        locale={zhCN}
        disabledTime={(now) => ({
          disabledHours: () => [now.hours()],
        })}
        generateConfig={momentGenerateConfig}
        use12Hours
      />

      <h3>RangePicker</h3>
      <RangePicker
        defaultValue={[defaultValue, defaultValue]}
        picker="time"
        locale={zhCN}
        generateConfig={momentGenerateConfig}
        disabledTime={(now, type) => ({
          disabledHours: () => (type === 'start' ? [now.hours()] : [now.hours() - 5]),
        })}
      />
    </div>
  );
};