this.clickCalendarDay(e, date)}
987 | >
988 |
1005 | {(daySlot &&
1006 | daySlot(date, {
1007 | isMarked: !!(
1008 | this.markDateColor(date, "circle") ||
1009 | this.markDateColor(date, "dot")
1010 | ),
1011 | isDisabledDate: this.formatDisabledDate(date),
1012 | isToday: this.isToday(date),
1013 | isChecked: this.isCheckedDay(date),
1014 | isCurrentMonthDay: !this.isNotCurrentMonthDay(date, mIndex),
1015 | isFirstDayOfMonth: this.isFirstDayOfMonth(date, mIndex),
1016 | })) ||
1017 | (this.isFirstDayOfMonth(date, mIndex)
1018 | ? language.MONTH && language.MONTH[date.month]
1019 | : date.day)}
1020 |
1021 |
1025 |
364 |
365 | {pickerType !== 'time' ? dateNode : ''}
366 | {pickerType !== 'date' ? timeNode : ''}
367 |
368 | {showTodayButton ? (
369 |
375 | {todaySlot || language.TODAY}
376 |
377 | ) : null}
378 | {model === 'dialog' ? (
379 |
380 | {confirmSlot || language.CONFIRM}
381 |
382 | ) : null}
383 |
396 |
401 | {isShowAction ? actionNode : null}
402 |
416 | {pickerType !== 'date' ? (
417 |
423 | ) : null}
424 |
425 |
245 | {this.fillNumber(time)}
246 |
247 | ));
248 | };
249 |
250 | const timeContentNode = (timeArray?: number[][]): React.ReactNode => {
251 | return (
252 | timeArray &&
253 | timeArray.map((item: number[], index: number) => (
254 | {
260 | this.timeTouchMove(event, index);
261 | }}
262 | onTouchEnd={(event) => {
263 | this.timeTouchEnd(event, index);
264 | }}
265 | >
266 | {timeItemNode(item, index)}
267 |
268 | ))
269 | );
270 | };
271 |
272 | return show ? (
273 |
274 |
{timeContentNode(timeArray)}
275 |
120 |
121 |
143 |
144 | );
145 | }
146 | }
147 |
148 | export default Examples;
149 |
--------------------------------------------------------------------------------
/src/index.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import ReactDOM from 'react-dom';
3 | import Examples from './examples/index';
4 | import './style/reset.css';
5 |
6 | ReactDOM.render(
7 |
8 |
9 | ,
10 | document.getElementById('root')
11 | );
12 |
--------------------------------------------------------------------------------
/src/language/cn.ts:
--------------------------------------------------------------------------------
1 | /*
2 | * @Description:中文
3 | * @Author: TSY
4 | * @Date: 2020-09-08 23:12:02
5 | * @LastEditTime: 2020-09-09 22:22:01
6 | */
7 |
8 | export default {
9 | CONFIRM: '确定',
10 | TODAY: '今天',
11 | WEEK: ['日', '一', '二', '三', '四', '五', '六'],
12 | MONTH: [
13 | '1月',
14 | '2月',
15 | '3月',
16 | '4月',
17 | '5月',
18 | '6月',
19 | '7月',
20 | '8月',
21 | '9月',
22 | '10月',
23 | '11月',
24 | '12月',
25 | ],
26 | DEFAULT_DATE_FORMAT: 'YY年MM月DD日',
27 | DEFAULT_TIME_FORMAT: 'hh:mm',
28 | };
29 |
--------------------------------------------------------------------------------
/src/language/en.ts:
--------------------------------------------------------------------------------
1 | /**
2 | * @Description: 英文
3 | * @Author: TSY
4 | * @CreateDate: 2020/3/22 21:59
5 | */
6 |
7 | export default {
8 | CONFIRM: 'CONFIRM',
9 | TODAY: 'TODAY',
10 | WEEK: ['SUN', 'MON', 'TUE', 'WED', 'THU', 'FRI', 'SAT'],
11 | MONTH: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sept', 'Oct', 'Nov', 'Dec'],
12 | DEFAULT_DATE_FORMAT: 'MM DD,YY',
13 | DEFAULT_TIME_FORMAT: 'at hh:mm F'
14 | }
15 |
--------------------------------------------------------------------------------
/src/language/index.ts:
--------------------------------------------------------------------------------
1 | /**
2 | * @Description: 统一导出所有语言文件
3 | * @Author: TSY
4 | * @CreateDate: 2020/3/22 22:01
5 | */
6 |
7 | import CN from './cn';
8 | import EN from './en';
9 |
10 | export default {
11 | CN,
12 | EN,
13 | };
14 |
--------------------------------------------------------------------------------
/src/style/common.css:
--------------------------------------------------------------------------------
1 | /**
2 | * @Description:
3 | * @Author: TSY
4 | * @CreateDate: 2018/6/9 13:28
5 | */
6 | .click_item:active {
7 | background: #eee;
8 | }
9 | .mask {
10 | position: fixed;
11 | top: 0;
12 | left: 0;
13 | width: 100%;
14 | height: 100%;
15 | background: rgba(0,0,0,0.5);
16 | z-index: 999;
17 | }
18 | .pulldown-wrapper {
19 | top: -150px;
20 | }
21 | .iconfont {
22 | font-size: 34px;
23 | font-size: 4.533333333333333vw;
24 | }
25 |
--------------------------------------------------------------------------------
/src/style/common.styl:
--------------------------------------------------------------------------------
1 | /**
2 | * @Description:
3 | * @Author: TSY
4 | * @CreateDate: 2018/6/9 13:28
5 | */
6 |
7 | //设计稿尺寸
8 | designSize = 750px
9 | // 页面主色
10 | main-color = #1c71fb
11 | //页面背景色
12 | bg-color = #f4f4f4
13 | //主文字颜色
14 | main-font-color = #4c4c4c
15 | //副文字颜色
16 | vice-font-color = #898989
17 | //禁用背景颜色
18 | disabled-bg-color = #f5f7fa
19 | //禁用文字颜色
20 | disabled-font-color = #c0c4cc
21 | //绿色
22 | green-color = #00cb69
23 | //红色
24 | red-color = #f80f30
25 | //橙色
26 | orange-color = #FF7800
27 | // 1px 实线边框
28 | solidBorder(color = bg-color) {
29 | border 1px solid color
30 | }
31 |
32 | borderBottom(color = bg-color) {
33 | border-bottom 1px solid color
34 | }
35 |
36 | borderTop(color = bg-color) {
37 | border-top 1px solid color
38 | }
39 |
40 | borderLeft(color = bg-color) {
41 | border-left 1px solid color
42 | }
43 |
44 | borderRight(color = bg-color) {
45 | border-right 1px solid color
46 | }
47 |
48 | bottomLine(color = bg-color) {
49 | border-bottom px2vw(16px) solid color
50 | }
51 |
52 | topLine(color = bg-color) {
53 | border-top px2vw(16px) solid color
54 | }
55 |
56 | //浏览器私有前缀属性扩展
57 | vendor(prop, args) {
58 | -webkit-{prop} args
59 | -moz-{prop} args
60 | {prop} args
61 | }
62 |
63 | //文字溢出显示省略号
64 | textOverflow() {
65 | overflow hidden
66 | text-overflow ellipsis
67 | white-space nowrap
68 | }
69 |
70 | //px转vw
71 | px2vw(size) {
72 | return (size /designSize * 100) vw
73 | }
74 |
75 | fontSize(size, isMoblie = true)
76 | if isMobile
77 | font-size size
78 | font-size px2vw(size)
79 | else
80 | font-size size
81 |
82 | paddingAround() {
83 | padding px2vw(30px) px2vw(34px)
84 | }
85 |
86 | paddingSmall() {
87 | padding px2vw(16px) px2vw(34px)
88 | }
89 |
90 | fixedTop() {
91 | position: fixed
92 | width 100%
93 | top 0
94 | left 0
95 | z-index 2
96 | }
97 |
98 | fixedBottom() {
99 | position: fixed
100 | width 100%
101 | bottom 0
102 | left 0
103 | z-index 2
104 | }
105 |
106 | flexAlign(align = center) {
107 | display flex
108 | align-items align
109 | }
110 |
111 | flexContent(align = center, justify = center) {
112 | display flex
113 | align-items align
114 | justify-content justify
115 | }
116 |
117 | flexBetween(align = center) {
118 | display flex
119 | align-items align
120 | justify-content space-between
121 | }
122 |
123 | flexAround(align = center) {
124 | display flex
125 | align-items align
126 | justify-content space-around
127 | }
128 |
129 | .click_item:active {
130 | background: #eee;
131 | }
132 |
133 | .mask {
134 | position fixed
135 | top 0
136 | left 0
137 | width 100%
138 | height 100%
139 | background rgba(0,0,0,0.5)
140 | z-index 999
141 | }
142 |
143 | .pulldown-wrapper {
144 | top: -150px;
145 | }
146 |
147 | .iconfont {
148 | fontSize(34px)
149 | }
--------------------------------------------------------------------------------
/src/style/reset.css:
--------------------------------------------------------------------------------
1 | /**
2 | * @Description:
3 | * @Author: TSY
4 | * @CreateDate: 2018/6/9 13:28
5 | */
6 | html,
7 | body {
8 | width: 100%;
9 | border: 0;
10 | font-family: 'Helvetica-Neue', 'Helvetica', Arial, sans-serif;
11 | margin: 0;
12 | padding: 0;
13 | overflow-x: hidden;
14 | font-size: 4vw;
15 | background: #fff;
16 | color: #191919;
17 | }
18 | div,
19 | span,
20 | object,
21 | iframe,
22 | img,
23 | table,
24 | caption,
25 | thead,
26 | tbody,
27 | tfoot,
28 | tr,
29 | td,
30 | article,
31 | aside,
32 | canvas,
33 | details,
34 | figure,
35 | hgroup,
36 | menu,
37 | nav,
38 | footer,
39 | header,
40 | section,
41 | summary,
42 | mark,
43 | audio,
44 | video {
45 | border: 0;
46 | margin: 0;
47 | padding: 0;
48 | }
49 | h1,
50 | h2,
51 | h3,
52 | h4,
53 | h5,
54 | h6,
55 | p,
56 | blockquote,
57 | pre,
58 | a,
59 | abbr,
60 | address,
61 | cit,
62 | code,
63 | del,
64 | dfn,
65 | em,
66 | ins,
67 | q,
68 | samp,
69 | small,
70 | strong,
71 | sub,
72 | sup,
73 | b,
74 | i,
75 | hr,
76 | dl,
77 | dt,
78 | dd,
79 | ol,
80 | ul,
81 | li,
82 | fieldset,
83 | legend,
84 | label {
85 | border: 0;
86 | vertical-align: baseline;
87 | margin: 0;
88 | padding: 0;
89 | }
90 | article,
91 | aside,
92 | canvas,
93 | figure,
94 | figure img,
95 | figcaption,
96 | hgroup,
97 | footer,
98 | header,
99 | nav,
100 | section,
101 | audio,
102 | video {
103 | display: inline-block;
104 | }
105 | table {
106 | border-collapse: separate;
107 | border-spacing: 0;
108 | }
109 | table caption,
110 | table th,
111 | table td {
112 | text-align: left;
113 | vertical-align: middle;
114 | }
115 | li {
116 | list-style: none;
117 | }
118 | a {
119 | text-decoration: none;
120 | outline: none;
121 | display: inline-block;
122 | }
123 | a img {
124 | border: 0;
125 | }
126 | img {
127 | width: 100%;
128 | }
129 | :focus {
130 | outline: 0;
131 | }
132 | * {
133 | box-sizing: border-box;
134 | }
135 | textarea {
136 | resize: none;
137 | appearance: none;
138 | font-size: 4vw;
139 | }
140 | input {
141 | appearance: none;
142 | -webkit-appearance: none;
143 | font-size: 4vw;
144 | }
145 | select {
146 | appearance: none;
147 | background-color: #fff;
148 | font-size: 4vw;
149 | }
150 | button {
151 | border: none;
152 | font-size: 4vw;
153 | }
154 | p,
155 | span {
156 | letter-spacing: 1px;
157 | }
158 | .mescroll-totop-self {
159 | bottom: 50px !important;
160 | }
161 | .mint-indicator-wrapper {
162 | z-index: 99;
163 | }
164 |
--------------------------------------------------------------------------------
/src/style/reset.styl:
--------------------------------------------------------------------------------
1 | /**
2 | * @Description:
3 | * @Author: TSY
4 | * @CreateDate: 2018/6/9 13:28
5 | */
6 | html, body {
7 | .hash-calendar {
8 | width: 100%;
9 | border: 0;
10 | font-family: "Helvetica-Neue", "Helvetica", Arial, sans-serif;
11 | margin: 0;
12 | padding: 0;
13 | overflow-x: hidden;
14 | font-size: 4vw;
15 | background: #fff;
16 | color: #191919
17 | }
18 | }
19 |
20 | .hash-calendar {
21 | div, span, object, iframe, img, table, caption, thead, tbody,
22 | tfoot, tr, tr, td, article, aside, canvas, details, figure, hgroup, menu,
23 | nav, footer, header, section, summary, mark, audio, video {
24 | border: 0;
25 | margin: 0;
26 | padding: 0;
27 | }
28 |
29 | h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, address, cit, code,
30 | del, dfn, em, ins, q, samp, small, strong, sub, sup, b, i, hr, dl, dt, dd,
31 | ol, ul, li, fieldset, legend, label {
32 | border: 0;
33 | vertical-align: baseline;
34 | margin: 0;
35 | padding: 0;
36 | }
37 |
38 | li {
39 | list-style: none;
40 | }
41 |
42 | * {
43 | box-sizing: border-box;
44 |
45 | &:focus {
46 | outline: 0;
47 | }
48 | }
49 |
50 | button {
51 | border: none;
52 | font-size: 4vw;
53 | }
54 |
55 | p, span {
56 | letter-spacing: 1px;
57 | }
58 |
59 | }
60 |
--------------------------------------------------------------------------------
/src/utils/constant.ts:
--------------------------------------------------------------------------------
1 | /*
2 | * @Description:
3 | * @Author: TSY
4 | * @Date: 2020-10-28 23:32:59
5 | * @LastEditTime: 2020-10-28 23:35:13
6 | */
7 | import { tuple } from './type';
8 |
9 | export const SCROLL_DIRECTION_LIST = tuple('left', 'right', 'up', 'down');
10 |
11 | export const WEEK_LIST = tuple(
12 | 'Sunday',
13 | 'Monday',
14 | 'Tuesday',
15 | 'Wednesday',
16 | 'Thursday',
17 | 'Friday',
18 | 'Saturday'
19 | );
20 |
21 | export const DIRECTION_LIST = tuple(
22 | '',
23 | 'all',
24 | 'left',
25 | 'right',
26 | 'up',
27 | 'down',
28 | 'horizontal',
29 | 'vertical'
30 | );
31 |
--------------------------------------------------------------------------------
/src/utils/eq.ts:
--------------------------------------------------------------------------------
1 | const toString = Object.prototype.toString;
2 |
3 | function isFunction(obj: any) {
4 | return toString.call(obj) === '[object Function]';
5 | }
6 |
7 | export const eq = (a: any, b: any, aStack?: any, bStack?: any): boolean => {
8 | // === 结果为 true 的区别出 +0 和 -0
9 | if (a === b) return a !== 0 || 1 / a === 1 / b;
10 |
11 | // typeof null 的结果为 object ，这里做判断，是为了让有 null 的情况尽早退出函数
12 | if (a == null || b == null) return false;
13 |
14 | // 判断 NaN
15 | // eslint-disable-next-line
16 | if (a !== a) return b !== b;
17 |
18 | // 判断参数 a 类型，如果是基本类型，在这里可以直接返回 false
19 | var type = typeof a;
20 | if (type !== 'function' && type !== 'object' && typeof b != 'object')
21 | return false;
22 |
23 | // 更复杂的对象使用 deepEq 函数进行深度比较
24 | return deepEq(a, b, aStack, bStack);
25 | };
26 |
27 | function deepEq(a: any, b: any, aStack: any, bStack: any) {
28 | // a 和 b 的内部属性 [[class]] 相同时 返回 true
29 | var className = toString.call(a);
30 | if (className !== toString.call(b)) return false;
31 |
32 | switch (className) {
33 | case '[object RegExp]':
34 | case '[object String]':
35 | return '' + a === '' + b;
36 | case '[object Number]':
37 | // eslint-disable-next-line
38 | if (+a !== +a) return +b !== +b;
39 | return +a === 0 ? 1 / +a === 1 / b : +a === +b;
40 | case '[object Date]':
41 | case '[object Boolean]':
42 | return +a === +b;
43 | }
44 |
45 | var areArrays = className === '[object Array]';
46 | // 不是数组
47 | if (!areArrays) {
48 | // 过滤掉两个函数的情况
49 | if (typeof a != 'object' || typeof b != 'object') return false;
50 |
51 | var aCtor = a.constructor,
52 | bCtor = b.constructor;
53 | // aCtor 和 bCtor 必须都存在并且都不是 Object 构造函数的情况下，aCtor 不等于 bCtor， 那这两个对象就真的不相等啦
54 | if (
55 | aCtor === bCtor &&
56 | !(
57 | isFunction(aCtor) &&
58 | aCtor instanceof aCtor &&
59 | isFunction(bCtor) &&
60 | bCtor instanceof bCtor
61 | ) &&
62 | 'constructor' in a &&
63 | 'constructor' in b
64 | ) {
65 | return false;
66 | }
67 | }
68 |
69 | aStack = aStack || [];
70 | bStack = bStack || [];
71 | var length = aStack.length;
72 |
73 | // 检查是否有循环引用的部分
74 | while (length--) {
75 | if (aStack[length] === a) {
76 | return bStack[length] === b;
77 | }
78 | }
79 |
80 | aStack.push(a);
81 | bStack.push(b);
82 |
83 | // 数组判断
84 | if (areArrays) {
85 | length = a.length;
86 | if (length !== b.length) return false;
87 |
88 | while (length--) {
89 | if (!eq(a[length], b[length], aStack, bStack)) return false;
90 | }
91 | }
92 | // 对象判断
93 | else {
94 | var keys = Object.keys(a),
95 | key;
96 | length = keys.length;
97 |
98 | if (Object.keys(b).length !== length) return false;
99 | while (length--) {
100 | key = keys[length];
101 | if (!(b.hasOwnProperty(key) && eq(a[key], b[key], aStack, bStack)))
102 | return false;
103 | }
104 | }
105 |
106 | aStack.pop();
107 | bStack.pop();
108 | return true;
109 | }
110 |
--------------------------------------------------------------------------------
/src/utils/type.ts:
--------------------------------------------------------------------------------
1 | /*
2 | * @Description:
3 | * @Author: TSY
4 | * @Date: 2020-09-18 22:15:06
5 | * @LastEditTime: 2020-10-10 22:58:29
6 | */
7 | export type Omit = Pick>;
8 | // https://stackoverflow.com/questions/46176165/ways-to-get-string-literal-type-of-array-values-without-enum-overhead
9 | export const tuple = (...args: T) => args;
10 |
11 | export const tupleNum = (...args: T) => args;
12 |
13 | /**
14 | * https://stackoverflow.com/a/59187769
15 | * Extract the type of an element of an array/tuple without performing indexing
16 | */
17 | export type ElementOf = T extends (infer E)[]
18 | ? E
19 | : T extends readonly (infer E)[]
20 | ? E
21 | : never;
22 |
23 | /**
24 | * https://github.com/Microsoft/TypeScript/issues/29729
25 | */
26 | export type LiteralUnion = T | (U & {});
27 |
28 | export interface IDate {
29 | year: number;
30 | month: number;
31 | day: number;
32 | }
33 |
34 | export interface ITime {
35 | hours: number;
36 | minutes: number;
37 | }
38 |
--------------------------------------------------------------------------------
/src/utils/util.ts:
--------------------------------------------------------------------------------
1 | /*
2 | * @Description: 各种工具类
3 | * @Author: TSY
4 | * @Date: 2020-09-08 23:13:30
5 | * @LastEditTime: 2020-10-10 22:18:15
6 | */
7 |
8 | /**
9 | * 判断安卓与IOS平台
10 | * @returns {string}
11 | */
12 | export const checkPlatform = function () {
13 | if (/android/i.test(navigator.userAgent)) {
14 | return '1';
15 | }
16 | if (/(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent)) {
17 | return '2';
18 | }
19 | };
20 |
21 | /**
22 | * 日期格式化
23 | * @param time {string}
24 | * @param format {string}
25 | * @returns {string}
26 | */
27 | export let formatDate = (
28 | time: string | Date,
29 | format?: string,
30 | lang = 'CN'
31 | ): string => {
32 | lang = lang.toUpperCase();
33 | let language = require('../language').default[lang] || {};
34 | format =
35 | format || `${language.DEFAULT_DATE_FORMAT} ${language.DEFAULT_TIME_FORMAT}`;
36 | let date = time ? new Date(time) : new Date();
37 | let year = date.getFullYear();
38 | let month = date.getMonth() + 1; // 月份是从0开始的
39 | let day = date.getDate();
40 | let hour = date.getHours();
41 | let min = date.getMinutes();
42 | let sec = date.getSeconds();
43 | let preArr = Array.apply(null, Array(10)).map(function (elem, index) {
44 | return '0' + index;
45 | }); /// /开个长度为10的数组 格式为 00 01 02 03
46 |
47 | let newTime = format
48 | .replace(/YY/g, year + '')
49 | .replace(/F/g, hour >= 12 ? 'pm' : 'am')
50 | .replace(/ss/g, preArr[sec] || sec + '')
51 | .replace(/mm/g, preArr[min] || min + '')
52 | .replace(
53 | /hh/g,
54 | hour > 12 && format.includes('F')
55 | ? hour - 12 + ''
56 | : format.includes('F')
57 | ? hour + ''
58 | : preArr[hour] || hour + ''
59 | )
60 | .replace(/DD/g, preArr[day] || day + '')
61 | .replace(
62 | /MM/g,
63 | lang === 'EN' ? language.MONTH[month - 1] : preArr[month] || month
64 | );
65 |
66 | return newTime;
67 | };
68 |
--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "outDir": "./dist/",
4 | "target": "es5",
5 | "lib": [
6 | "dom",
7 | "dom.iterable",
8 | "esnext"
9 | ],
10 | "allowJs": false,
11 | "skipLibCheck": true,
12 | "esModuleInterop": true,
13 | "allowSyntheticDefaultImports": true,
14 | "strict": true,
15 | "forceConsistentCasingInFileNames": true,
16 | "module": "esnext",
17 | "moduleResolution": "node",
18 | "resolveJsonModule": true,
19 | "isolatedModules": true,
20 | "noEmit": true,
21 | "jsx": "react",
22 | "sourceMap": true,
23 | "noImplicitAny": false,
24 | },
25 | "include": [
26 | "src"
27 | ]
28 | }
--------------------------------------------------------------------------------
/type.d.ts:
--------------------------------------------------------------------------------
1 | declare module 'ReactHashCalendar';
2 | declare module 'Calendar';
3 | declare module 'TimePicker';
4 |
--------------------------------------------------------------------------------