-
Notifications
You must be signed in to change notification settings - Fork 2
/
App.js
81 lines (71 loc) · 1.79 KB
/
App.js
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
import 'devextreme/dist/css/dx.light.css';
import React from 'react';
import './App.css';
import { DateBox } from 'devextreme-react/date-box';
const holidays = [
new Date(0, 0, 1),
new Date(0, 0, 20),
new Date(0, 1, 17),
new Date(0, 4, 10),
new Date(0, 4, 25),
new Date(0, 5, 21),
new Date(0, 6, 4),
new Date(0, 8, 7),
new Date(0, 9, 5),
new Date(0, 9, 12),
new Date(0, 10, 11),
new Date(0, 10, 26),
new Date(0, 10, 27),
new Date(0, 11, 24),
new Date(0, 11, 25),
new Date(0, 11, 31)
];
class App extends React.Component {
now = new Date();
minDate = new Date(1900, 0, 1);
constructor(props) {
super(props);
this.state = {
dateBoxValue: this.now
};
this.getDisabledDates = this.getDisabledDates.bind(this);
this.onValueChanged = this.onValueChanged.bind(this);
}
getDisabledDates(args) {
const dayOfWeek = args.date.getDay();
const isWeekend = dayOfWeek === 0 || dayOfWeek === 6;
return args.view === "month" && (isWeekend || this.isHoliday(args.date));
}
isHoliday(date) {
for (let holiday of holidays) {
if (date.getDate() === holiday.getDate() && date.getMonth() === holiday.getMonth()) {
return true;
}
}
return false;
}
onValueChanged(e) {
console.log(e.previousValue);
console.log(e.value);
this.setState({
dateBoxValue: e.value
});
}
render() {
return (
<div className="App">
<DateBox
type="datetime"
value={this.state.dateBoxValue}
onValueChanged={this.onValueChanged}
disabledDates={this.getDisabledDates}
min={this.minDate}
max={this.now}
label="Date and time"
labelMode="floating"
/>
</div>
);
}
}
export default App;